Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Better color picker widget for #66 or whatever else
  • Loading branch information
gashcrumb committed May 15, 2013
1 parent b5d49bd commit c784b49
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 23 deletions.
26 changes: 17 additions & 9 deletions hawtio-web/src/main/webapp/app/ui/html/colorPicker.html
@@ -1,9 +1,17 @@
<table class="color-picker">
<tr>
<td ng-repeat="color in colorList">
<div class="{{color.select}}" style="background-color: {{color.color}};"
ng-click="selectColor(color)">
</div>
<td>
</tr>
</table>
<div class="color-picker">
<div class="wrapper">
<div class="selected-color" style="background-color: {{property}};" ng-click="popout = !popout"></div>
</div>
<div class="color-picker-popout">
<table>
<tr>
<td ng-repeat="color in colorList">
<div class="{{color.select}}" style="background-color: {{color.color}};"
ng-click="selectColor(color)">
</div>
<td>
</tr>
</table>
<i class="icon-remove" ng-click="popout = !popout"></i>
</div>
</div>
20 changes: 11 additions & 9 deletions hawtio-web/src/main/webapp/app/ui/html/test.html
@@ -1,5 +1,16 @@
<div ng-controller="UI.UITestController">

<div>
Color picker
<div class="row-fluid">

<div>
My Color ({{myColor}}): <div hawtio-color-picker='myColor'></div>
</div>
</div>

</div>

<div>
Confirmation Dialog
<div class="row-fluid">
Expand Down Expand Up @@ -116,15 +127,6 @@
</div>
</div>

<div>
Color picker
<div class="row-fluid">
<div hawtio-color-picker='myColor'></div>
<div>
My color : <div class="inline-block" style="padding: 3px; width: 8px; height: 8px; border-radius: 4px; border-size: 1px; background-color: {{myColor}}"></div>{{myColor}}</div>
</div>

</div>



Expand Down
6 changes: 6 additions & 0 deletions hawtio-web/src/main/webapp/app/ui/js/colorPickerDirective.ts
Expand Up @@ -42,6 +42,12 @@ module UI {

public controller = ($scope, $element, $timeout) => {

$scope.popout = false;

$scope.$watch('popout', () => {
$element.find('.color-picker-popout').toggleClass('popout-open', $scope.popout);
});

$scope.selectColor = (color) => {
for (var i = 0; i < $scope.colorList.length; i++) {
$scope.colorList[i].select = unselected;
Expand Down
1 change: 1 addition & 0 deletions hawtio-web/src/main/webapp/app/ui/js/testController.ts
Expand Up @@ -28,6 +28,7 @@ module UI {


$scope.myColor = "#FF887C";
$scope.showColorDialog = false;


}
Expand Down
72 changes: 67 additions & 5 deletions hawtio-web/src/main/webapp/css/site-base.css
Expand Up @@ -1196,21 +1196,83 @@ li.stacktrace {
border-right: 1px solid rgba(0, 0, 0, 0) !important;
}

.color-picker tr td div {
width: 8px;
height: 8px;
.color-picker {
display: inline-block;
margin: 0px;
line-height: 0px;
}

.color-picker .wrapper {
display: inline-block;
border: 1px solid #d4d4d4;
padding: 2px;
border-radius: 4px;
line-height: 0;
}

.selected-color {
width: 1em;
height: 1em;
border-radius: 4px;
padding: 4px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
display: inline-block;
cursor: pointer;
}

.color-picker-popout {
transition: opacity 0.25s ease-in-out;
display: inline-flex;
overflow: hidden;
background: white;
border-radius: 4px;
padding: 0px;
line-height: 0;
margin: 0px;
border: 1px solid rgba(0, 0, 0, 0);
width: 0px;
opacity: 0;
}

.popout-open {
border: 1px solid #d4d4d4;
padding: 1px;
width: auto;
opacity: 1;
}

.color-picker div table tr td div {
width: 1em;
height: 1em;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 4px;
padding: 3px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.color-picker tr td {
.color-picker div i {
margin-top: 0.3em;
cursor: pointer;
color: #d4d4d4;
opacity: .4;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.color-picker div i:hover {
opacity: 1;
}

.color-picker div table tr td {
padding-right: 5px;
}

.color-picker tr td div.selected {
.color-picker div table tr td:last-child {
padding-right: 0px;
}

.color-picker div table tr td div.selected {
border-color: #474747;

}

0 comments on commit c784b49

Please sign in to comment.