Dashboard: Customize modal design improvements

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index c4a41f5dac47666d2ec45383d7bef16f9a56350c..e86b1e094aa277d04a2e29e2b44a24af05eb5458 100644 (file)
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -27,7 +27,8 @@
                <div class="footer"
                        :class="{ firstrun: firstRun }">
                        <a v-tooltip="tooltip"
-                               class="edit-panels icon-add"
+                               class="edit-panels icon-rename"
+                               tabindex="0"
                                @click="showModal">{{ t('dashboard', 'Customize') }}</a>
                </div>
 
@@ -53,7 +54,7 @@
 
                                <a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a>
 
-                               <h3>{{ t('dashboard', 'Change the background image') }}</h3>
+                               <h3>{{ t('dashboard', 'Change background image') }}</h3>
                                <BackgroundSettings @updateBackground="updateBackground" />
 
                                <h3>{{ t('dashboard', 'Credits') }}</h3>
@@ -298,8 +299,6 @@ export default {
 <style lang="scss" scoped>
        #app-dashboard {
                width: 100%;
-               padding-bottom: 100px;
-
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
@@ -408,19 +407,20 @@ export default {
                text-align: center;
                transition: bottom var(--animation-slow) ease-in-out;
                bottom: 0;
+               padding: 44px 0;
 
                &.firstrun {
                        position: sticky;
                        bottom: 10px;
                }
        }
-       .edit-panels {
 
+       .edit-panels {
                display: inline-block;
                margin:auto;
-               background-position: 10px center;
-               padding: 12px;
-               padding-left: 30px;
+               background-position: 16px center;
+               padding: 12px 16px;
+               padding-left: 36px;
                background-color: var(--color-main-background);
                border-radius: var(--border-radius-pill);
                max-width: 200px;
@@ -434,29 +434,46 @@ export default {
        }
 
        .modal__content {
-               width: 30vw;
-               margin: 20px;
+               padding: 32px 16px;
                max-height: 70vh;
+               text-align: center;
                overflow: auto;
+
                ol {
                        display: flex;
-                       flex-direction: column;
+                       flex-direction: row;
+                       justify-content: center;
                        list-style-type: none;
+                       padding-bottom: 16px;
                }
-               li label {
-                       padding: 10px;
-                       display: block;
-                       list-style-type: none;
-                       background-size: 16px;
-                       background-position: left center;
-                       padding-left: 26px;
+               li {
+                       label {
+                               display: block;
+                               padding: 48px 8px 16px 8px;
+                               margin: 8px;
+                               width: 160px;
+                               background-color: var(--color-background-hover);
+                               border: 2px solid var(--color-main-background);
+                               border-radius: var(--border-radius-large);
+                               background-size: 24px;
+                               background-position: center 16px;
+                               text-align: center;
+
+                               &:hover {
+                                       border-color: var(--color-primary);
+                               }
+                       }
+
+                       input:focus + label {
+                               border-color: var(--color-primary);
+                       }
                }
 
                h3 {
                        font-weight: bold;
 
                        &:not(:first-of-type) {
-                               margin-top: 32px;
+                               margin-top: 64px;
                        }
                }
        }

diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
index b704d4b0724142ceb1316fd710f64ada254ef0b1..800b76dad9da5d3ce4023b2e82d3f1be64758fbf 100644 (file)
--- a/apps/dashboard/src/components/BackgroundSettings.vue
+++ b/apps/dashboard/src/components/BackgroundSettings.vue
@@ -22,22 +22,24 @@
 
 <template>
        <div class="background-selector">
+               <div class="background" tabindex="0" @click="pickFile">
+                       <div class="background--preview">
+                               {{ t('dashboard', 'Pick from files') }}
+                       </div>
+               </div>
                <div class="background default"
                        :class="{ 'icon-loading': loading === 'default' }"
+                       tabindex="0"
                        @click="setDefault()">
                        <div class="background--preview">
                                Default
                        </div>
                </div>
-               <div class="background" @click="pickFile">
-                       <a>
-                               {{ t('dashboard', 'Pick an image from your files') }}
-                       </a>
-               </div>
                <div v-for="background in shippedBackgrounds"
                        :key="background.name"
                        class="background"
                        :class="{ 'icon-loading': loading === background.name }"
+                       tabindex="0"
                        @click="setShipped(background.name)">
                        <div class="background--preview" :style="{ 'background-image': 'url(' + background.url + ')' }" />
                </div>
@@ -129,26 +131,30 @@ export default {
        .background-selector {
                display: flex;
                flex-wrap: wrap;
+               justify-content: center;
 
                .background {
-                       width: 140px;
-                       padding: 15px;
-                       border-radius: var(--border-radius);
+                       width: 176px;
+            margin: 8px;
                        text-align: center;
+            border-radius: var(--border-radius-large);
 
                        &.current {
                                background-image: var(--color-background-dark);
                        }
 
                        &--preview {
-                               width: 140px;
-                               height: 90px;
+                               width: 172px;
+                               height: 96px;
                                background-size: cover;
                                background-position: center center;
+                               border-radius: var(--border-radius-large);
+                border: 2px solid var(--color-main-background);
                        }
 
-                       &:hover {
-                               background-color: var(--color-background-hover);
+                       &:hover .background--preview,
+            &:focus .background--preview {
+                border: 2px solid var(--color-primary);
                        }
                }
        }