Redesign menu to select fixed type, toolbar

Signed-off-by: Yannick Schaus <github@schaus.net>
openhab · Oct 1, 2021 · de3b6c6 · de3b6c6
1 parent 08f2423
commit de3b6c6
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 50 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-item.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-item.vue
@@ -109,7 +109,7 @@
         padding 0px
       .menu-inner:after
         width 0px
- </style>
+</style>
 
 <script>
 import mixin from '../widget-mixin'

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue
@@ -19,17 +19,26 @@
           icon-f7="square_on_square" />
         <f7-menu-item
           @click="toggleGrid()"
+          icon="margin-left-half"
           :icon-f7="grid.enable ? 'circle_grid_3x3_fill' : 'scircle_grid_3x3'"
-          style="margin-left: auto" />
+          style="margin-left: auto"
+          text="Grid" />
         <f7-menu-item
-          @click="
-            context.editmode.configureWidget(
-              context.component,
-              context.parent,
-              'oh-canvas-layout'
-            )
-          "
-          text="Configure" />
+          dropdown
+          icon-f7="rectangle_3_offgrid">
+          <f7-menu-dropdown right>
+            <f7-menu-dropdown-item
+              @click="
+                context.editmode.configureWidget(
+                  context.component,
+                  context.parent,
+                  'oh-canvas-layout'
+                )
+              "
+              href="#"
+              text="Configure Canvas Layout" />
+          </f7-menu-dropdown>
+        </f7-menu-item>
       </f7-menu>
       <hr>
     </f7-block>

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
@@ -37,49 +37,50 @@
                     !(context.component.slots.masonry && context.component.slots.masonry.length) &&
                     !(context.component.slots.grid && context.component.slots.grid.length) &&
                     !(context.component.slots.canvas && context.component.slots.canvas.length) &&
+                    page.uid !== 'overview' &&
                     !['responsive', 'fixed'].includes(page.config.layoutType)"
-                  class="block-narrow margin-bottom" inset>
-          <f7-block-title class="margin text-align-center">
-            Choose a layout style
-          </f7-block-title>
-          <f7-row class="text-align-center align-items-stretch">
-            <f7-col width="30" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
-              <f7-link @click="setLayoutType('responsive')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
-                <f7-icon size="70px" f7="rectangle_3_offgrid" />
-                <div class="margin-bottom">
-                  Responsive
-                </div>
-                <div class="margin-top">
-                  Create a page that automatically adjusts to the size of the screen. Suitable for use with any device.
-                </div>
-              </f7-link>
-            </f7-col>
-            <f7-col width="30" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
-              <f7-link @click="setLayoutType('fixed', 'grid')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
-                <f7-icon size="70px" f7="grid" />
-                <div class="margin-bottom">
-                  Fixed Grid
-                </div>
-                <div class="margin-top">
-                  Create a panel-like page for a specific screen size. Suitable for e.g. wall mounted tablets.
-                </div>
-              </f7-link>
-            </f7-col>
-            <f7-col width="30" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
-              <f7-link @click="setLayoutType('fixed', 'canvas')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
-                <f7-icon size="70px" f7="square_stack_3d_up" />
-                <div class="margin-bottom">
-                  Canvas
-                </div>
-                <div class="margin-top">
-                  Create a canvas-like page for a specific screen size, with pixel positionning of widgets. Suitable for e.g. wall mounted tablets.
-                </div>
-              </f7-link>
-            </f7-col>
-          </f7-row>
+                  class="block-narrow no-padding">
+          <f7-col>
+            <f7-list accordion-list>
+              <f7-block-title class="margin-left">
+                Layout Type
+              </f7-block-title>
+              <f7-list-item accordion-item title="Switch to Fixed Layout">
+                <f7-accordion-content>
+                  <f7-block class="margin text-align-center">
+                    Switch to a fixed layout type, suitable for e.g. wall mounted tablets:
+                  </f7-block>
+                  <f7-row class="text-align-center align-items-stretch margin-vertical" no-gap>
+                    <f7-col width="50">
+                      <f7-link @click="setLayoutType('fixed', 'grid')" class="flex-direction-column padding margin-left-half elevation-1 elevation-hover-3" style="color: var(--f7-theme-color-text-color)">
+                        <f7-icon size="70px" f7="grid" />
+                        <div class="margin-bottom">
+                          Fixed Grid
+                        </div>
+                        <f7-block-footer class="margin-top">
+                          <small>Position and resize widgets on a grid with fixed dimensions.</small>
+                        </f7-block-footer>
+                      </f7-link>
+                    </f7-col>
+                    <f7-col width="50">
+                      <f7-link @click="setLayoutType('fixed', 'canvas')" class="flex-direction-column padding margin-right-half elevation-1 elevation-hover-3" style="color: var(--f7-theme-color-text-color)">
+                        <f7-icon size="70px" f7="rectangle_3_offgrid" />
+                        <div class="margin-bottom">
+                          Fixed Canvas
+                        </div>
+                        <f7-block-footer class="margin-top">
+                          <small>Position and resize widgets freely over a fixed background.</small>
+                        </f7-block-footer>
+                      </f7-link>
+                    </f7-col>
+                  </f7-row>
+                </f7-accordion-content>
+              </f7-list-item>
+            </f7-list>
+          </f7-col>
         </f7-block>
 
-        <oh-layout-page class="layout-page" v-else-if="ready" :context="context" :key="pageKey" :style="page.config.style"
+        <oh-layout-page class="layout-page" v-if="ready" :context="context" :key="pageKey" :style="page.config.style"
                         @add-block="addBlock"
                         @add-masonry="addMasonry"
                         @add-grid-item="addGridItem"