fix dashboard
This commit is contained in:
Alessio
@@ -1,6 +1,10 @@
|
||||
// out: false, sourceMap: false, main: ../style.less
|
||||
@import "colors.less";
|
||||
|
||||
.arch{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
||||
.kW {
|
||||
width: 16px;
|
||||
height: 11px;
|
||||
@@ -30,33 +34,6 @@
|
||||
margin-left: -8px;
|
||||
color: @color-darkish-blue;
|
||||
}
|
||||
// }
|
||||
// #SecondArchInfo
|
||||
// .Combined-Shape {
|
||||
// width: 68px;
|
||||
// height: 50px;
|
||||
// box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.5);
|
||||
// background-color: var(--light-grey-blue);
|
||||
// }
|
||||
// .Combined-Shape-Copy-3 {
|
||||
// width: 55px;
|
||||
// height: 21px;
|
||||
// background-color: var(--darkish-blue);
|
||||
// }
|
||||
|
||||
// .Valor2{
|
||||
// width: 27px;
|
||||
// height: 23px;
|
||||
// font-family: WorkSans;
|
||||
// font-size: 18.9px;
|
||||
// font-weight: 500;
|
||||
// font-stretch: normal;
|
||||
// font-style: normal;
|
||||
// line-height: normal;
|
||||
// letter-spacing: normal;
|
||||
// text-align: center;
|
||||
// color: var(--darkish-blue);
|
||||
// }
|
||||
.Bar {
|
||||
width: 16px;
|
||||
height: 11px;
|
||||
@@ -83,161 +60,13 @@
|
||||
text-align: end;
|
||||
color: @color-darkish-blue;
|
||||
}
|
||||
// #ThirdArchInfo
|
||||
// .Combined-Shape-Copy-3 {
|
||||
// width: 64px;
|
||||
// height: 49px;
|
||||
// background-color: var(--darkish-blue);
|
||||
// }
|
||||
// .Valor3{
|
||||
// width: 50px;
|
||||
// height: 23px;
|
||||
// font-family: WorkSans;
|
||||
// font-size: 18.9px;
|
||||
// font-weight: 500;
|
||||
// font-stretch: normal;
|
||||
// font-style: normal;
|
||||
// line-height: normal;
|
||||
// letter-spacing: normal;
|
||||
// text-align: center;
|
||||
// color: @color-darkish-blue;
|
||||
// }
|
||||
// .bar {
|
||||
// width: 16px;
|
||||
// height: 11px;
|
||||
// font-family: WorkSans;
|
||||
// font-size: 9.7px;
|
||||
// font-weight: 500;
|
||||
// font-stretch: normal;
|
||||
// font-style: normal;
|
||||
// line-height: normal;
|
||||
// letter-spacing: normal;
|
||||
// text-align: center;
|
||||
// color: @color-darkish-blue;
|
||||
// }
|
||||
// .Vuoto {
|
||||
// width: 35px;
|
||||
// height: 14px;
|
||||
// font-family: WorkSans;
|
||||
// font-size: 12px;
|
||||
// font-weight: normal;
|
||||
// font-stretch: normal;
|
||||
// font-style: normal;
|
||||
// line-height: normal;
|
||||
// letter-spacing: normal;
|
||||
// text-align: center;
|
||||
// color: @color-darkish-blue;
|
||||
// }
|
||||
// .divider-columnt {
|
||||
// width: 2px;
|
||||
// height: 48px;
|
||||
// // background-color: @color-light-grey-blue;
|
||||
// }
|
||||
|
||||
// .wrapper {
|
||||
// position: relative;
|
||||
// margin: auto;
|
||||
// }
|
||||
//da scommentare
|
||||
// .wrapper{
|
||||
// width: 90px;
|
||||
// height: 90px;
|
||||
// display:flex;
|
||||
// }
|
||||
// .meter {
|
||||
// width: 50%; height: 50%;
|
||||
// transform: rotateX(180deg);
|
||||
// }
|
||||
// //da scommentare
|
||||
// .meter{
|
||||
// width: 50%; height: 50%;
|
||||
// margin-top:200px;
|
||||
// // width: 300%;
|
||||
// // height: 100%;
|
||||
// transform: rotateX(180deg);
|
||||
|
||||
// }
|
||||
|
||||
// .outline, #mask {
|
||||
// stroke: white;
|
||||
// stroke-width: 65;
|
||||
// }
|
||||
// .range {
|
||||
// stroke-width: 60;
|
||||
// }
|
||||
// .lbl {
|
||||
// background-color: #4B4C51;
|
||||
// border-radius: 2px;
|
||||
// color: white;
|
||||
// font-family: 'courier new';
|
||||
// font-size: 15pt;
|
||||
// font-weight: bold;
|
||||
// padding: 4px 4px 2px 4px;
|
||||
// right: -48px;
|
||||
// top: 57%;
|
||||
// }
|
||||
// .meter_needle {
|
||||
// height: 40%;
|
||||
// left: 0;
|
||||
// margin: auto;
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// top: 10%;
|
||||
// transform-origin: bottom center;
|
||||
// /*orientation fix*/
|
||||
// transform: rotate(270deg);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// .backgound-circle{
|
||||
// stroke-width: 10;
|
||||
// fill: none;
|
||||
// stroke-dasharray: 145,80;
|
||||
// stroke:gray ;
|
||||
// }
|
||||
// .value-circle{
|
||||
// stroke-width: 10;
|
||||
// stroke-dasharray: 145,80;
|
||||
// fill: none;
|
||||
// stroke:blue ;
|
||||
// }
|
||||
// //da scommentare
|
||||
// path {
|
||||
// stroke-width: 7;
|
||||
// stroke-dasharray: none;
|
||||
// fill: none;
|
||||
// }
|
||||
|
||||
// #background-circle {
|
||||
// stroke: grey;
|
||||
|
||||
// }
|
||||
|
||||
// #value-circle {
|
||||
// stroke: blue;
|
||||
// }
|
||||
|
||||
body {
|
||||
// background-color: rgba(0,0,0,0.8);
|
||||
color:@color-darkish-blue;
|
||||
font-family: Hevletica, sans-serif;
|
||||
}
|
||||
|
||||
.info {
|
||||
clear: both;
|
||||
padding: 10px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* ------ Default Style ---------- */
|
||||
.gauge-container {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
display: block;
|
||||
float: left;
|
||||
padding: -130px;
|
||||
// background-color: rgb(167, 154, 154); background container
|
||||
margin: 56px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
@@ -245,24 +74,20 @@ body {
|
||||
margin-left: -10px;
|
||||
}
|
||||
.label {
|
||||
// display: inline-block;
|
||||
color:@color-darkish-blue;
|
||||
font-family: monospace;
|
||||
font-size: 1.5em;
|
||||
// padding: 5px 10px;
|
||||
margin-left:10px;
|
||||
margin-left:10px;
|
||||
}
|
||||
.gauge-container > .gauge > .dial {
|
||||
stroke:@color-darkish-blue;
|
||||
stroke-width: 2;
|
||||
// fill: rgba(0,0,0,0);
|
||||
}
|
||||
.gauge-container > .gauge > .value {
|
||||
stroke:@color-darkish-blue;
|
||||
stroke-width: 2;
|
||||
// fill: rgba(0,0,0,0);
|
||||
}
|
||||
.gauge-container > .gauge > .value-text { //valore sotto l'arco
|
||||
.gauge-container > .gauge > .value-text {
|
||||
color:@color-darkish-blue;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
@@ -271,17 +96,6 @@ margin-left:10px;
|
||||
|
||||
}
|
||||
|
||||
/* ------- Alternate Style ------- */
|
||||
.wrapper {
|
||||
height: 20px;
|
||||
float: left;
|
||||
margin: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wrapper > .gauge-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gauge-container.three > .gauge > .dial {
|
||||
stroke:@color-silver;
|
||||
stroke-width: 4;
|
||||
@@ -299,7 +113,4 @@ margin-left:10px;
|
||||
margin-left: 19px;
|
||||
margin-top:-94px;
|
||||
}
|
||||
.arch{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
@@ -6,144 +6,132 @@
|
||||
.dashboard{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background-image: url("../../assets/icons/png/bg.png");
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
|
||||
.ribbon-container{
|
||||
width: 496px;
|
||||
height: 80px;
|
||||
z-index: 900;
|
||||
}
|
||||
.header-buttons{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
button.profile {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url("../profile.png");
|
||||
color: #000;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
&.colorWhite {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
time.text-hour {
|
||||
transition: color 200ms ease-in-out;
|
||||
margin-left: 10px;
|
||||
padding: 0 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 120px;
|
||||
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
font-size: 25px;
|
||||
color: @color-input-light;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
margin-right: 21px;
|
||||
}
|
||||
|
||||
.box-date{
|
||||
display: flex;
|
||||
float: left;
|
||||
// margin-right: auto;
|
||||
}
|
||||
|
||||
.text-extend-date{
|
||||
font-size: 47px;
|
||||
text-align: right;
|
||||
align-self: center;
|
||||
font-weight: 500;
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.box-info{
|
||||
// float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.box-close-dashboard{
|
||||
// margin-left:auto;
|
||||
height: 70px;
|
||||
// float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
button.modal-close{
|
||||
background-color: #4B4B4B;
|
||||
margin: 23px;
|
||||
}
|
||||
|
||||
.text-user-info{
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.arch{
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
}
|
||||
margin-left: 100px;
|
||||
|
||||
.gauge-container{
|
||||
// float: left;
|
||||
display: inline-block;
|
||||
|
||||
path.value{
|
||||
stroke: @color-clear-blue;
|
||||
stroke-width: 5;
|
||||
div{
|
||||
flex-shrink: 0;
|
||||
font-size: 47px;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
text{
|
||||
font-size: 20px;
|
||||
time {
|
||||
flex-shrink: 0;
|
||||
transition: color 200ms ease-in-out;
|
||||
margin-left: 28px;
|
||||
display: flex;
|
||||
font-size: 120px;
|
||||
}
|
||||
|
||||
path.dial{
|
||||
stroke: @color-whitegrey;
|
||||
stroke-width: 5;
|
||||
}
|
||||
}
|
||||
|
||||
.gauge{
|
||||
width: 126px;
|
||||
height: 92px;
|
||||
/* background-color: #dddddd; */
|
||||
/* box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);*/
|
||||
}
|
||||
|
||||
.unit-arch{
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 53px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.box-arch{
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.box-gauge{
|
||||
.arch{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
|
||||
.box-gauge{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.gauge-container{
|
||||
display: inline-block;
|
||||
|
||||
.gauge{
|
||||
width: 126px;
|
||||
height: 92px;
|
||||
}
|
||||
|
||||
path.value{
|
||||
stroke: @color-clear-blue;
|
||||
stroke-width: 5;
|
||||
}
|
||||
|
||||
text{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
path.dial{
|
||||
stroke: @color-whitegrey;
|
||||
stroke-width: 5;
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 53px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
label{
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.header-buttons{
|
||||
display: inline-block;
|
||||
|
||||
.box-close-dashboard{
|
||||
height: 70px;
|
||||
text-align: right;
|
||||
|
||||
button.modal-close{
|
||||
background-color: #4B4B4B;
|
||||
margin: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-info {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
font-size: 25px;
|
||||
color: @color-input-light;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
margin-right: 21px;
|
||||
|
||||
button.profile {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url("../profile.png");
|
||||
color: #000;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
&.colorWhite {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
div{
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -3673,19 +3673,95 @@
|
||||
.dashboard {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background-image: url("../../assets/icons/png/bg.png");
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
}
|
||||
.dashboard .ribbon-container {
|
||||
width: 496px;
|
||||
height: 80px;
|
||||
z-index: 900;
|
||||
}
|
||||
.dashboard .box-date {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
margin-left: 100px;
|
||||
}
|
||||
.dashboard .box-date div {
|
||||
flex-shrink: 0;
|
||||
font-size: 47px;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
}
|
||||
.dashboard .box-date time {
|
||||
flex-shrink: 0;
|
||||
transition: color 200ms ease-in-out;
|
||||
margin-left: 28px;
|
||||
display: flex;
|
||||
font-size: 120px;
|
||||
}
|
||||
.dashboard .arch {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
.dashboard .arch .box-gauge {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.dashboard .arch .box-gauge .gauge-container {
|
||||
display: inline-block;
|
||||
}
|
||||
.dashboard .arch .box-gauge .gauge-container .gauge {
|
||||
width: 126px;
|
||||
height: 92px;
|
||||
}
|
||||
.dashboard .arch .box-gauge .gauge-container path.value {
|
||||
stroke: #1791ff;
|
||||
stroke-width: 5;
|
||||
}
|
||||
.dashboard .arch .box-gauge .gauge-container text {
|
||||
font-size: 20px;
|
||||
}
|
||||
.dashboard .arch .box-gauge .gauge-container path.dial {
|
||||
stroke: #dddddd;
|
||||
stroke-width: 5;
|
||||
}
|
||||
.dashboard .arch .box-gauge span {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 53px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.dashboard .arch .box-gauge label {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dashboard .header-buttons {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
.dashboard button.profile {
|
||||
.dashboard .header-buttons .box-close-dashboard {
|
||||
height: 70px;
|
||||
text-align: right;
|
||||
}
|
||||
.dashboard .header-buttons .box-close-dashboard button.modal-close {
|
||||
background-color: #4B4B4B;
|
||||
margin: 23px;
|
||||
}
|
||||
.dashboard .header-buttons .user-info {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
font-size: 25px;
|
||||
color: #4b4b4b;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
margin-right: 21px;
|
||||
}
|
||||
.dashboard .header-buttons .user-info button.profile {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url("../profile.png");
|
||||
@@ -3694,97 +3770,14 @@
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.dashboard button.profile.colorWhite {
|
||||
.dashboard .header-buttons .user-info button.profile.colorWhite {
|
||||
color: #FFF;
|
||||
}
|
||||
.dashboard time.text-hour {
|
||||
transition: color 200ms ease-in-out;
|
||||
margin-left: 10px;
|
||||
padding: 0 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 120px;
|
||||
}
|
||||
.dashboard time.text-hour i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.dashboard .user-info {
|
||||
display: flex;
|
||||
font-size: 25px;
|
||||
color: #4b4b4b;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
margin-right: 21px;
|
||||
}
|
||||
.dashboard .box-date {
|
||||
display: flex;
|
||||
float: left;
|
||||
}
|
||||
.dashboard .text-extend-date {
|
||||
font-size: 47px;
|
||||
text-align: right;
|
||||
align-self: center;
|
||||
font-weight: 500;
|
||||
margin-left: 100px;
|
||||
}
|
||||
.dashboard .box-info {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.dashboard .box-close-dashboard {
|
||||
height: 70px;
|
||||
text-align: right;
|
||||
}
|
||||
.dashboard button.modal-close {
|
||||
background-color: #4B4B4B;
|
||||
margin: 23px;
|
||||
}
|
||||
.dashboard .text-user-info {
|
||||
.dashboard .header-buttons .user-info div {
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.dashboard .arch {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
}
|
||||
.dashboard .gauge-container {
|
||||
display: inline-block;
|
||||
}
|
||||
.dashboard .gauge-container path.value {
|
||||
stroke: #1791ff;
|
||||
stroke-width: 5;
|
||||
}
|
||||
.dashboard .gauge-container text {
|
||||
font-size: 20px;
|
||||
}
|
||||
.dashboard .gauge-container path.dial {
|
||||
stroke: #dddddd;
|
||||
stroke-width: 5;
|
||||
}
|
||||
.dashboard .gauge {
|
||||
width: 126px;
|
||||
height: 92px;
|
||||
/* background-color: #dddddd; */
|
||||
/* box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);*/
|
||||
}
|
||||
.dashboard .unit-arch {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 53px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.dashboard .box-arch {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dashboard .box-gauge {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.modal.pirometro-info {
|
||||
width: 1820px;
|
||||
height: 980px;
|
||||
|
||||
+9
-23
@@ -4,42 +4,28 @@
|
||||
<div class="box-gauge">
|
||||
<div id="gauge1" class="gauge-container three">
|
||||
</div>
|
||||
|
||||
<div class="unit-arch">
|
||||
<span>Kw</span>
|
||||
</div>
|
||||
|
||||
<div class="box-arch">
|
||||
<label>Potenza</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Potenza</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box-gauge">
|
||||
<div id="gauge2" class="gauge-container three">
|
||||
</div>
|
||||
|
||||
<div class="unit-arch">
|
||||
<span>bar</span>
|
||||
</div>
|
||||
|
||||
<div class="box-arch">
|
||||
<label>Aria</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Aria</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box-gauge">
|
||||
<div id="gauge3" class="gauge-container three">
|
||||
</div>
|
||||
|
||||
<div class="unit-arch">
|
||||
<span>bar</span>
|
||||
</div>
|
||||
|
||||
<div class="box-arch">
|
||||
<label>Vuoto</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>Vuoto</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<app-ribbon
|
||||
:status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
|
||||
:status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
|
||||
:expanded="ribbonStatus>1"
|
||||
:show-expander="ribbonStatus>1"
|
||||
:has-service="serviceRequired"
|
||||
@@ -28,41 +28,34 @@
|
||||
<span>{{'header_maintainance_request_explanation' | localize('C\'è una procedura da effettuare')}}</span>
|
||||
</div>
|
||||
</app-ribbon>
|
||||
<alarm-list :applyBlur="applyBlur"></alarm-list>
|
||||
<alarm-list></alarm-list>
|
||||
|
||||
<div class="box-date">
|
||||
<span class="text-extend-date">{{dayIt}}<br>{{monthIt}}</span>
|
||||
<time class="text-hour">
|
||||
<span>{{hours}}:{{minutes}} {{mid}}</span>
|
||||
</time>
|
||||
<div class="box-date">
|
||||
<div>{{dayIt}}<br>{{monthIt}}</div>
|
||||
<time>
|
||||
<span>{{hours}}:{{minutes}} {{mid}}</span>
|
||||
</time>
|
||||
</div>
|
||||
|
||||
<archInterface></archInterface>
|
||||
|
||||
<div class="header-buttons">
|
||||
<div class="box-close-dashboard">
|
||||
<button class="modal-close" @click="close()">
|
||||
<i class="fa fa-remove"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<archInterface></archInterface>
|
||||
</div>
|
||||
<div class="header-buttons">
|
||||
<div class="box-close-dashboard">
|
||||
<button class="modal-close" @click="close()">
|
||||
<i class="fa fa-remove"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="box-info">
|
||||
<div class="user-info">
|
||||
<div class="text-user-info">
|
||||
<span>{{currentUser.firstName}} <br> {{currentUser.lastName}}</span>
|
||||
</div>
|
||||
<button class="profile dark-blue" v-if="currentUser" @click="sendMessage('show-user-info')" :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')" :class="{'colorWhite':isDarkColor(getColor(currentUser.lastName,currentUser.firstName))}">
|
||||
</button>
|
||||
<button class="profile dark-blue colorWhite" v-else @click="sendMessage('show-user-info')" :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')">
|
||||
</button>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div>
|
||||
<span>{{currentUser.firstName}} <br> {{currentUser.lastName}}</span>
|
||||
</div>
|
||||
<button class="profile dark-blue" v-if="currentUser" @click="sendMessage('show-user-info')" :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')" :class="{'colorWhite':isDarkColor(getColor(currentUser.lastName,currentUser.firstName))}">
|
||||
</button>
|
||||
<button class="profile dark-blue colorWhite" v-else @click="sendMessage('show-user-info')" :title="'header_tooltip_btn_usrinfo' | localize('Show User Info')">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user