Skip to content

Commit

Permalink
Merge pull request #16 from pgeib/UI_Workflow
Browse files Browse the repository at this point in the history 
UI_Workflow less
  • Loading branch information
@nhaagen
nhaagen authored Jun 21, 2018
2 parents 99bfe55 + ef26bde commit 9a1a3ed
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 16,293 deletions.
135 changes: 7 additions & 128 deletions src/UI/templates/default/Listing/tpl.linear.html
View file
Original file line number Diff line number Diff line change
@@ -1,143 +1,22 @@
<style type="text/css" href="workflow.css">

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.eot');
src: url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

ul.il-workflow-steps {
list-style: none;
padding: 0;
}

li.il-workflow-step:before {
background-color: #fff;
border: 1px solid #4c6586; /*@brand-primary*/
border-radius: 50%;
color: #fff;
content: "";
font-family: Glyphicons Halflings;
font-size: 12px;
height: 20px;
line-height: 1.6em;
margin-left: 5px;
padding-left: 1px;
position: absolute;
text-align: center;
width: 20px;
}

li.il-workflow-step.completed_successfully:before,
li.il-workflow-step.not_yet_available.completed_successfully:before {
content: "\e013";
background-color: #ddd; /*border-gray*/
color: #fff;
}

li.il-workflow-step.completed_unsuccessfully:before,
li.il-workflow-step.not_yet_available.completed_unsuccessfully:before {
content: "\e014";
background-color: #ddd; /*border-gray*/
color: #fff;
}

li.il-workflow-step.not_yet_available:before,
li.il-workflow-step.no_longer_available:before {
content: "\e033";
color: #ddd; /*@border-gray*/
background-color: #f5f5f5;
border: none;
}

li.il-workflow-step.no_longer_available:before {
content: "\e023"; /*2212*/
font-size: 1em;
line-height: 1.5em;
}

li.il-workflow-step.available.completed_successfully:before,
li.il-workflow-step.available.completed_unsuccessfully:before,
li.il-workflow-step.inprogress:before {
background-color: #4c6586; /*@brand-primary*/
}

li.il-workflow-step.inprogress.no_longer_available:before,
li.il-workflow-step.inprogress.not_yet_available:before {
background-color: #a5b2c2; /*50% @brand-primary*/
}

li.il-workflow-step.inprogress:before {
color: #fff;
}

li.il-workflow-step.active:before {
margin: 5px 0 0 0;
width: 30px;
height: 30px;
}

li.il-workflow-step .text {
border-left: 1px dashed #434343; /*@mid-gray*/
margin-left: 15px;
padding: 0 0 30px 20px;
}

li.il-workflow-step:last-child .text {
border-left: none;
}

li.il-workflow-step .text span.il-workflow-step-label {
font-weight: 600;
display: block;
}

li.il-workflow-step.active .text {
padding-left: 40px;
}

li.il-workflow-step.active .text span.il-workflow-step-label {
color: #4c6586; /*@brand-primary*/
font-size: 1.4em;
}

li.il-workflow-step.not_yet_available .text,
li.il-workflow-step.no_longer_available .text {
color: #ddd; /*@border-gray*/
}

li.il-workflow-step.inprogress.no_longer_available .text span,
li.il-workflow-step.inprogress.not_yet_available .text span {
color: #333;
opacity: .5;
}


</style>

<div class="il-workflow linear">
<div class="il-workflow-header">
<h3 class="il-workflow-title">{TITLE}</h3>
</div>
<ul class="il-workflow-steps">
<ul class="il-workflow-container">
<!-- BEGIN step -->
<li class="il-workflow-step
<!-- BEGIN first --> first<!-- END first -->
<!-- BEGIN last --> last<!-- END last -->
<!-- BEGIN active --> active<!-- END active -->
<!-- BEGIN available --> available<!-- END available -->
<!-- BEGIN not_yet --> not_yet_available<!-- END not_yet -->
<!-- BEGIN not_anymore --> no_longer_available<!-- END not_anymore -->
<!-- BEGIN not_yet --> not-yet-available<!-- END not_yet -->
<!-- BEGIN not_anymore --> no-longer-available<!-- END not_anymore -->
<!-- BEGIN status_notstarted --> notstarted<!-- END status_notstarted -->
<!-- BEGIN status_inprogress --> inprogress<!-- END status_inprogress -->
<!-- BEGIN status_completed_successfully --> completed_successfully<!-- END status_completed_successfully -->
<!-- BEGIN status_completed_unsuccessfully --> completed_unsuccessfully<!-- END status_completed_unsuccessfully -->
<!-- BEGIN status_notstarted --> not-started<!-- END status_notstarted -->
<!-- BEGIN status_inprogress --> in-progress<!-- END status_inprogress -->
<!-- BEGIN status_completed_successfully --> completed-successfully<!-- END status_completed_successfully -->
<!-- BEGIN status_completed_unsuccessfully --> completed-unsuccessfully<!-- END status_completed_unsuccessfully -->
">

<div class="text">
Expand Down
169 changes: 89 additions & 80 deletions src/UI/templates/default/Listing/workflow.less
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,129 @@
@border-gray: #ddd;
@icon-size: 20px;
@White: #fff;

//.il-workflow-header {
//margin-bottom: @padding-base-horizontal;
//height: @il-top-bar-height;
//}

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.eot');
src: url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../../libs/bower/bower_components/webui-popover/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
.il-workflow-header {
margin-bottom: @padding-base-horizontal;
height: @il-top-bar-height;
}

ul.il-workflow-steps {
.il-workflow-container {
list-style: none;
padding: 0;
li.il-workflow-step {

.il-workflow-step {
&:before {
background-color: #fff;
border: 1px solid @brand-primary;
background-color: @White;
border: @icon-size*0.05 solid @brand-primary;
border-radius: 50%;
color: #fff;
color: @White;
content: "";
font-family: Glyphicons Halflings;
font-size: @icon-size*0.6;
height: @icon-size;
line-height: 1.6em;
margin-left: @icon-size/4;
padding-left: @icon-size*0.05;
position: absolute;
text-align: center;
width: @icon-size;
}

.completed_successfully,
.not_yet_available.completed_successfully,
.completed_unsuccessfully,
.not_yet_available.completed_unsuccessfully {
&:before {
background-color: @border-gray;
color: #fff;
}
}
.completed_successfully,
.not_yet_available.completed_successfully {
&:before {
content: "\e013";
}
}
.completed_unsuccessfully,
.not_yet_available.completed_unsuccessfully {
&:before {
content: "\e014";
}
&:last-child .text {
border-left: none;
}
}

.not_yet_available,
.no_longer_available {
&:before {

//available, not-yet, no-longer

.not-yet-available,
.no-longer-available {
&:before {
content: "\e033";
color: @border-gray;
background-color: #f5f5f5; //Hintergrundfarbe vom umgebenden Container
background-color: #f5f5f5;
border: none;
}
}
.not_yet_available {
&.in-progress {
&:before {
content: "\e033";
background-color: lighten(@brand-primary, 30%);
color: @White;
}
}
.no_longer_available {
&:before {
content: "\2212";
.text span {
color: @mid-gray;
opacity: .5;
}
}

.available.completed_successfully:before,
.available.completed_unsuccessfully:before,
.inprogress:before {
background-color: @brand-primary;
.text {
color: @border-gray;
}

.inprogress:before {
color: #fff;
}
.no-longer-available {
&:before {
content: "\e023";
font-size: 1em;
line-height: 1.5em;
}
}

.text {
border-left: 1px dashed @mid-gray;
margin-left: 10px;
padding: 0 0 30px 20px;
span.il-workflow-step-label {
display: block;
font-weight: 600;
}

//successfully,unsuccessfully

.completed-successfully,
.completed-unsuccessfully {
&:before {
background-color: @border-gray;
color: @White;
}
:last-child .text {
border-left: none;
}
.completed-successfully {
&:before {
content: "\e013";
}
}
.completed-unsuccessfully {
&:before {
content: "\e014";
}
.active .text {
padding-left: 40px;
span.il-workflow-step-label {
}
.available.completed-successfully,
.available.completed-unsuccessfully,
.in-progress {
&:before {
background-color: @brand-primary;
}
}


//active

.active {
&:before {
margin: @icon-size/4 0 0 0;
width: @icon-size*1.5;
height: @icon-size*1.5;
}
.text {
padding-left: @icon-size*2;

.il-workflow-step-label {
color: @brand-primary;
font-size: 1.4em;
}
}
.not_yet_available .text,
.no_longer_available .text,
.inprogress.no_longer_available .text,
.inprogress.not_yet_available .text {
color: @border-gray;
}
.inprogress.no_longer_available .text span,
.inprogress.not_yet_available .text span {
opacity: .5;
}


//text

.text {
border-left: 1px dashed @mid-gray;
margin-left: @icon-size*0.75;
padding: 0 0 @icon-size*1.5 @icon-size;

.il-workflow-step-label {
font-weight: 600;
display: block;
}
}
}
Loading

0 comments on commit 9a1a3ed

Please sign in to comment.