Adjust configuration menu, edit mode z-index for list items (#943)

Fix #892. Fix #919. Signed-off-by: Hubert Nusser <[email protected]> Also-by: Yannick Schaus <[email protected]>
openhab · Mar 15, 2021 · c556597 · c556597
1 parent 8c90098
commit c556597
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/list/oh-list-item.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/list/oh-list-item.vue
@@ -7,23 +7,6 @@
                 :accordion-item="context.component.slots && context.component.slots.accordion && !config.divider && !context.editmode"
                 :link="(config.action !== undefined && config.action !== '' && !context.editmode) ? true : undefined"
                 @click="performAction">
-    <f7-menu v-if="context.editmode" slot="content-start" class="configure-layout-menu">
-      <f7-menu-item icon-f7="list_bullet" dropdown>
-        <f7-menu-dropdown>
-          <f7-menu-dropdown-item @click="context.editmode.configureWidget(context.component, context.parent)" href="#" text="Configure Item" />
-          <f7-menu-dropdown-item @click="context.editmode.editWidgetCode(context.component, context.parent)" href="#" text="Edit YAML" />
-          <f7-menu-dropdown-item v-if="context.parent.component.config.accordionList" @click="context.editmode.editWidgetCode(context.component, context.parent, 'accordion')" href="#" text="Edit Accordion Code" />
-          <f7-menu-dropdown-item divider />
-          <f7-menu-dropdown-item @click="context.editmode.cutWidget(context.component, context.parent)" href="#" text="Cut" />
-          <f7-menu-dropdown-item @click="context.editmode.copyWidget(context.component, context.parent)" href="#" text="Copy" />
-          <f7-menu-dropdown-item divider />
-          <f7-menu-dropdown-item @click="context.editmode.moveWidgetUp(context.component, context.parent)" href="#" text="Move Up" />
-          <f7-menu-dropdown-item @click="context.editmode.moveWidgetDown(context.component, context.parent)" href="#" text="Move Down" />
-          <f7-menu-dropdown-item divider />
-          <f7-menu-dropdown-item @click="context.editmode.removeWidget(context.component, context.parent)" href="#" text="Remove Item" />
-        </f7-menu-dropdown>
-      </f7-menu-item>
-    </f7-menu>
     <slot name="inner" #inner />
     <slot name="after" #after />
     <slot name="content" #content />

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/system/oh-list.vue b/bundles/org.openhab.ui/web/src/components/widgets/system/oh-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <f7-list v-bind="config" :title="null">
+  <f7-list v-bind="config" :title="null" :style="{ 'z-index': context.editmode ? 'inherit' : undefined }">
     <f7-menu v-if="context.editmode" slot="before-list" class="configure-layout-menu margin-vertical padding-left">
       <f7-menu-item @click="context.editmode.addWidget(context.component)" icon-f7="plus" />
       <f7-menu-item style="margin-left: auto" icon-f7="square_list" dropdown>
@@ -11,7 +11,26 @@
       </f7-menu-item>
     </f7-menu>
     <ul v-if="context.component.slots && context.component.slots.default">
-      <generic-widget-component :context="childContext(slotComponent)" v-for="(slotComponent, idx) in context.component.slots.default" :key="idx" v-on="$listeners" />
+      <template v-for="(slotComponent, idx) in context.component.slots.default">
+        <f7-menu v-if="context.editmode" style="float:left" :key="idx">
+          <f7-menu-item icon-f7="list_bullet" class="margin-left configure-layout-menu" dropdown>
+            <f7-menu-dropdown>
+              <f7-menu-dropdown-item @click="context.editmode.configureWidget(context.component.slots.default[idx], context)" href="#" text="Configure Item" />
+              <f7-menu-dropdown-item @click="context.editmode.editWidgetCode(context.component.slots.default[idx], context)" href="#" text="Edit YAML" />
+              <f7-menu-dropdown-item v-if="context.parent.component.config.accordionList" @click="context.editmode.editWidgetCode(context.component.slots.default[idx], context, 'accordion')" href="#" text="Edit Accordion Code" />
+              <f7-menu-dropdown-item divider />
+              <f7-menu-dropdown-item @click="context.editmode.cutWidget(context.component.slots.default[idx], context)" href="#" text="Cut" />
+              <f7-menu-dropdown-item @click="context.editmode.copyWidget(context.component.slots.default[idx], context)" href="#" text="Copy" />
+              <f7-menu-dropdown-item v-if="idx > 0 || idx < context.component.slots.default.length - 1" divider />
+              <f7-menu-dropdown-item v-if="idx > 0" @click="context.editmode.moveWidgetUp(context.component.slots.default[idx], context)" href="#" text="Move Up" />
+              <f7-menu-dropdown-item v-if="idx < context.component.slots.default.length - 1" @click="context.editmode.moveWidgetDown(context.component.slots.default[idx], context)" href="#" text="Move Down" />
+              <f7-menu-dropdown-item divider />
+              <f7-menu-dropdown-item @click="context.editmode.removeWidget(context.component.slots.default[idx], context)" href="#" text="Remove Item" />
+            </f7-menu-dropdown>
+          </f7-menu-item>
+        </f7-menu>
+        <generic-widget-component :context="childContext(slotComponent)" :key="idx" v-on="$listeners" />
+      </template>
     </ul>
   </f7-list>
 </template>