Skip to content

Commit

Permalink
Merge pull request #128 from diggyk/ui-improvement
Browse files Browse the repository at this point in the history 
General improvements to the Labors WebUI
  • Loading branch information
@jathanism
jathanism committed Feb 4, 2016
2 parents 96ad056 + 765cd06 commit 899fb5f
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 124 deletions.
203 changes: 115 additions & 88 deletions hermes/webapp/src/css/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
@xlight-orange: #FFCCAF;
@red: #c92929;
@light-red: #E6CFD0;
@xlight-red:#EA9C9C;
@xlight-red: #EA9C9C;
@dark-red: #944D4D;
@xdark-red: #6A1C0E;
@red-gray: #4D2828;
Expand All @@ -38,7 +38,6 @@
@success-color: @blue;
@link-color: @blue;


// Width variables (appears count calculates by raw css)
@width2: 100%;
// Appears 4 times
Expand Down Expand Up @@ -111,8 +110,8 @@ button {
-o-transform: none;
transform: none;
&:hover {
-webkit-box-shadow: 2px 2px 3px @shadow-color;
-moz-box-shadow: 2px 2px 3px @shadow-color;
-webkit-box-shadow: 2px 2px 3px @shadow-color;
-moz-box-shadow: 2px 2px 3px @shadow-color;
box-shadow: 2px 2px 3px @shadow-color;
transform: translate(-1px, -1px);
-webkit-transform: translate(-1px, -1px);
Expand All @@ -125,7 +124,7 @@ button {
}
&:active {
background: desaturate(@btn-color2, 15%);
-webkit-box-shadow: inset 0px 0px 6px lighten(@shadow-color, 20%);
-webkit-box-shadow: inset 0px 0px 6px lighten(@shadow-color, 20%);
-moz-box-shadow: inset 0px 0px 6px lighten(@shadow-color, 20%);
box-shadow: inset 0px 0px 6px lighten(@shadow-color, 20%);
transform: translate(-1px, -1px);
Expand Down Expand Up @@ -535,7 +534,7 @@ a {
overflow: hidden;
.panel-row {
overflow: hidden;
&.top-row{
&.top-row {
.helper-panel {
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
Expand Down Expand Up @@ -605,7 +604,7 @@ a {
color: @black;
border-collapse: separate;
border-spacing: 5px;
thead tr th button[disabled] {
thead tr th button[disabled] {
color: @black;
opacity: 1;
}
Expand Down Expand Up @@ -667,9 +666,9 @@ a {
}

.box-continuation {
-webkit-box-shadow: inset 0 -30px 30px -30px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 -30px 30px -30px rgba(0,0,0,0.5);
box-shadow: inset 0 -30px 30px -30px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 -30px 30px -30px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 -30px 30px -30px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 -30px 30px -30px rgba(0, 0, 0, 0.5);
}

.remove-img-button {
Expand Down Expand Up @@ -813,92 +812,120 @@ a {
.labor-actions.disabled {
opacity: 0.5;
}
.labor-entry {
-ms-transition: 0.15s ease-in all;
-o-transition: 0.15s ease-in all;
-webkit-transition: 0.15s ease-in all;
-moz-transition: 0.15s ease-in all;
transition: 0.15s ease-in all;
background: @unselected-color;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
border: transparent 2px solid;

.labor-entry-wrapper {
padding: 0;
margin-bottom: 10px;
overflow: auto;
padding: 2px 15px;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
&:hover {
-moz-box-shadow: 2px 2px 5px 0px @shadow-color;
-webkit-box-shadow: 2px 2px 5px 0px @shadow-color;
box-shadow: 2px 2px 5px 0px @shadow-color;

.entry-outer {
cursor: pointer;
-webkit-transform: translate(-1px, -1px);
-moz-transform: translate(-1px, -1px);
-ms-transform: translate(-1px, -1px);
-o-transform: translate(-1px, -1px);
transform: translate(-1px, -1px);
}
.hostname {
-moz-border-radius: 5px 0px 0px 0px;
-webkit-border-radius: 5px 0px 0px 0px;
border-radius: 5px 0px 0px 0px;
font-size: 1.0em;
padding: 2px 5px;
}
.labor-type {
-moz-border-radius: 0px 5px 0px 0px;
-webkit-border-radius: 0px 5px 0px 0px;
border-radius: 0px 5px 0px 0px;
font-size: 1.0em;
padding: 2px 5px;
text-align: right;
}
.info-panel {
font-size: 0.8em;
padding: 5px;
ul {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: @white;
border-radius: 5px;
display: block;
margin: 0px;
padding: 0px;
-ms-transition: 0.1s ease-in all;
-o-transition: 0.1s ease-in all;
-webkit-transition: 0.1s ease-in all;
-moz-transition: 0.1s ease-in all;
transition: 0.1s ease-in all;

border-radius: 5px;
border: none;
background-color: @xlight-gray;
overflow: auto;

&.selected {
background-color:@selected-color;
}
li {
display: inline-block;
margin-right: 5px;
padding: 0;

.btn-glyph {
color: @med-gray;
cursor: pointer;
font-size: 1.2em;
padding: 5px;
&.hover {
text-shadow: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
&.small {
font-size: 0.8em;
}
&.selected {
color: @blue;
}
}
.label-holder {
float: left;
font-size: 1em;
font-weight: bold;
margin: 7px 5px 5px 0px;
&:hover {
-moz-box-shadow: 2px 2px 5px 0px @shadow-color;
-webkit-box-shadow: 2px 2px 5px 0px @shadow-color;
box-shadow: 2px 2px 5px 0px @shadow-color;
cursor: pointer;
-webkit-transform: translate(-1px, -1px);
-moz-transform: translate(-1px, -1px);
-ms-transform: translate(-1px, -1px);
-o-transform: translate(-1px, -1px);
transform: translate(-1px, -1px);
}
.details {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: @white;
border-radius: 5px;
margin: 2px 0px;
overflow: hidden;
padding: 5px;
.entry-inner {
width: ~"calc(100% - 30px)";
float: left;
background-color: @light-gray;
min-height: 40px;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
padding: 2px;
border-left: 2px solid @med-gray;
.hostname {
-moz-border-radius: 5px 0px 0px 0px;
-webkit-border-radius: 5px 0px 0px 0px;
border-radius: 5px 0px 0px 0px;
font-size: 1.0em;
padding: 2px 10px;
}
.labor-owner {
padding: 2px 10px;
font-size: 0.8em;
}
.info-panel {
clear: both;
font-size: 0.8em;
padding: 5px;
ul {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: @white;
border-radius: 5px;
display: block;
margin: 0px;
padding: 0px;
}
li {
display: inline-block;
margin-right: 5px;
padding: 0;
}
.label-holder {
float: left;
font-size: 1em;
font-weight: bold;
margin: 7px 5px 5px 0px;
}
.details {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: @white;
border-radius: 5px;
margin: 0;
overflow: hidden;
padding: 5px;
}
}
}
}
}
.labor-entry.selected {
-moz-transition: 0.15s ease-in all;
-ms-transition: 0.15s ease-in all;
-o-transition: 0.15s ease-in all;
-webkit-transition: 0.15s ease-in all;
background: @selected-color;
transition: 0.15s ease-in all;

.labor-count {
padding-bottom: 10px;
}
.quest-info {
margin: 10px 0px;
Expand Down
7 changes: 7 additions & 0 deletions hermes/webapp/src/js/controllers/laborStatusCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@

vm.laborData = null;
vm.selected = [];
vm.laborsPerQuest = {};
vm.hostTags = null;
vm.hostOwners = null;
vm.throwableTypes = null;
Expand Down Expand Up @@ -286,6 +287,12 @@
if (vm.laborData[idx]['id'] == $routeParams.laborId) {
index = idx;
}
var questId = vm.laborData[idx]['questId'];
if (questId in vm.laborsPerQuest) {
vm.laborsPerQuest[questId] = vm.laborsPerQuest[questId] + 1;
} else {
vm.laborsPerQuest[questId] = 0;
}
}

if ($routeParams.laborId && index == -1) {
Expand Down
75 changes: 39 additions & 36 deletions hermes/webapp/src/templates/laborList.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@
<img src="/img/loading.gif"/>
</div>
<!--LABOR ENTRY REPEATER-->
<div class="labor-list-row" ng-if="lsc.laborData"
<div id="l{{labor.id}}" class="labor-list-row" ng-if="lsc.laborData"
ng-repeat="labor in (pageData = (lsc.laborData | limitTo:lsc.limit:lsc.offset)) track by labor.id">
<!-- QUEST HEADER -->
<div class="quest-info" ng-if="labor.quest && labor.quest.id != pageData[$index-1].quest.id">
Expand All @@ -151,43 +151,46 @@
The following labors were created as a result of events that were not part of a quest creation.
</div>
</div>
<div id="l{{labor.id}}" class="labor-entry"
ng-click="lsc.toggleSelect(labor.id)"
ng-class="lsc.selected.indexOf(labor.id) != -1 ? 'selected': ''">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="hostname col-md-12"><strong>{{labor.host.hostname}}:</strong> {{labor.fate.description}}</div>
<div class="info-panel col-md-12">
<div style="float: left">
<strong>Labor For:&nbsp;</strong>
</div>
<div>
<div ng-if="labor.forOwner == true">
Server Owner
</div>
<div ng-if="labor.forCreator == true">
Quest Creator
</div>
</div>
</div>
</div>
<div class="labor-count" ng-if="labor.quest && labor.quest.id != pageData[$index-1].quest.id">
<strong>{{lsc.laborsPerQuest[labor.quest.id]}} labors in this quest.</strong>
</div>
<!-- ACTUAL LABOR ENTRY BITS -->
<div class="labor-entry-wrapper" ng-click="lsc.toggleSelect(labor.id)">
<div class="entry-outer" ng-class="lsc.selected.indexOf(labor.id) != -1 ? 'selected': ''">
<div style="width: 30px; float:left; height: 100%">
<span role="checkbox" class="glyphicon glyphicon-check btn-glyph" style="text-align: center; width: 100%"
ng-class="lsc.selected.indexOf(labor.id) != -1 ? 'selected': ''">
</span>
</div>
<div class="info-panel col-md-8">
<div class="label-holder">
<strong>Tags:</strong>
<div class="entry-inner">
<div style="width: 50%; float: left">
<div class="hostname"><strong>{{labor.host.hostname}}:</strong> {{labor.fate.description}}</div>
</div>
<div class="details">
<img ng-if="!lsc.hostTags" src="/img/loading_15.gif" alt="Tag information loading" />
<ul ng-if="lsc.hostTags">
<li>
owner=<img ng-if="!lsc.hostOwners" src="/img/loading_15.gif" alt="Owner information loading" />
<span ng-if="lsc.hostOwners">{{lsc.hostOwners[labor.host.hostname]}}</span>
</li>
<li ng-repeat="tag in lsc.hostTags[labor.host.hostname] track by $index">
{{tag}}
</li>
</ul>
<div style="width: 50%; float:left; text-align: right">
<div class="labor-owner">
<strong>Labor For:&nbsp;</strong>
<span ng-if="labor.forOwner == true">
Server Owner
</span>
<span ng-if="labor.forCreator == true">
Quest Creator
</span>
</div>
</div>
<div class="info-panel">
<div class="details">
<img ng-if="!lsc.hostTags" src="/img/loading_15.gif" alt="Tag information loading" />
<ul ng-if="lsc.hostTags">
<li><strong>Tags:</strong></li>
<li>
owner=<img ng-if="!lsc.hostOwners" src="/img/loading_15.gif" alt="Owner information loading" />
<span ng-if="lsc.hostOwners">{{lsc.hostOwners[labor.host.hostname]}}</span>
</li>
<li ng-repeat="tag in lsc.hostTags[labor.host.hostname] track by $index">
{{tag}}
</li>
</ul>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 899fb5f

Please sign in to comment.