From fa495d5acd7a247bddbbca92f050af2bfc3938b2 Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Mon, 12 Nov 2018 11:07:42 +0100
Subject: [PATCH] Changed Grouped-softkey layout on second Row

---
 Step/wwwroot/assets/styles/base/card.less                   | 4 +++-
 Step/wwwroot/assets/styles/base/plc-softkeys.less           | 3 +++
 Step/wwwroot/assets/styles/style.css                        | 6 ++++++
 .../src/modules/base-components/cards/softkeys-prefered.vue | 2 ++
 Step/wwwroot/src/modules/under-the-hood/soft-key1.vue       | 2 ++
 5 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index c5781e4b..afc6456c 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -624,7 +624,9 @@
                 &.active {
                     background-color: #1791ff;
                     color: @color-white;
-
+                }
+                &.empty{
+                    background: transparent;
                 }
             }
         }
diff --git a/Step/wwwroot/assets/styles/base/plc-softkeys.less b/Step/wwwroot/assets/styles/base/plc-softkeys.less
index cb7411c7..6b0c4a23 100644
--- a/Step/wwwroot/assets/styles/base/plc-softkeys.less
+++ b/Step/wwwroot/assets/styles/base/plc-softkeys.less
@@ -448,6 +448,9 @@
                         width: 100%;
                         background: rgba(255, 255, 255, 0.5);
                     }
+                    &.empty{
+                        background: transparent;
+                    }
                 }
             }
         }
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 42d1bc64..7358780b 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -4216,6 +4216,9 @@ footer .container button.big:before {
   width: 100%;
   background: rgba(255, 255, 255, 0.5);
 }
+.soft-key .detail section.multiple span.empty {
+  background: transparent;
+}
 #nc-softkeys-container {
   width: 312px;
   height: 216px;
@@ -5838,6 +5841,9 @@ footer .container button.big:before {
   background-color: #1791ff;
   color: #fff;
 }
+.softkeys-prefered .control .multiple span.empty {
+  background: transparent;
+}
 .softkeys-prefered .control .button .fa {
   font-size: 32px;
   color: #002680;
diff --git a/Step/wwwroot/src/modules/base-components/cards/softkeys-prefered.vue b/Step/wwwroot/src/modules/base-components/cards/softkeys-prefered.vue
index fe1d1ebd..4f91492f 100644
--- a/Step/wwwroot/src/modules/base-components/cards/softkeys-prefered.vue
+++ b/Step/wwwroot/src/modules/base-components/cards/softkeys-prefered.vue
@@ -19,6 +19,8 @@
               </div>
               <div class="multiple" v-if="type==2">
                 <span v-for="k in keys" :key="k" :class="{active:getSoftKeyStatus(k), disabled:!disabledNoMultiple && !getSoftKeyActive(k)}">{{getSubKeyText(k)}}</span>
+                <span v-if="keys.length==4" class="empty">&nbsp;</span>
+                <span v-if="keys.length==4 || keys.length==5" class="empty">&nbsp;</span>
               </div>
               <div class="menu-container" v-if="menuOpened" :class="{bottom: verticalIndex<=0, top: verticalIndex>0}"> <!--  left : subkeyslength>3 &&  positionIndex%4 == 0, right: subkeyslength>3 && positionIndex%4 == 3 -->
                 <div class="menu">
diff --git a/Step/wwwroot/src/modules/under-the-hood/soft-key1.vue b/Step/wwwroot/src/modules/under-the-hood/soft-key1.vue
index 2ec94802..5badfc3a 100644
--- a/Step/wwwroot/src/modules/under-the-hood/soft-key1.vue
+++ b/Step/wwwroot/src/modules/under-the-hood/soft-key1.vue
@@ -8,6 +8,8 @@
       <!-- <button class="star" :class="{active: starred}" @click="toggleStar()"><i class="fa fa-star"></i></button> -->
       <section class="multiple" @click="toggleMenu()">
         <span v-for="k in keys" :key="k" :class="{active:getSoftKeyStatus(k), disabled:!disabled && !getSoftKeyActive(k)}">{{getSubKeyText(k)}}</span>
+        <span v-if="keys.length==4" class="empty">&nbsp;</span>
+        <span v-if="keys.length==4 || keys.length==5" class="empty">&nbsp;</span>
       </section>
     </div>
     <div class="menu-container" v-if="menuOpened" :class="{bottom: verticalIndex<=0, top: verticalIndex>0, left : subkeyslength>3 &&  positionIndex%4 == 0, right: subkeyslength>3 && positionIndex%4 == 3}">