diff --git a/Step/wwwroot/assets/styles/base/plc-softkeys.less b/Step/wwwroot/assets/styles/base/plc-softkeys.less index 153e73bc..cb7411c7 100644 --- a/Step/wwwroot/assets/styles/base/plc-softkeys.less +++ b/Step/wwwroot/assets/styles/base/plc-softkeys.less @@ -108,6 +108,7 @@ &>div>header { position: relative; height: 64px; + min-height: 64px; display: flex; flex-flow: row nowrap; button { @@ -225,14 +226,22 @@ // border: solid 3px @color-clear-blue; position: relative; .detail section { - height: 42px; + height: 44px; + width: 144px; + } + header{ + width: 179px; } } &.opened { - border: 2px solid #4b4b4b; // position: absolute; + box-shadow: inset 0px 0px 0px 2px #4b4b4b; z-index: 4; .detail section { - height: 42px; + height: 44px; + width: 144px; + } + header{ + width: 179px; } } position: relative; @@ -334,6 +343,9 @@ box-sizing: content-box; white-space: nowrap; overflow: hidden; + width: 100%; + margin-left: auto; + margin-right: auto; } &.active { box-shadow: inset 0px 0px 0px 3px rgba(23, 145, 255, 1); @@ -378,8 +390,8 @@ display: flex; flex-flow: row wrap; border-left: 1px solid #fff; - width: 144px; - margin-top: -1px; + width: 146px; + margin-top: 0px; height: 46px; overflow-x: visible; // transform: translateZ(0); @@ -396,7 +408,7 @@ justify-content: center; } &.multiple { - border: 0.5px solid #fff; + cursor: pointer; &:active { background-color: #4e585e; @@ -411,10 +423,11 @@ flex-grow: 1; min-width: 48px; min-height: 22px; - margin-top: -1px; - margin-left: -1px; + margin-top: 0px; + margin-left: 0px; box-sizing: border-box; - border: 0.5px solid #fff; + border-right: 0.5px solid #fff; + border-bottom: 0.5px solid #fff; align-items: center; position: relative; justify-content: center; diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css index c574d127..ce7435ad 100644 --- a/Step/wwwroot/assets/styles/style.css +++ b/Step/wwwroot/assets/styles/style.css @@ -2481,6 +2481,7 @@ footer .container button.big:before { #plc-softkeys-container > div > header { position: relative; height: 64px; + min-height: 64px; display: flex; flex-flow: row nowrap; } @@ -2600,14 +2601,22 @@ footer .container button.big:before { position: relative; } .soft-key.selected .detail section { - height: 42px; + height: 44px; + width: 144px; +} +.soft-key.selected header { + width: 179px; } .soft-key.opened { - border: 2px solid #4b4b4b; + box-shadow: inset 0px 0px 0px 2px #4b4b4b; z-index: 4; } .soft-key.opened .detail section { - height: 42px; + height: 44px; + width: 144px; +} +.soft-key.opened header { + width: 179px; } .soft-key .menu-container { width: 386px; @@ -2696,6 +2705,9 @@ footer .container button.big:before { box-sizing: content-box; white-space: nowrap; overflow: hidden; + width: 100%; + margin-left: auto; + margin-right: auto; } .soft-key.active { box-shadow: inset 0px 0px 0px 3px #1791ff; @@ -2740,8 +2752,8 @@ footer .container button.big:before { display: flex; flex-flow: row wrap; border-left: 1px solid #fff; - width: 144px; - margin-top: -1px; + width: 146px; + margin-top: 0px; height: 46px; overflow-x: visible; } @@ -2758,7 +2770,6 @@ footer .container button.big:before { justify-content: center; } .soft-key .detail section.multiple { - border: 0.5px solid #fff; cursor: pointer; } .soft-key .detail section.multiple:active { @@ -2774,10 +2785,11 @@ footer .container button.big:before { flex-grow: 1; min-width: 48px; min-height: 22px; - margin-top: -1px; - margin-left: -1px; + margin-top: 0px; + margin-left: 0px; box-sizing: border-box; - border: 0.5px solid #fff; + border-right: 0.5px solid #fff; + border-bottom: 0.5px solid #fff; align-items: center; position: relative; justify-content: center; diff --git a/Step/wwwroot/src/modules/plc-softkeys.ts b/Step/wwwroot/src/modules/plc-softkeys.ts index baa4e69e..8a05efdc 100644 --- a/Step/wwwroot/src/modules/plc-softkeys.ts +++ b/Step/wwwroot/src/modules/plc-softkeys.ts @@ -191,12 +191,7 @@ export default class softKeys extends Vue { star = true; } }) - if(star && !this.enableSelected){ - return true; - } - else{ - return false; - } + return star; } }