Refactor general settings tab

src/components/base/LoginComponent.tsx

@@ -7,7 +7,7 @@ import AppIcon from '@/components/app/AppIcon.vue'
 import UserAvatar from '@/components/base/UserAvatar'
 import UserInput from '@/components/base/UserInput'
 import SettingsView from '@/components/base/settings/SettingsView'
-import { getDesktopIcon } from '@/utils/helper'
+import { focusInputPassword, getDesktopIcon } from '@/utils/helper'
 
 @Component({
   components: {
@@ -55,6 +55,10 @@ export default class LoginComponent extends Vue {
     return tabs
   }
 
+  mounted() {
+    focusInputPassword()
+  }
+
   activateTab(index: number) {
     PageModule.SET_STATE_PAGE({ key: 'mainTabIndex', value: index })
   }

src/components/base/settings/SettingsView.tsx

@@ -4,7 +4,7 @@ import { AppModule } from '@/store/app'
 import AppIcon from '@/components/app/AppIcon.vue'
 import SettingsThemes from '@/components/base/settings/SettingsThemes'
 import SettingsCustom from '@/components/base/settings/SettingsCustom'
-import SettingsGeneral from '@/components/base/settings/SettingsGeneral'
+import SettingsGeneral from '@/components/base/settings/general/SettingsGeneral'
 import { PageModule } from '@/store/page'
 
 @Component({

src/components/base/settings/general/SettingsCheckboxes.tsx

@@ -0,0 +1,35 @@
+import { Component, Vue } from 'vue-property-decorator'
+import AppCheckbox from '@/components/app/AppCheckbox'
+import { AppModule } from '@/store/app'
+
+@Component({
+  components: {
+    AppCheckbox
+  }
+})
+export default class SettingsCheckboxes extends Vue {
+  get bodyClass() {
+    return AppModule.bodyClass
+  }
+
+  buildCheckbox(name: string) {
+    return <AppCheckbox
+      label={ this.$t(`settings.${name}`) }
+      value={ this.bodyClass[name] }
+      onInput={ (value: boolean) => {
+        AppModule.CHANGE_BODY_CLASS({ key: name, value })
+        AppModule.syncStoreWithQuery()
+      }}
+    />
+  }
+
+  render() {
+    return <div class="grid-two">
+      <h2 class="title"> { this.$t('settings.performance') } </h2>
+      { this.buildCheckbox('blur') }
+      { this.buildCheckbox('show-framerate') }
+      { this.buildCheckbox('no-transition') }
+      { this.buildCheckbox('only-ui') }
+    </div>
+  }
+}

src/components/base/settings/general/SettingsGeneral.tsx

@@ -1,30 +1,23 @@
 import { Component, Vue } from 'vue-property-decorator'
 
-import AppSelector, { AppSelectorProps as SProps } from '@/components/app/AppSelector'
-import AppCheckbox from '@/components/app/AppCheckbox'
-import { PageModule } from '@/store/page'
-import { LoginPosition } from '@/models/page'
 import { AppModule } from '@/store/app'
 import AppIcon from '@/components/app/AppIcon.vue'
-import { generateDesktopIcons, languageMap } from '@/utils/helper'
 import AppButton from '@/components/app/AppButton'
-import { osList } from '@/models/app'
 import SettingsUsers from './SettingsUsers'
 import SettingsHotkeys from './SettingsHotkeys'
+import SettingsCheckboxes from './SettingsCheckboxes'
+import SettingsSelectors from './SettingsSelectors'
 
 @Component({
   components: {
     AppIcon,
-    AppSelector,
     SettingsUsers,
-    SettingsHotkeys
+    SettingsHotkeys,
+    SettingsSelectors,
+    SettingsCheckboxes
   }
 })
 export default class SettingsGeneral extends Vue {
-  get bodyClass() {
-    return AppModule.bodyClass
-  }
-
   get showFrameRate() {
     return AppModule.showFrameRate
   }
@@ -33,68 +26,6 @@ export default class SettingsGeneral extends Vue {
     return AppModule.viewThemeOnly
   }
 
-  get languageList() {
-    return PageModule.languages.map((language) => ({
-      text: languageMap[language],
-      value: language
-    }))
-  }
-
-  get menuPositionItems() {
-    const positions = ['top', 'left', 'right', 'bottom', 'center']
-    return positions.map(word => ({
-      value: word,
-      text: this.$t(`settings.login-position.${word}`).toString()
-    }))
-  }
-
-  get menuPositionValue() {
-    return {
-      value: PageModule.loginPosition,
-      text: this.$t(`settings.login-position.${PageModule.loginPosition}`).toString()
-    }
-  }
-
-  changeLanguage(value: string) {
-    this.$i18n.locale = value
-    localStorage.setItem('language', value)
-    PageModule.SET_STATE_PAGE({ key: 'language', value })
-  }
-
-  changeLoginPosition(position: string) {
-    localStorage.setItem('loginPosition', position)
-    PageModule.SET_STATE_PAGE({ key: 'loginPosition', value: position as LoginPosition })
-  }
-
-  changeDesktop(value: string) {
-    AppModule.SAVE_STATE_APP({ key: 'desktop', value })
-  }
-
-  changeOs(value: string) {
-    AppModule.SAVE_STATE_APP({ key: 'currentOs', value })
-  }
-
-  buildCheckbox(name: string) {
-    return <AppCheckbox
-      label={ this.$t(`settings.${name}`) }
-      value={ this.bodyClass[name] }
-      onInput={ (value: boolean) => {
-        AppModule.CHANGE_BODY_CLASS({ key: name, value })
-        AppModule.syncStoreWithQuery()
-      }}
-    />
-  }
-
-  buildSelector(labelI18n: SProps['label'], items: SProps['items'], value: SProps['value'], callback: (value: string) => void) {
-    const label = this.$t(`settings.${labelI18n}`)
-    return <AppSelector
-      label={ label }
-      items={ items }
-      value={ value }
-      onInput={ callback }
-    />
-  }
-
   resetSettings() {
     localStorage.clear()
     AppModule.setUpSettings()
@@ -103,34 +34,13 @@ export default class SettingsGeneral extends Vue {
     if (hasQyery) { this.$router.replace({}) }
   }
 
-  buildSettingsSection() {
-    return <div class="grid-two">
-      <h2 class="title"> { this.$t('settings.title') } </h2>
-      { this.buildSelector('choice-language', this.languageList, PageModule.language, this.changeLanguage) }
-      { this.buildSelector('login-position.about', this.menuPositionItems, this.menuPositionValue, this.changeLoginPosition) }
-      { !this.isViewThemeOnly && this.buildSelector('choice-desktop', generateDesktopIcons(), AppModule.currentDesktop?.key, this.changeDesktop) }
-      { !this.isViewThemeOnly && this.buildSelector('choice-os', osList, AppModule.currentOs, this.changeOs) }
-    </div>
-  }
-
-  buildCheckboxSection() {
-    return <div class="grid-two">
-      <h2 class="title"> { this.$t('settings.performance') } </h2>
-      { this.buildCheckbox('blur') }
-      { this.buildCheckbox('show-framerate') }
-      { this.buildCheckbox('no-transition') }
-      { this.buildCheckbox('only-ui') }
-    </div>
-  }
-
   render() {
     return <div class='user-settings-general'>
-      { this.buildCheckboxSection() }
-      { this.buildSettingsSection() }
+      <SettingsCheckboxes />
+      <SettingsSelectors />
 
       { !this.isViewThemeOnly && <SettingsUsers /> }
-
-      { <SettingsHotkeys />}
+      <SettingsHotkeys />
 
       <div class="help-block">
         <AppButton onClick={ this.resetSettings } block>

src/components/base/settings/general/SettingsSelectors.tsx

@@ -0,0 +1,75 @@
+import { Component, Vue } from 'vue-property-decorator'
+import AppSelector, { AppSelectorProps as SProps } from '@/components/app/AppSelector'
+import { generateDesktopIcons, languageMap } from '@/utils/helper'
+import { AppModule } from '@/store/app'
+import { PageModule } from '@/store/page'
+import { osList } from '@/models/app'
+import { LoginPosition } from '@/models/page'
+
+@Component
+export default class SettingsSelectors extends Vue {
+  get isViewThemeOnly() {
+    return AppModule.viewThemeOnly
+  }
+
+  get languageList() {
+    return PageModule.languages.map((language) => ({
+      text: languageMap[language],
+      value: language
+    }))
+  }
+
+  get menuPositionItems() {
+    const positions = ['top', 'left', 'right', 'bottom', 'center']
+    return positions.map(word => ({
+      value: word,
+      text: this.$t(`settings.login-position.${word}`).toString()
+    }))
+  }
+
+  get menuPositionValue() {
+    return {
+      value: PageModule.loginPosition,
+      text: this.$t(`settings.login-position.${PageModule.loginPosition}`).toString()
+    }
+  }
+
+  changeLanguage(value: string) {
+    this.$i18n.locale = value
+    localStorage.setItem('language', value)
+    PageModule.SET_STATE_PAGE({ key: 'language', value })
+  }
+
+  changeLoginPosition(position: string) {
+    localStorage.setItem('loginPosition', position)
+    PageModule.SET_STATE_PAGE({ key: 'loginPosition', value: position as LoginPosition })
+  }
+
+  changeDesktop(value: string) {
+    AppModule.SAVE_STATE_APP({ key: 'desktop', value })
+  }
+
+  changeOs(value: string) {
+    AppModule.SAVE_STATE_APP({ key: 'currentOs', value })
+  }
+
+  buildSelector(labelI18n: SProps['label'], items: SProps['items'], value: SProps['value'], callback: (value: string) => void) {
+    const label = this.$t(`settings.${labelI18n}`)
+    return <AppSelector
+      label={ label }
+      items={ items }
+      value={ value }
+      onInput={ callback }
+    />
+  }
+
+  render() {
+    return <div class="grid-two">
+      <h2 class="title"> { this.$t('settings.title') } </h2>
+      { this.buildSelector('choice-language', this.languageList, PageModule.language, this.changeLanguage) }
+      { this.buildSelector('login-position.about', this.menuPositionItems, this.menuPositionValue, this.changeLoginPosition) }
+      { !this.isViewThemeOnly && this.buildSelector('choice-desktop', generateDesktopIcons(), AppModule.currentDesktop?.key, this.changeDesktop) }
+      { !this.isViewThemeOnly && this.buildSelector('choice-os', osList, AppModule.currentOs, this.changeOs) }
+    </div>
+  }
+}

src/components/base/settings/general/SettingsUsers.tsx

@@ -0,0 +1,31 @@
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule } from '@/store/app'
+import AppIcon from '@/components/app/AppIcon.vue'
+import { LightdmUsers } from '@/models/lightdm'
+
+@Component({ components: { AppIcon } })
+export default class SettingsUsers extends Vue {
+  get users() {
+    return AppModule.users
+  }
+
+  buildUserBlock(user: LightdmUsers) {
+    const isActive = user.username === AppModule.username
+    const activateUser = () => AppModule.SAVE_STATE_APP({ key: 'username', value: user.username })
+
+    return <div
+      onClick={ activateUser }
+      class={`settings-user-block ${isActive ? 'active' : ''}`}
+    >
+      <AppIcon class='settings-user-image' name={ user.image || 'user' } />
+      <p class="settings-user-name"> { user.display_name } </p>
+    </div>
+  }
+
+  render() {
+    return <div>
+      <h2 class="title mb-1"> { this.$t('settings.users') } </h2>
+      <div class="users-grid"> { this.users.map(this.buildUserBlock) } </div>
+    </div>
+  }
+}

src/locales/en.json

@@ -55,6 +55,17 @@
     "performance": "performance",
     "choice-desktop": "Choice desktop",
     "choice-language": "Choice language",
+    "keyboard": {
+      "title": "Hotkeys",
+      "open-themes": "Open theme",
+      "open-custom": "Open custom settings",
+      "open-settings": "Open general settings",
+      "hide-windows": "Close windows",
+      "randomize-theme": "Choose random theme settings",
+      "poweroff": "Poweroff",
+      "restart": "Restart",
+      "suspend": "Suspend"
+    },
     "choice-os": "Choice os",
     "save-theme": "Save theme",
     "language": "Language",

src/locales/ru.json

@@ -50,6 +50,17 @@
     "show-framerate": "Показывать частоту кадров",
     "only-ui": "Показывать только настройки",
     "performance": "производительность",
+    "keyboard": {
+      "title": "Горячие клавишы",
+      "open-themes": "Открыть темы",
+      "open-custom": "Открыть настройки темы",
+      "open-settings": "Открыть общие настройки",
+      "hide-windows": "Закрыть окна",
+      "randomize-theme": "Выбрать случайные настройки темы",
+      "poweroff": "Выключить",
+      "restart": "Перезагрузить",
+      "suspend": "Приостановить"
+    },
     "choice-language": "Выбор языка",
     "language": "Язык",
     "general": "Общее",

src/style/atom.styl

@@ -55,3 +55,9 @@
 .fw-600
   font-weight 600
 
+.grid-two
+  display grid
+  grid-template-columns repeat(2, 1fr)
+  gap 12px
+  .title
+    grid-column 1 / 3

src/style/components/index.styl

@@ -7,7 +7,7 @@
 @import './shutdown.styl'
 @import './selector.styl'
 @import './checkbox.styl'
-@import './settings.styl'
+@import './settings/index.styl'
 @import './color-selector.styl'
 @import './background.styl'
 

src/style/components/settings/hotkeys.styl

@@ -0,0 +1,20 @@
+.settings-hotkey
+  display flex
+  align-items center
+  margin-bottom 8px
+
+.settings-hotkey-blocks
+  display flex
+  user-select none
+
+.settings-hotkey-title
+  text-transform uppercase
+  margin-right 8px
+
+.settings-hotkey-block
+  text-transform uppercase
+  padding 4px 9px
+  font-size 12px
+  border 1px var(--color-unfocus) solid
+  border-radius .4em
+  margin-right 8px

src/style/components/settings/index.styl

@@ -1,3 +1,6 @@
+@import './users.styl'
+@import './hotkeys.styl'
+
 .user-settings
   height 100%
   overflow-y auto
@@ -36,46 +39,10 @@
 
 .user-settings-general
   display grid
+  overflow hidden
   gap 12px
 
-.grid-two
-  display grid
-  grid-template-columns repeat(2, 1fr)
-  gap 12px
-  .title
-    grid-column 1 / 3
-
 .user-settings-custom
   display grid
   grid-template-columns repeat(auto-fit, minmax(200px, 1fr))
   gap 12px
-
-.users-grid
-  display grid
-  gap 12px
-  grid-template-columns repeat(auto-fit, minmax(60px, calc(20% - 12px)))
-
-.settings-user-block
-  cursor pointer
-  display flex
-  padding 12px
-  align-items center
-  border-radius 12px
-  border 1px solid var(--color-unfocus)
-  flex-direction column
-  justify-content center
-  &.active
-    border-color var(--color-active)
-
-.settings-user-name
-  margin-top 8px
-  text-overflow ellipsis
-  white-space nowrap
-  overflow hidden
-
-.settings-user-image
-  border-radius 50%
-  width 100%
-  height 100%
-  background-size cover
-  background-position center

src/style/components/settings/users.styl

@@ -0,0 +1,29 @@
+.users-grid
+  display grid
+  gap 12px
+  grid-template-columns repeat(auto-fit, minmax(60px, calc(20% - 12px)))
+
+.settings-user-block
+  cursor pointer
+  display flex
+  padding 12px
+  align-items center
+  border-radius 12px
+  border 1px solid var(--color-unfocus)
+  flex-direction column
+  justify-content center
+  &.active
+    border-color var(--color-active)
+
+.settings-user-name
+  margin-top 8px
+  text-overflow ellipsis
+  white-space nowrap
+  overflow hidden
+
+.settings-user-image
+  border-radius 50%
+  width 100%
+  height 100%
+  background-size cover
+  background-position center