jog menu -- working on
This commit is contained in:
Paolo Possanzini
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
@@ -25,19 +25,17 @@ button.btn[disabled] {
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
color: @color-warm-grey;
|
||||
|
||||
&:hover{
|
||||
box-shadow: none !important;
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-demo{
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
.btn-demo {
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
button.btn {
|
||||
height: @button-height;
|
||||
box-sizing: border-box;
|
||||
@@ -81,16 +79,16 @@ button.btn.btn-success {
|
||||
box-shadow: inset 0px 0px 0px 1px #8eb5e2;
|
||||
}
|
||||
}
|
||||
|
||||
button.btn.btn-success[disabled] {
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
box-shadow: none;
|
||||
color: @color-warm-grey;
|
||||
color: @color-warm-grey;
|
||||
border: none;
|
||||
&:hover{
|
||||
box-shadow: none !important;
|
||||
background-image: linear-gradient(to bottom, @button-success-color-from, @button-success-color-to) !important;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
background-image: linear-gradient(to bottom, @button-success-color-from, @button-success-color-to) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,8 +119,72 @@ button.square {
|
||||
// width: @button-height;
|
||||
// height: @button-height;
|
||||
border-radius: 2px !important; // background-color: #4b4b4b;
|
||||
|
||||
&:hover {
|
||||
background-color: @button-success-color-to;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-spacer {
|
||||
margin: 0 8px;
|
||||
padding: 0 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin: 0 8px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
button {
|
||||
border-radius: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
&:first-child{
|
||||
border-top-left-radius: 2px !important;
|
||||
border-bottom-left-radius: 2px !important;
|
||||
}
|
||||
&:last-child{
|
||||
border-top-right-radius: 2px !important;
|
||||
border-bottom-right-radius: 2px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.soft {
|
||||
width: 96px;
|
||||
height: 48px;
|
||||
margin: 4px;
|
||||
background-image: linear-gradient(to bottom, #f1f1f1, @color-silver);
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
color: @color-darkish-blue;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
&:active,
|
||||
&.active {
|
||||
background-image: linear-gradient(to bottom, @color-cerulean, @color-clear-blue);
|
||||
color: white;
|
||||
box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
&.spaced{
|
||||
margin: 4px 8px;
|
||||
}
|
||||
&[disabled] {
|
||||
background-color: #dddddd !important;
|
||||
background-image: none !important;
|
||||
box-shadow: none !important;
|
||||
color: @color-warm-grey;
|
||||
}
|
||||
&.square {
|
||||
width: 48px;
|
||||
}
|
||||
i.fa {
|
||||
font-size: 24px;
|
||||
}
|
||||
&.inverted{
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: 3px solid #657178;
|
||||
color: white
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
// out: false, sourceMap: false, main: ../style.less
|
||||
@import "colors";
|
||||
|
||||
.keys-area{
|
||||
position: absolute;
|
||||
height: calc(~"100% - 88px");
|
||||
right: 0;
|
||||
width: 824px;
|
||||
.keys-area {
|
||||
position: absolute;
|
||||
height: calc(~"100% - 88px");
|
||||
right: 0;
|
||||
width: 824px;
|
||||
}
|
||||
|
||||
#plc-softkeys-container {
|
||||
@@ -29,6 +28,8 @@
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
&.active {
|
||||
background-color: #657178;
|
||||
}
|
||||
@@ -71,58 +72,36 @@
|
||||
}
|
||||
|
||||
#nc-softkeys-container {
|
||||
width: 312px;
|
||||
height: 216px;
|
||||
margin: -4px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.empty-space{
|
||||
display: block;
|
||||
width: 96px;
|
||||
height: 48px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
button{
|
||||
width: 96px;
|
||||
height: 48px;
|
||||
margin: 4px;
|
||||
background-image: linear-gradient(to bottom, #f1f1f1, @color-silver);
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5) ;
|
||||
|
||||
&:active, &.active{
|
||||
background-image: linear-gradient(to bottom, @color-cerulean, @color-clear-blue);
|
||||
color:white;
|
||||
box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.5) ;
|
||||
width: 312px;
|
||||
height: 216px;
|
||||
margin: -4px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
.empty-space {
|
||||
display: block;
|
||||
width: 96px;
|
||||
height: 48px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
&[disabled]{
|
||||
background-color: #dddddd !important;
|
||||
background-image: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jog-menu{
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background-color: @color-gunmetal;
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
margin-right: 8px;
|
||||
width: calc(~"100% - 8px");
|
||||
|
||||
&:before{
|
||||
content: "\f0d8";
|
||||
color:@color-gunmetal;
|
||||
.jog-menu {
|
||||
// width: 100%;
|
||||
// height: 64px;
|
||||
background-color: @color-gunmetal;
|
||||
position: absolute;
|
||||
left: 141px;
|
||||
top: -26px;
|
||||
font-family: 'fontawesome';
|
||||
font-size: 38px;
|
||||
}
|
||||
top: 230px;
|
||||
margin-right: 8px;
|
||||
width: calc(~"100% - 16px");
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
&:before {
|
||||
content: "\f0d8";
|
||||
color: @color-gunmetal;
|
||||
position: absolute;
|
||||
left: 141px;
|
||||
top: -26px;
|
||||
font-family: 'fontawesome';
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -378,6 +378,68 @@ button.square {
|
||||
button.square:hover {
|
||||
background-color: #002680;
|
||||
}
|
||||
.btn-spacer {
|
||||
margin: 0 8px;
|
||||
padding: 0 4px;
|
||||
display: flex;
|
||||
}
|
||||
.btn-group {
|
||||
margin: 0 8px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
.btn-group button {
|
||||
border-radius: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.btn-group button:first-child {
|
||||
border-top-left-radius: 2px !important;
|
||||
border-bottom-left-radius: 2px !important;
|
||||
}
|
||||
.btn-group button:last-child {
|
||||
border-top-right-radius: 2px !important;
|
||||
border-bottom-right-radius: 2px !important;
|
||||
}
|
||||
button.soft {
|
||||
width: 96px;
|
||||
height: 48px;
|
||||
margin: 4px;
|
||||
background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
color: #002680;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
button.soft:active,
|
||||
button.soft.active {
|
||||
background-image: linear-gradient(to bottom, #007cc3, #1791ff);
|
||||
color: white;
|
||||
box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
button.soft.spaced {
|
||||
margin: 4px 8px;
|
||||
}
|
||||
button.soft[disabled] {
|
||||
background-color: #dddddd !important;
|
||||
background-image: none !important;
|
||||
box-shadow: none !important;
|
||||
color: #878787;
|
||||
}
|
||||
button.soft.square {
|
||||
width: 48px;
|
||||
}
|
||||
button.soft i.fa {
|
||||
font-size: 24px;
|
||||
}
|
||||
button.soft.inverted {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: 3px solid #657178;
|
||||
color: white;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
@@ -1281,6 +1343,8 @@ footer .container button.big:before {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#plc-softkeys-container header button.active {
|
||||
background-color: #657178;
|
||||
@@ -1331,34 +1395,14 @@ footer .container button.big:before {
|
||||
height: 48px;
|
||||
margin: 4px;
|
||||
}
|
||||
#nc-softkeys-container button {
|
||||
width: 96px;
|
||||
height: 48px;
|
||||
margin: 4px;
|
||||
background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#nc-softkeys-container button:active,
|
||||
#nc-softkeys-container button.active {
|
||||
background-image: linear-gradient(to bottom, #007cc3, #1791ff);
|
||||
color: white;
|
||||
box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#nc-softkeys-container button[disabled] {
|
||||
background-color: #dddddd !important;
|
||||
background-image: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.jog-menu {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background-color: #4e585e;
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
margin-right: 8px;
|
||||
width: calc(100% - 8px);
|
||||
width: calc(100% - 16px);
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
}
|
||||
.jog-menu:before {
|
||||
content: "\f0d8";
|
||||
|
||||
Vendored
+5
-5
File diff suppressed because one or more lines are too long
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div id="nc-softkeys-container">
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button class="soft">{{'nc_softkey_refresh' |localize("Refresh") }}</button>
|
||||
<button class="soft">{{'nc_softkey_reset' |localize("Reset") }}</button>
|
||||
<div class="empty-space"></div>
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button></button>
|
||||
<button class="active"></button>
|
||||
<button disabled></button>
|
||||
<button class="soft">{{'nc_softkey_mdi' |localize("MDI") }}</button>
|
||||
<button class="soft">{{'nc_softkey_ref' |localize("Ref") }}</button>
|
||||
<button class="soft">{{'nc_softkey_edit' |localize("Edit") }}</button>
|
||||
<button class="soft">{{'nc_softkey_teach' |localize("Teach") }}</button>
|
||||
<button class="soft">{{'nc_softkey_remote' | localize("Remote")}}</button>
|
||||
<button class="soft">{{'nc_softkey_restart' |localize("Restart") }}</button>
|
||||
<button class="soft">{{'nc_softkey_auto' |localize("Auto") }}</button>
|
||||
<button class="soft active">{{'nc_softkey_jog' |localize("Jog") }}</button>
|
||||
<button class="soft" disabled>{{'nc_softkey_joginc' |localize("Jog Inc") }}</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div id="plc-softkeys-container">
|
||||
<header>
|
||||
<button><span class="number">1.</span></button>
|
||||
<button><span class="number">2.</span></button>
|
||||
<button class="active"><span class="number">3.</span></button>
|
||||
<button><span class="number">4.</span></button>
|
||||
<button><span class="number">5.</span></button>
|
||||
<button><span class="number">6.</span></button>
|
||||
<button><span class="number">1.</span><img src="assets/icons/under-hood-png/cat-1.png"></button>
|
||||
<button><span class="number">2.</span><img src="assets/icons/under-hood-png/cat-2.png"></button>
|
||||
<button class="active"><span class="number">3.</span><img src="assets/icons/under-hood-png/cat-3.png"></button>
|
||||
<button><span class="number">4.</span><img src="assets/icons/under-hood-png/cat-4.png"></button>
|
||||
<button><span class="number">5.</span><img src="assets/icons/under-hood-png/cat-5.png"></button>
|
||||
<button><span class="number">6.</span><img src="assets/icons/under-hood-png/cat-6.png"></button>
|
||||
<button><span class="number">7.</span></button>
|
||||
</header>
|
||||
<div class="title"></div>
|
||||
|
||||
@@ -1,5 +1,26 @@
|
||||
<template>
|
||||
<div class="jog-menu"></div>
|
||||
<div class="jog-menu">
|
||||
<button class="soft">{{"jog_menu_asse_x" | localize("Asse X")}}</button>
|
||||
<div class="btn-spacer">
|
||||
<button class="soft square"><i class="fa fa-minus"></i></button>
|
||||
<button class="soft">{{"jog_menu_rapid" | localize("Rapid")}}</button>
|
||||
<button class="soft square"><i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="soft square active">{{"jog_menu_WCS" | localize("WCS")}}</button>
|
||||
<button class="soft square">{{"jog_menu_MCS" | localize("MCS")}}</button>
|
||||
</div>
|
||||
|
||||
<button class="soft spaced">{{"jog_menu_teach_in" | localize("Teach In")}}</button>
|
||||
|
||||
<button class="soft spaced">{{"jog_menu_inc_plane" | localize("Inc Plane")}}</button>
|
||||
|
||||
<button class="soft spaced inverted">{{"jog_menu_handle" | localize("Handle")}}</button>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
Reference in New Issue
Block a user