Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout stato dei processi - logooff utente

Browse Source
This commit is contained in:
Paolo Possanzini
2017-12-12 12:15:11 +01:00
parent 18b1e6492d
commit 9d8ad07705
12 changed files with 270 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/assets/styles/base/buttons.less
+2
View File
@@ -21,6 +21,8 @@ button.btn {
box-shadow: @button-shadow;
padding: 0 20px;
border:none;
background-image: linear-gradient(to bottom, @color-white2, @color-silver);
color: @color-darkish-blue;
}
button.btn.btn-success {
Step/wwwroot/assets/styles/base/colors.less
+10
View File
@@ -7,6 +7,9 @@
@color-apple-green:#7ed321;
@color-background-white: #fff;
@color-white2: #f1f1f1;
@color-silver: #bbbcbc;
@color-backdrop: rgba(217, 217, 217, 0.5);
@color-darkish-blue: #002680;
@color-clear-blue: #1791ff;
@@ -16,9 +19,16 @@
@color-input-background: #f8f8f8;
@color-squash : #f5a623;
@color-scarlet:#d0021b;
@color-duck-egg-blue: #e5f1f9;
@color-body-background: #657178;
@color-green: @color-apple-green;
@color-blue: @color-darkish-blue;
@color-alarm-background-image: linear-gradient(to bottom, #ff4d63, #a10518);
@color-alarm-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
Step/wwwroot/assets/styles/base/input.less
+54 -54
View File
@@ -1,66 +1,66 @@
// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
@import "fonts.less";
@font-family: 'Work Sans', sans-serif;
@font-size:18px;
@font-family: 'Work Sans',
sans-serif;
@font-size: 18px;
@font-size-small: 14px;
@input-height: 48px;
.form-group {
display: block;
margin-bottom: 33px;
label{
display: block;
color:@color-label-grey;
font-size: @font-size;
line-height: 1;
font-family: @font-family;
text-align: left;
margin-bottom: 13px;
}
margin-bottom: 33px;
label {
display: block;
color: @color-label-grey;
font-size: @font-size;
line-height: 1;
font-family: @font-family;
text-align: left;
margin-bottom: 13px;
}
input,
select {
display: block;
border-radius: 2px;
border: solid 1px #dfdfdf;
height: @input-height;
line-height: 1.1;
font-family: @font-family;
color: @color-input-light;
font-size: @font-size;
background-color: @color-input-background;
margin: 0 0px;
padding-right: 0;
padding-left: 20px;
width: calc(~'100% - 20px');
}
select {
padding: 0;
width: 100%;
}
input.invalid {
border-color: @color-scarlet;
}
small.error {
text-align: left;
display: block;
color: @color-scarlet;
font-size: @font-size-small;
font-family: @font-family;
line-height: 1;
padding-left: 16px;
margin: 2px 0;
}
}
input {
.text-center {
text-align: center;
}
.block {
display: block;
border-radius: 2px;
border:solid 1px #dfdfdf;
height: @input-height;
line-height: 1.1;
font-family: @font-family;
color: @color-input-light;
font-size: @font-size;
background-color: @color-input-background;
margin: 0 0px;
padding-right: 0;
padding-left: 20px;
width: calc(~'100% - 20px');
}
input.invalid{
border-color: @color-scarlet;
}
small.error{
text-align: left;
display: block;
color: @color-scarlet;
font-size:@font-size-small;
font-family: @font-family;
line-height: 1;
padding-left: 16px;
margin: 2px 0;
}
}
.text-center{
text-align: center;
}
.block{
display: block;
}
.block-center{
margin:auto;
.block-center {
margin: auto;
}
Step/wwwroot/assets/styles/base/layout.less
+2
View File
@@ -8,6 +8,8 @@
@import "header.less";
@import "ribbons.less";
@import "footer.less";
@import "process-info.less";
@persona-size: 88px;
.persona {
height: @persona-size;
Step/wwwroot/assets/styles/base/process-info.less
+48
View File
@@ -0,0 +1,48 @@
// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
@width: 280px;
@height: 64px;
.process-info {
background-color: @color-white;
width: @width;
min-width: @width;
max-width: @width;
height: @height;
overflow: hidden;
position: relative;
display: flex;
justify-content: space-between;
margin: 0 9px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
.counter {
width: 72px;
height: @height;
background-color: @color-duck-egg-blue;
color: black;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.content {
display: flex;
color: @color-squash;
align-items: center;
max-width: 140px;
width: 140px;
overflow: hidden;
}
.status {
width: @height;
height: @height;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: @color-squash;
}
.content.running,
.status.running {
color: @color-green;
}
}
Step/wwwroot/assets/styles/style.css
+52 -1
View File
@@ -172,7 +172,8 @@
text-align: left;
margin-bottom: 13px;
}
.form-group input {
.form-group input,
.form-group select {
display: block;
border-radius: 2px;
border: solid 1px #dfdfdf;
@@ -187,6 +188,10 @@
padding-left: 20px;
width: calc(100% - 20px);
}
.form-group select {
padding: 0;
width: 100%;
}
.form-group input.invalid {
border-color: #d0021b;
}
@@ -221,6 +226,8 @@ button.btn {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
padding: 0 20px;
border: none;
background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
color: #002680;
}
button.btn.btn-success {
background-image: linear-gradient(to bottom, #1756ad, #002680);
@@ -565,6 +572,50 @@ footer .container button.big:after {
top: calc(50% - 5px);
transform-origin: 46px 5px;
}
.process-info {
background-color: #fff;
width: 280px;
min-width: 280px;
max-width: 280px;
height: 64px;
overflow: hidden;
position: relative;
display: flex;
justify-content: space-between;
margin: 0 9px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.process-info .counter {
width: 72px;
height: 64px;
background-color: #e5f1f9;
color: black;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.process-info .content {
display: flex;
color: #f5a623;
align-items: center;
max-width: 140px;
width: 140px;
overflow: hidden;
}
.process-info .status {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #f5a623;
}
.process-info .content.running,
.process-info .status.running {
color: #7ed321;
}
.persona {
height: 88px;
width: 88px;
Step/wwwroot/dist/build.js
Vendored
+45 -5
View File
File diff suppressed because one or more lines are too long
Step/wwwroot/src/modules/app-header.ts
+2 -2
View File
@@ -1,11 +1,11 @@
import Vue from "vue";
import Component from "vue-class-component";
import { AppRibbon, UserInfo } from "./base-components";
import { AppRibbon, UserInfo, ProcessInfo } from "./base-components";
import { AppModel } from "../store";
@Component({ name: "app-header", components: { appRibbon: AppRibbon, userInfo: UserInfo } })
@Component({ name: "app-header", components: { appRibbon: AppRibbon, userInfo: UserInfo, processInfo: ProcessInfo } })
export default class AppHeader extends Vue {
$store: any;
Step/wwwroot/src/modules/app-header.vue
+7
View File
@@ -28,6 +28,13 @@
<button class="key" v-if="state.resetAxesAlarm"><img src="/assets/icons/png/taratura-icon-error@2x.png"></button>
<button class="key" v-if="state.waterJet1Alarm"></button>
<button class="key" v-if="state.waterJet2Alarm"></button>
<process-info :running="true" :counter="2">
<strong>Part file 01</strong>
</process-info>
<process-info :counter="5">
<strong>Part file 02</strong>
</process-info>
<user-info></user-info>
</header>
Step/wwwroot/src/modules/base-components/index.js
+2 -1
View File
@@ -4,5 +4,6 @@ import AppRibbon from "./ribbons/app-ribbon.vue";
import UserInfo from "./user-info.vue";
import ModalContainer from "./modal-container.vue";
import { ModalHelper } from "./ModalHelper";
import ProcessInfo from "./process-info.vue";
export { Loader, Modal, AppRibbon, UserInfo, ModalContainer, ModalHelper };
export { Loader, Modal, AppRibbon, UserInfo, ModalContainer, ModalHelper, ProcessInfo };
Step/wwwroot/src/modules/base-components/process-info.vue
+24
View File
@@ -0,0 +1,24 @@
<template>
<div class="process-info">
<div class="status" :class="{running:running}">
<i class="fa fa-play" v-if="running"></i>
<i class="fa fa-pause" v-if="!running"></i>
</div>
<div class="content" :class="{running:running}">
<slot></slot>
</div>
<div class="counter">
x&nbsp;{{counter}}
</div>
</div>
</template>
<script>
export default {
name: "process-info",
props: {
counter: { default: 0 },
running: { default: false }
}
};
</script>
Step/wwwroot/src/modules/user-info-dialog.vue
+22
View File
@@ -5,6 +5,22 @@
<div class="login-form">
<img src="/assets/profile.png" class="persona block" >
</div>
<button class="btn block block-center" @click="doLogin()">Log out</button>
<div class="login-form">
<div class="form-group">
<label>Lingua</label>
<select class="form-control">
<option value="it">Italiano</option>
</select>
</div>
</div>
</div>
</modal>
</template>
@@ -15,4 +31,10 @@
margin-top: 46px;
margin-bottom: 33px;
}
.login-form {
width: 288px;
margin: auto;
margin-top:60px;
}
</style>