icone categoria 7

Step.Config/Config/userSoftKeyConfig.xml

@@ -414,7 +414,7 @@
   </softKey_toggle>  
   <softKey_group>
     <active>true</active>
-    <category>3</category>
+    <category>7</category>
     <operatorConfirmationNeeded>false</operatorConfirmationNeeded>
     <localizedNames>
       <lang langKey="en">Test</lang>

Step/wwwroot/assets/styles/base/plc-softkeys.less

@@ -103,6 +103,10 @@
             position: relative;
             padding: 0;
             width: 100%;
+            .fa-icons{
+              font-size: 32px;
+              color: #b2b2b2;
+            }
             img {
                 filter: brightness(70%);
             }
@@ -111,6 +115,9 @@
                 img {
                     filter: brightness(100%);
                 }
+                .fa-icons{
+                  color: #fff;
+                }
             }
             &:first-child {
                 border-left: none;
@@ -188,7 +195,7 @@
     box-sizing: border-box;
     background-color: @color-bluish-grey;
     -webkit-tap-highlight-color: transparent;
-    &.command {        
+    &.command {
     }
     .menu-container {
         width: 360px;
@@ -277,11 +284,11 @@
         font-size: 14px;
         line-height: 21px;
         border-bottom: 1px solid #fff;
-        box-sizing: content-box;        
+        box-sizing: content-box;
         white-space: nowrap;
         overflow: hidden;
     }
-    &.active {        
+    &.active {
         box-shadow: inset 0px 0px 0px 3px rgba(23, 145, 255, 1);
     }
     button.star {

Step/wwwroot/assets/styles/style.css

@@ -1558,6 +1558,10 @@ footer .container button.big:before {
   padding: 0;
   width: 100%;
 }
+#plc-softkeys-container > div > header button .fa-icons {
+  font-size: 32px;
+  color: #b2b2b2;
+}
 #plc-softkeys-container > div > header button img {
   filter: brightness(70%);
 }
@@ -1567,6 +1571,9 @@ footer .container button.big:before {
 #plc-softkeys-container > div > header button.active img {
   filter: brightness(100%);
 }
+#plc-softkeys-container > div > header button.active .fa-icons {
+  color: #fff;
+}
 #plc-softkeys-container > div > header button:first-child {
   border-left: none;
 }

Step/wwwroot/src/modules/plc-softkeys.vue

@@ -8,7 +8,12 @@
       <button v-if="isSectionVisible(4)" :class="{active:selectedSection==4}" @click="selectSection(4)"><span class="number">4.</span><img src="assets/icons/under-hood-png/cat-4.png"></button>
       <button v-if="isSectionVisible(5)" :class="{active:selectedSection==5}" @click="selectSection(5)"><span class="number">5.</span><img src="assets/icons/under-hood-png/cat-5.png"></button>
       <button v-if="isSectionVisible(6)" :class="{active:selectedSection==6}" @click="selectSection(6)"><span class="number">6.</span><img src="assets/icons/under-hood-png/cat-6.png"></button>
-      <button v-if="isSectionVisible(7)" :class="{active:selectedSection==7}" @click="selectSection(7)"><span class="number">7.</span></button>
+      <button v-if="isSectionVisible(7)" :class="{active:selectedSection==7}" @click="selectSection(7)"><span class="number">7.</span>
+        <div class="fa-icons">
+          <i class="fa fa-arrow-up"></i>
+          <i class="fa fa-arrow-down"></i>
+        </div>
+      </button>
     </header>
     <div class="title" >{{'sfk_category_' + selectedSection | localize('sfk_category_' + selectedSection) }}</div>
     <section class="scrollable" ref="scrollable">