From 565844f8c8fdbfbd861a3a0b7884fa91fc17b5f3 Mon Sep 17 00:00:00 2001
From: jimtng <2554958+jimtng@users.noreply.github.com>
Date: Tue, 27 Feb 2024 02:21:15 +1000
Subject: [PATCH] Blockly Editor: combine renderer selection and show item
 label icons (#2415)

The current icons are too crowded for mobile devices. This PR combines
the renderer choice and the show labels into one icon.

Before
<img width="409" alt="image"
src="https://github.com/openhab/openhab-webui/assets/2554958/8c294ca4-8fce-4379-9635-fd4e053fc77c">

After
<img width="434" alt="image"
src="https://github.com/openhab/openhab-webui/assets/2554958/d04b59ef-50bf-4783-aab1-99493a8c9cf3">

---------

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
---
 .../settings/rules/script/script-edit.vue     | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
index 430c8e3808..b3dd84e40c 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
@@ -30,16 +30,26 @@
                    :tooltip="rule.status.description" />
         </span>
         <span class="display-flex flex-direction-row align-items-center">
-          <f7-button v-if="isBlockly && !blocklyCodePreview" outline small class="no-ripple" style="margin-right: 5px; padding: 3px" :tooltip="'Block style'">
-            <select @change="setBlocklyRenderer($event)" style="text-align-last: center">
-              <option v-for="renderer in blocklyRenderers" :key="renderer" :selected="renderer === blocklyRenderer">{{ renderer }}</option>
-            </select>
-          </f7-button>
-          <f7-button v-if="!createMode && isBlockly && !blocklyCodePreview" outline small :active="blocklyShowLabels" icon-f7="square_on_circle" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" style="margin-right: 5px" @click="toggleBlocklyItemLabelId" tooltip="Toggle to show either Item labels or IDs" />
-          <f7-segmented v-if="!createMode && isBlockly" class="margin-right">
-            <f7-button outline small :active="!blocklyCodePreview" icon-f7="ticket" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="blocklyCodePreview = false" tooltip="Show blocks" />
-            <f7-button outline small :active="blocklyCodePreview" icon-f7="doc_text" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="showBlocklyCode" tooltip="Show generated code" />
-          </f7-segmented>
+          <template v-if="isBlockly">
+            <f7-popover class="config-popover">
+              <f7-list class="config-menu">
+                <f7-list-item group-title title="Block Style" />
+                <f7-list-item v-for="renderer in blocklyRenderers" :key="renderer" :title="renderer" style="text-transform:capitalize" color="blue" radio :checked="renderer === blocklyRenderer" @click="setBlocklyRenderer(renderer)" />
+                <f7-list-item v-if="!$device.desktop" group-title title="Show Items" />
+                <f7-list-item v-if="!$device.desktop" title="As Labels" color="blue" radio :checked="blocklyShowLabels" @click="setBlocklyShowLabels(true)" />
+                <f7-list-item v-if="!$device.desktop" title="As Item IDs" color="blue" radio :checked="!blocklyShowLabels" @click="setBlocklyShowLabels(false)" />
+              </f7-list>
+            </f7-popover>
+            <template v-if="$device.desktop">
+              <f7-button v-if="!blocklyCodePreview" outline small icon-f7="paintbrush" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" style="margin-right: 5px" tooltip="Block Style" popover-open=".config-popover" />
+              <f7-button v-if="!createMode && !blocklyCodePreview" outline small :active="blocklyShowLabels" icon-f7="square_on_circle" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" style="margin-right: 5px" @click="setBlocklyShowLabels(!blocklyShowLabels)" tooltip="Toggle to show either Item labels or IDs" />
+            </template>
+            <f7-button v-else-if="!blocklyCodePreview" outline small icon-f7="ellipsis_vertical" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" style="margin-right: 5px" tooltip="Blockly Settings" popover-open=".config-popover" />
+            <f7-segmented v-if="!createMode" class="margin-right">
+              <f7-button outline small :active="!blocklyCodePreview" icon-f7="ticket" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="blocklyCodePreview = false" tooltip="Show blocks" />
+              <f7-button outline small :active="blocklyCodePreview" icon-f7="doc_text" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="showBlocklyCode" tooltip="Show generated code" />
+            </f7-segmented>
+          </template>
           <f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
         </span>
       </f7-toolbar>
@@ -541,12 +551,12 @@ export default {
       this.blocklyRenderer = this.$refs.blocklyEditor.getCurrentRenderer()
       this.blocklyRenderers = this.$refs.blocklyEditor.getRenderers()
     },
-    setBlocklyRenderer (event) {
-      this.blocklyRenderer = event.target.value
+    setBlocklyRenderer (newRenderer) {
+      this.blocklyRenderer = newRenderer
       this.$refs.blocklyEditor.changeRenderer(this.blocklyRenderer)
     },
-    toggleBlocklyItemLabelId () {
-      this.blocklyShowLabels = !this.blocklyShowLabels
+    setBlocklyShowLabels (showLabels) {
+      this.blocklyShowLabels = showLabels
       this.$refs.blocklyEditor.showHideLabels(this.blocklyShowLabels)
     },
     showBlocklyCode () {