Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Bit more styling and selection work
  • Loading branch information
gashcrumb committed May 23, 2013
1 parent c0b2b59 commit caaf424
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 22 deletions.
25 changes: 12 additions & 13 deletions hawtio-web/src/main/webapp/app/fabric/html/fabricView.html
Expand Up @@ -13,13 +13,13 @@
<div class="canvas">

<div ng-repeat="container in containers" ng-show="filterContainer(container)">
<div class="box" id="container#{{container.id}}" data-drop="true" jqyoui-droppable="{multiple: false, stack: true, onDrop: 'handleDrop', index: $index}">
<div class="box" ng-class="isSelectedContainer(container)" id="container#{{container.id}}" data-drop="true" jqyoui-droppable="{multiple: false, stack: true, onDrop: 'handleDrop', index: $index}">

<input type="checkbox" ng-model="container.selected">

<a href="" ng-click="setActiveContainer(container)">
<div ng-click="setActiveContainer(container)">
{{container.id}}
</a>
</div>

</div>
</div>
Expand All @@ -35,11 +35,10 @@
<div class="version-section">
<div class="canvas">
<div ng-repeat="version in versions">
<div class="box" id="version#{{version.id}}" data-drag="true" jqyoui-draggable="{animate:false, placeholder: keep, index: $index}" data-jqyoui-options="{revert: 'invalid', appendTo: '.fabric-view', containment: 'element', helper: 'clone'}">
<div class="box" ng-class="isSelectedVersion(version.id)" id="version#{{version.id}}" data-drag="true" jqyoui-draggable="{animate:false, placeholder: keep, index: $index}" data-jqyoui-options="{revert: 'invalid', appendTo: '.fabric-view', containment: 'element', helper: 'clone'}" ng-click="setActiveVersionId(version.id)">

<a href="" ng-click="setActiveVersionId(version.id)">
{{version.id}} {{containersForVersion(version.id)}}
</a>

{{version.id}} {{containersForVersion(version.id)}}

</div>
</div>
Expand All @@ -53,11 +52,9 @@

<div class="canvas">
<div ng-repeat="profile in profiles">
<div class="box" id="profile#{{profile}}" data-drag="true" jqyoui-draggable="{animate:false, placeholder: keep, index: $index}" data-jqyoui-options="{revert: 'invalid', appendTo: '.fabric-view', containment: 'element', helper: 'clone'}">
<div class="box" ng-class="isSelectedProfile(profile)" id="profile#{{profile}}" data-drag="true" jqyoui-draggable="{animate:false, placeholder: keep, index: $index}" data-jqyoui-options="{revert: 'invalid', appendTo: '.fabric-view', containment: 'element', helper: 'clone'}" ng-click="setActiveProfileId(profile)">

<a href="" ng-click="setActiveProfileId(profile)">
{{profile}} {{containersForProfile(profile)}}
</a>
{{profile}} {{containersForProfile(profile)}}

</div>
</div>
Expand All @@ -76,13 +73,15 @@

<div ng-repeat="profile in activeProfiles" ng-show="filterActiveProfile(profile)">
<div class="box">

<a href="" ng-click="removeActiveProfiles(profile)" ng-show="(activeContainerId && activeContainerId != '') || selectedContainers.length > 0">
<i class="icon-remove"></i>
</a>

<a href="" ng-click="setActiveProfile(profile)">
<div ng-click="setActiveProfile(profile.id)">

{{profile.versionId}} / {{profile.id}} ({{profile.count}})
</a>
</div>
</div>
</div>
</div>
Expand Down
41 changes: 38 additions & 3 deletions hawtio-web/src/main/webapp/app/fabric/js/fabricView.ts
Expand Up @@ -31,20 +31,24 @@ module Fabric {
$scope.$watch('containers', (oldValue, newValue) => {
if (oldValue !== newValue) {
$scope.selectedContainers = $scope.containers.filter((c) => { return c.selected; });
if ($scope.selectedContainers.length > 0) {
$scope.activeContainerId = '';
//$scope.activeVersionId = '';
}
}
}, true);


$scope.handleDrop = (event, element) => {

//console.log("event: ", event);
console.log("element: ", element);
//console.log("element: ", element);

var sourceElement = element.draggable.get(0);
var targetElement = event.target;

console.log("sourceElement: ", sourceElement);
console.log("targetElement: ", targetElement);
//console.log("sourceElement: ", sourceElement);
//console.log("targetElement: ", targetElement);

var temp = targetElement.id.split('#');

Expand Down Expand Up @@ -123,6 +127,7 @@ module Fabric {
} else {
$scope.removeProfile($scope.activeContainerId, profile.id);
}
$scope.activeProfileId = '';
};


Expand Down Expand Up @@ -247,6 +252,34 @@ module Fabric {
};


$scope.isSelectedVersion = (id) => {
if ($scope.activeVersionId === id) {
return 'selected';
}
return '';
};

$scope.isSelectedProfile = (id) => {
if ($scope.activeProfileId === id) {
return 'selected';
}
return '';
}

$scope.isSelectedContainer = (container) => {
if ($scope.activeContainerId === container.id &&
$scope.activeContainerVersion === container.versionId) {
return 'selected';
}

if (container.selected) {
return 'selected';
}

return '';
}


$scope.setActiveProfileId = (id) => {
$scope.activeProfileId = id;
};
Expand All @@ -273,10 +306,12 @@ module Fabric {
if (!container || container === null) {
$scope.activeContainerId = '';
$scope.activeContainerVersion = '';
$scope.containers.each((c) => {c.selected = false});
return;
}
$scope.activeContainerId = container.id;
$scope.activeContainerVersion = container.versionId;
$scope.containers.each((c) => {c.selected = false});
};


Expand Down
45 changes: 39 additions & 6 deletions hawtio-web/src/main/webapp/css/site-base.less
Expand Up @@ -1356,8 +1356,8 @@ li.stacktrace {
position: relative;
margin-top: 0px;
//width: 32%;
border: 1px solid @control-border;
border-radius: 4px;
//border: 1px solid @control-border;
//border-radius: 4px;
height: 98%;
//margin: .2em;
//padding: .2em;
Expand Down Expand Up @@ -1392,21 +1392,35 @@ li.stacktrace {

.box {
border: 1px solid @control-border;
border-radius: 4px;
padding: 5px;
border-radius: 1em;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;


position: relative;


transition: color .2s;
line-height: 2em;

box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.1),
inset 0px 0px 3px rgba(0, 0, 0, 0.2);

cursor: pointer;

background: white;

}

.version-section {
height: 20%;
height: 30%;
overflow-x: hidden;
overflow-y: auto;
}

.profile-section {
height: 70%;
height: 60%;
overflow-x: hidden;
overflow-y: auto;
}
Expand All @@ -1415,3 +1429,22 @@ li.stacktrace {
width: 274px;
}

.box.selected {

color: hsl(210, 100%, 40%);
text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;

box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.1),
inset 1px 1px 5px rgba(0, 0, 0, 0.4);
}

.box div {
display: inline-block;
width: 80%;
}

.box input[type='checkbox'] {
margin-top: .6em;
display: inline-block;
}

0 comments on commit caaf424

Please sign in to comment.