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

Added new box which enter from right to left

Browse Source 
& New icon
This commit is contained in:
Lucio Maranta
2019-07-29 14:16:29 +02:00
parent 82a126092f
commit cd03649e6c
4 changed files with 170 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step.Model/Constants.cs
+1 -1
View File
@@ -5,7 +5,7 @@ namespace Step.Model
{
public static class Constants
{
public static bool IS_BETA = true;
public static bool IS_BETA = true;
public static string NOT_FOUND_ALARM_MESSAGE = "Alarm_id_{0} : Message not found";
public static string NOT_CONFIGURATED_ALARM_MESSAGE = "Alarm_id_{0} : Message not configurated";
Step/wwwroot/assets/styles/base/head.less
+83 -71
View File
@@ -117,6 +117,11 @@
}
}
.detailBoxOpened {
background-color: @color-clear-blue-30;
}
.tool-box,
.load-box,
.abrasive,
@@ -189,100 +194,107 @@
}
}
}
.smooth-enter-active, .smooth-leave-active {
height:94px;
transition: height .5s;
overflow: hidden;
}
.smooth-enter-active-to {
height:94px;
}
.detail-box {
height:94px;
border-top: 2px solid #979797;
width: 100%;
background-color: white;
height: 104px;
width: 416px;
display: flex;
position: absolute;
right: 154px;
span {
width: 156px;
font-size: 18px;
line-height: 20px;
font-weight: 600;
}
}
.smooth-enter, .smooth-leave-to {
height: 0;
transition: height .5s;
.detailBoxTransition-enter-active, .detailBoxTransition-leave-active {
width: 416px;
transition: width .5s;
overflow: hidden;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
align-items: center;
flex:1;
span{
margin-left: 5px;
}
.number {
color: #4b4b4b;
width: 70px;
height: 25px;
border-radius: 2px;
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 8px;
color: #4b4b4b;
padding-right: 8px;
font-size: 20px;
}
.detailBoxTransition-enter-active-to {
width: 416px;
}
.row:nth-child(odd) .number {
background-color: @color-white4;
}
.row:nth-child(even) .number {
background-color: @color-clear-blue-30;
}
.column{
flex:1;
text-align: center;
width: 100%;
.detailBoxTransition-enter, .detailBoxTransition-leave-to {
width: 0;
transition: width .5s;
}
.column-left {
display: flex;
flex-direction: column;
width: 70%;
width: 247px;
border-right: 2px solid #979797;
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 247px;
justify-content: space-between;
align-items: center;
flex:1;
span{
margin-left: 5px;
}
.number {
color: #4b4b4b;
width: 70px;
height: 25px;
border-radius: 2px;
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 8px;
color: #4b4b4b;
padding-right: 8px;
font-size: 20px;
}
}
.row:nth-child(odd) .number {
background-color: @color-white4;
}
.row:nth-child(even) .number {
background-color: @color-clear-blue-30;
}
}
.column-right {
display: flex;
flex-direction: column;
width: 30%;
}
.column-bottom-line {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
flex-direction: row;
width: 167px;
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
.column {
font-size: 45px;
flex:1;
text-align: center;
flex-direction: column;
width: 100%;
img {
opacity: 0.2;
width: 45px;
height: auto;
}
.iconActive {
opacity: 1;
color: #f1f1f1;
}
}
}
.toolError{
background-image: linear-gradient(to bottom, #ff4d63, #a10518);
color: #f1f1f1;
}
.measured{
color: #f1f1f1;
background-image: linear-gradient(to bottom, #1791ff, #005e94);
}
}
.head-place-holder{
Step/wwwroot/assets/styles/style.css
+80 -74
View File
@@ -6451,6 +6451,11 @@ footer .container button.big:before {
font-size: 14px;
line-height: 18px;
}
.head-spindle .detailBoxOpened,
.head-production .detailBoxOpened,
.head-awj .detailBoxOpened {
background-color: rgba(23, 145, 255, 0.3);
}
.head-spindle .tool-box,
.head-production .tool-box,
.head-awj .tool-box,
@@ -6603,64 +6608,75 @@ footer .container button.big:before {
border-color: #fff !important;
color: #fff;
}
.head-spindle .smooth-enter-active,
.head-production .smooth-enter-active,
.head-awj .smooth-enter-active,
.head-spindle .smooth-leave-active,
.head-production .smooth-leave-active,
.head-awj .smooth-leave-active {
height: 94px;
transition: height .5s;
overflow: hidden;
}
.head-spindle .smooth-enter-active-to,
.head-production .smooth-enter-active-to,
.head-awj .smooth-enter-active-to {
height: 94px;
}
.head-spindle .detail-box,
.head-production .detail-box,
.head-awj .detail-box {
height: 94px;
border-top: 2px solid #979797;
width: 100%;
background-color: white;
height: 104px;
width: 416px;
display: flex;
position: absolute;
right: 154px;
}
.head-spindle .detail-box span,
.head-production .detail-box span,
.head-awj .detail-box span {
width: 156px;
font-size: 18px;
line-height: 20px;
font-weight: 600;
}
.head-spindle .smooth-enter,
.head-production .smooth-enter,
.head-awj .smooth-enter,
.head-spindle .smooth-leave-to,
.head-production .smooth-leave-to,
.head-awj .smooth-leave-to {
height: 0;
transition: height .5s;
.head-spindle .detailBoxTransition-enter-active,
.head-production .detailBoxTransition-enter-active,
.head-awj .detailBoxTransition-enter-active,
.head-spindle .detailBoxTransition-leave-active,
.head-production .detailBoxTransition-leave-active,
.head-awj .detailBoxTransition-leave-active {
width: 416px;
transition: width .5s;
overflow: hidden;
}
.head-spindle .row,
.head-production .row,
.head-awj .row {
.head-spindle .detailBoxTransition-enter-active-to,
.head-production .detailBoxTransition-enter-active-to,
.head-awj .detailBoxTransition-enter-active-to {
width: 416px;
}
.head-spindle .detailBoxTransition-enter,
.head-production .detailBoxTransition-enter,
.head-awj .detailBoxTransition-enter,
.head-spindle .detailBoxTransition-leave-to,
.head-production .detailBoxTransition-leave-to,
.head-awj .detailBoxTransition-leave-to {
width: 0;
transition: width .5s;
}
.head-spindle .column-left,
.head-production .column-left,
.head-awj .column-left {
display: flex;
flex-direction: column;
width: 247px;
border-right: 2px solid #979797;
}
.head-spindle .column-left .row,
.head-production .column-left .row,
.head-awj .column-left .row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
width: 247px;
justify-content: space-between;
align-items: center;
flex: 1;
}
.head-spindle .row span,
.head-production .row span,
.head-awj .row span {
.head-spindle .column-left .row span,
.head-production .column-left .row span,
.head-awj .column-left .row span {
margin-left: 5px;
}
.head-spindle .row .number,
.head-production .row .number,
.head-awj .row .number {
.head-spindle .column-left .row .number,
.head-production .column-left .row .number,
.head-awj .column-left .row .number {
width: 70px;
height: 25px;
border-radius: 2px;
@@ -6672,57 +6688,47 @@ footer .container button.big:before {
padding-right: 8px;
font-size: 20px;
}
.head-spindle .row:nth-child(odd) .number,
.head-production .row:nth-child(odd) .number,
.head-awj .row:nth-child(odd) .number {
.head-spindle .column-left .row:nth-child(odd) .number,
.head-production .column-left .row:nth-child(odd) .number,
.head-awj .column-left .row:nth-child(odd) .number {
background-color: #f3f3f3;
}
.head-spindle .row:nth-child(even) .number,
.head-production .row:nth-child(even) .number,
.head-awj .row:nth-child(even) .number {
.head-spindle .column-left .row:nth-child(even) .number,
.head-production .column-left .row:nth-child(even) .number,
.head-awj .column-left .row:nth-child(even) .number {
background-color: rgba(23, 145, 255, 0.3);
}
.head-spindle .column,
.head-production .column,
.head-awj .column {
flex: 1;
text-align: center;
width: 100%;
}
.head-spindle .column-left,
.head-production .column-left,
.head-awj .column-left {
display: flex;
flex-direction: column;
width: 70%;
border-right: 2px solid #979797;
}
.head-spindle .column-right,
.head-production .column-right,
.head-awj .column-right {
display: flex;
flex-direction: column;
width: 30%;
flex-direction: row;
width: 167px;
box-shadow: inset -7px 0 9px -7px rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.head-spindle .column-bottom-line,
.head-production .column-bottom-line,
.head-awj .column-bottom-line {
display: flex;
flex-direction: column;
flex-basis: 100%;
.head-spindle .column-right .column,
.head-production .column-right .column,
.head-awj .column-right .column {
font-size: 45px;
flex: 1;
text-align: center;
flex-direction: column;
width: 100%;
}
.head-spindle .toolError,
.head-production .toolError,
.head-awj .toolError {
background-image: linear-gradient(to bottom, #ff4d63, #a10518);
color: #f1f1f1;
.head-spindle .column-right .column img,
.head-production .column-right .column img,
.head-awj .column-right .column img {
opacity: 0.2;
width: 45px;
height: auto;
}
.head-spindle .measured,
.head-production .measured,
.head-awj .measured {
.head-spindle .column-right .column .iconActive,
.head-production .column-right .column .iconActive,
.head-awj .column-right .column .iconActive {
opacity: 1;
color: #f1f1f1;
background-image: linear-gradient(to bottom, #1791ff, #005e94);
}
.head-place-holder {
width: 240px;
Step/wwwroot/src/app_modules/production/components/head-production.vue
+6 -7
View File
@@ -45,7 +45,7 @@
<span>{{vacuum.toFixed(2)}}</span>
<small>{{'head_label_bar' | localize("bar")}}</small>
</div>
<div class="tool-box" @click="toggleDetail" v-if="type == 'SPINDLE'">
<div class="tool-box" @click="toggleDetail" :class="{detailBoxOpened: detailBox}" v-if="type == 'SPINDLE'">
<label>{{'head_label_tool' | localize("Tool")}}</label>
<span v-if="!isSiemens() || (isSiemens() && !toolMounted())">{{tool}}</span>
<span v-if="!isSiemens() && tool">
@@ -56,7 +56,6 @@
<span class="tool-duplo" v-if="isSiemens() && toolMounted()" :title="toolName">{{'tooling_tool_abbreviation' | localize('DP%d', toolDuplo)}}</span>
</div>
<div class="tool-box" v-if="type == 'WJ' ">
</div>
<div class="tool-box" v-if="type == 'AWJ' " :class="{disabled:!abrasiveIsActive}" :title="'heads_tooltip_abrasive' | localize('Actual Abrasive Quantity')">
<label>{{'head_label_abrasive' | localize("Abrasive")}}</label>
@@ -64,7 +63,7 @@
<small>{{'head_label_gmin' | localize("g/min")}}</small>
</div>
<transition v-if="toolData" name="smooth">
<transition v-if="toolData" name="detailBoxTransition">
<div class="detail-box" v-if="detailBox">
<div class="column-left">
<div class="row">
@@ -72,7 +71,7 @@
<div class="number">{{toolData.residualLife}}</div>
</div>
<div class="row">
<span>{{'tooling_equipment_param_maxLoad' | localize("Max load")}}:</span>
<span>{{'tooling_family_param_maxLoad' | localize("Max load")}}:</span>
<div class="number">{{toolData.maxLoad}}</div>
</div>
<div class="row">
@@ -81,9 +80,9 @@
</div>
</div>
<div class="column-right">
<span class="row" :class="{toolError: toolData.disabled}">{{'tooling_equipment_param_disabled' | localize("Disabled")}}</span>
<span class="row" :class="{toolError: toolData.broken, measured: !toolData.broken}">{{'tooling_equipment_param_broken' | localize("Broken")}}</span>
<span class="row" :class="{measured: toolData.measured}">{{'tooling_equipment_param_measured' | localize("Measured")}}</span>
<div class="column"><img :class="{iconActive: toolData.measured}" src="assets/icons/Tools/ToolMeasured.png"/></div>
<div class="column"><img :class="{iconActive: toolData.broken}" src="assets/icons/Tools/ToolBroken.png"/></div>
<div class="column"><img :class="{iconActive: toolData.disabled}" src="assets/icons/Tools/ToolDisabled.png"/></div>
</div>
</div>
</transition>