Add handling theme in cache + little work with Login component

Author: Exauthor

build.sh

@@ -3,7 +3,7 @@
 echo Building LightDM Webkit theme Osmos v$(cat ./version)...
 echo
 
-rm lightdm-webkit-theme-osmos-$(cat ./version).tar.gz
+rm lightdm-webkit-theme-osmos*.tar.gz
 rm -r dist/
 yarn build
 pushd dist && tar zcvf ../lightdm-webkit-theme-osmos-$(cat ../version).tar.gz ./* && popd

src/assets/images/close.svg

@@ -172,5 +172,3 @@ a
     transform: translateX(0)
   }
 }
-
-@import './adaptive.styl'

src/assets/style/adaptive.styl

@@ -63,6 +63,8 @@
 .icon-container
   width 10vmin
   height 10vmin
+  max-width 9ch
+  max-height 9ch
   fill var(--color-active)
 
 .user-icon
@@ -71,6 +73,4 @@
 svg
   width 100%
   height 100%
-
-
 </style>

src/assets/style/index.styl

@@ -3,25 +3,25 @@
     .login-menu(v-if='openLogin' :class='[(theme.fullscreen) ? "fullscreen" : "", (!openLogin) ? "hide" : ""]')
       .login-form
         .login-form_user
-          Icon(mode='user' :item='settings.user')
+          icon(mode='user' :item='settings.user')
           form(@submit.prevent='submit')
             SelectItem(
               mode='user'
               :item='settings.user'
               :icon='false')
             input(type='password' ref='password' v-model='password' placeholder='password' :readonly='logging', :class="{'error': error}")
         .login-form_desktop
-          Icon(mode='desktop' :item='settings.desktop')
+          icon(mode='desktop' :item='settings.desktop')
           form
-            SelectItem(
+            select-item(
               mode='desktop'
               :item='settings.desktop'
               :icon='false')
         .login-bottom
-          SystemButton(type='shutdown')
-          SystemButton(type='restart')
-          SystemButton(type='suspend')
-          SystemButton(type='settings')
+          system-button(type='shutdown')
+          system-button(type='restart')
+          system-button(type='suspend')
+          system-button(type='settings')
 </template>
 
 <script>
@@ -52,7 +52,7 @@
       }
     },
     computed: {
-      ...mapState(['openSettings', 'openLogin']),
+      ...mapState(['openSettings', 'openLogin', 'openUsers', 'openDesktops']),
       ...mapState('system', {
         theme: state => state.settings.theme
       }),
@@ -70,22 +70,21 @@
             this.SET({type: 'openLogin', items: true})
           } else if (this.openLogin) {
             this.$nextTick(() => {
-              this.$refs.password.focus()
+              this.$refs.password.focus();
             })
           } else {
-            this.submit()
+            this.submit();
           }
         }
   
         if (event.key === "Escape") {
-          console.log("Escape")
           if (this.openSettings) {
-            console.log("Close settings, open login")
-            this.SET({type: 'openLogin', items: true})
-            this.SET({type: 'openSettings', items: false})
+            this.SET({type: 'openLogin', items: true});
+            this.SET({type: 'openSettings', items: false});
           } else if (this.openLogin) {
-            console.log("Close login")
-            this.SET({type: 'openLogin', items: false})
+            this.SET({type: 'openLogin', items: false});
+            this.SET({type: 'openUsers', items: false});
+            this.SET({type: 'openDesktops', items: false});
           }       
         }
       },
@@ -134,7 +133,7 @@
 
 .login-form_user, .login-form_desktop
   display flex
-  justify-content space-between
+  justify-content space-around
 
 form
   width calc(100% - 12vmin)

src/components/Icon.vue

@@ -1,6 +1,6 @@
 <template lang='pug'>
  .item(
-   :class='[(mode === "user") ? "user" : "desktop", (openUsers && mode === "user") ? "selected" : (openDesktop && mode === "desktop") ? "selected" : ""]' 
+   :class='[(mode === "user") ? "user" : "desktop", (openUsers && mode === "user") ? "selected" : (openDesktops && mode === "desktop") ? "selected" : ""]' 
    @click='openList')
    span.username(v-if="mode === 'user'") {{ item.username }}
    span.decktop(v-else) {{ item.name }}
@@ -10,7 +10,7 @@
        ul
          li(v-for='(item, i) in items' :key='i' @click='changeItem(item)') {{item.username}}
    transition(name='menu-popover')
-     .item-list(v-if='openDesktop && mode === "desktop"')
+     .item-list(v-if='openDesktops && mode === "desktop"')
        ul
          li(v-for='(item, i) in items' :key='i' @click='changeItem(item)') {{item.name}}
 </template>
@@ -22,7 +22,7 @@
     name: 'select-item',
     props: ['mode'],
     computed: {
-      ...mapState(['openUsers', 'openDesktop']),
+      ...mapState(['openUsers', 'openDesktops']),
       ...mapState('system', ['settings']),
       item:  {
         get() {
@@ -47,7 +47,7 @@
         if (this.mode === 'user') {
           this.SET({type: 'openUsers', items: !this.openUsers})
         } else {
-          this.SET({type: 'openDesktop', items: !this.openDesktop})
+          this.SET({type: 'openDesktops', items: !this.openDesktops})
         }
       },
     }

src/components/LoginComponent.vue

@@ -34,6 +34,8 @@
 .system-button
   width 4vmin
   height 4vmin
+  max-width 35px
+  max-height 35px
   overflow hidden
   svg
     width 100%

src/components/SelectItem.vue

@@ -70,6 +70,11 @@
     <path d=" M 683 183 C 669.879 215.166 661.911 236.236 647.307 267.447 C 656.26 276.94 667.267 287.955 685.124 300.442 C 665.927 292.544 652.842 284.636 643.061 276.405 C 624.366 315.414 595.058 370.961 535.623 477.755 C 582.323 450.795 618.531 434.159 652.273 427.812 C 650.825 421.59 650.056 414.829 650.112 407.805 L 650.149 406.332 C 650.89 376.406 666.461 353.391 684.906 354.953 C 703.348 356.514 717.708 382.052 716.966 411.984 C 716.824 417.621 716.17 423.037 715.06 428.066 C 748.436 434.596 784.299 451.154 830.377 477.755 C 821.291 461.028 813.153 445.954 805.406 431.589 C 793.206 422.133 780.485 409.832 754.529 396.509 C 772.371 401.147 785.155 406.507 795.112 412.485 C 716.368 265.868 710.002 246.372 683 183 L 683 183 L 683 183 Z " fill="url(#_lgradient_0)"/>
   </svg>
 
+
+  <svg v-else-if="type === 'xmonad'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="179 14 90 90" width="90" height="90">
+    <path d=" M 179 59 C 179 34.164 199.164 14 224 14 C 248.836 14 269 34.164 269 59 C 269 83.836 248.836 104 224 104 C 199.164 104 179 83.836 179 59 Z  M 216.5 74.479 L 216.5 78.479 L 225.5 82.479 L 216.5 87.479 L 216.5 91.479 L 229.5 84.479 L 229.5 80.479 L 216.5 74.479 L 216.5 74.479 L 216.5 74.479 L 216.5 74.479 L 216.5 74.479 Z  M 203.5 74.479 L 203.5 78.479 L 212.5 82.479 L 203.5 87.479 L 203.5 91.479 L 216.5 84.479 L 216.5 80.479 L 203.5 74.479 L 203.5 74.479 L 203.5 74.479 L 203.5 74.479 L 203.5 74.479 Z  M 205.5 26.521 L 212.5 26.521 L 223.5 44.479 L 234.5 26.521 L 242.5 26.521 L 227.5 49.479 L 244.5 74.479 L 237.5 74.479 L 223.5 54.479 L 210.5 74.479 L 203.5 74.479 L 219.5 49.479 L 205.5 26.521 L 205.5 26.521 L 205.5 26.521 L 205.5 26.521 Z  M 232.5 78.479 L 244.5 78.479 L 244.5 81.479 L 232.5 81.479 L 232.5 78.479 L 232.5 78.479 L 232.5 78.479 Z  M 232.5 85.479 L 244.5 85.479 L 244.5 88.479 L 232.5 88.479 L 232.5 85.479 L 232.5 85.479 Z " fill-rule="evenodd" fill="var(--color-active)"/>
+  </svg>
+
 </template>
 
 <script>

src/components/SystemButton.vue

@@ -13,7 +13,7 @@ export default new Vuex.Store({
   state: {
     openSettings: false,
     openUsers: false,
-    openDesktop: false,
+    openDesktops: false,
     openLogin: true,
     themes: [
       {
@@ -72,8 +72,5 @@ export default new Vuex.Store({
     SET(state, {type, items}) {
       state[type] = items;
     },
-    CHANCHE_THEME(state, payload) {
-       
-    }
   },
 })