Fix bugs with images

src/components/app/AppBar.tsx

@@ -3,17 +3,18 @@ import { Component, Vue } from 'vue-property-decorator'
 import AppIcon from './AppIcon.vue'
 import timer from '@/utils/time'
 import BatteryIcon from '../base/BatteryIcon'
+import BrightIcon from '../base/BrightIcon'
 
 @Component({
-  components: { AppIcon, BatteryIcon }
+  components: { AppIcon, BatteryIcon, BrightIcon }
 })
-export default class AppSelector extends Vue {
+export default class AppBar extends Vue {
-  get batteryLevel() {
+  get showBattery() {
-    return AppModule.batteryLevel
+    return AppModule.battery
   }
 
-  get brightLevel() {
+  get showBright() {
-    return AppModule.brightness
+    return !!AppModule.brightness
   }
 
   get currentTime() {
@@ -24,11 +25,8 @@ export default class AppSelector extends Vue {
     return <div class="app-bar">
       <div class="app-bar__time"> { timer.longTime } </div>
       <div class="app-bar__info">
-        <BatteryIcon />
+        { this.showBattery && <BatteryIcon /> }
-        <div class="app-bar__bright">
+        { this.showBright && <BrightIcon /> }
-          <AppIcon name="brightness" class="brightness-icon"/>
-          { this.brightLevel }
-        </div>
       </div>
     </div>
   }

src/components/base/BrightIcon.tsx

@@ -0,0 +1,19 @@
+import { AppModule } from '@/store/app'
+import { Component, Vue } from 'vue-property-decorator'
+import AppIcon from '@/components/app/AppIcon.vue'
+
+@Component({
+  components: { AppIcon }
+})
+export default class BrightIcon extends Vue {
+  get brightLevel() {
+    return AppModule.brightness
+  }
+
+  render() {
+    return <div class="app-bar__bright">
+      <AppIcon name="brightness" class="brightness-icon"/>
+      { this.brightLevel }
+    </div>
+  }
+}

src/components/base/UserAvatar.tsx

@@ -18,6 +18,10 @@ export default class UserAvatar extends Vue {
     return PageModule.isOpenBlock('settings')
   }
 
+  get isSupportFullApi() {
+    return AppModule.isSupportFullApi
+  }
+
   get locale() {
     return PageModule.locale
   }
@@ -32,17 +36,14 @@ export default class UserAvatar extends Vue {
 
   buildUserAvatar(image: string | undefined) {
     const defaultAvatar = <AppIcon name='user'/>
-    const userAvatar = <div
+    const userAvatar = <img class='user-avatar' src={image} />
-      class='user-avatar'
-      style={ { 'background-image': `url("${image}")` } }
-    />
 
     return image ? userAvatar : defaultAvatar
   }
 
   buildUser(user: LightdmUsers) {
     return <div class='user-choice' key={ user.username }>
-      <p class='time'> { this.currentTime } </p>
+      <p class='time'> { this.isSupportFullApi ? '' : this.currentTime } </p>
       { this.buildUserAvatar(user?.image) }
       <div class='user-name'> { user?.display_name } </div>
     </div>

src/components/base/settings/SettingsThemes.tsx

@@ -30,10 +30,10 @@ export default class SettingsThemes extends Vue {
         this.themes.map(theme => {
           const isActiveTheme = theme.name === this.activeTheme.name
 
-          return <div
+          return <img
             class={`user-settings-theme ${isActiveTheme ? 'active' : ''}`}
             onClick={() => AppModule.changeTheme(theme.name)}
-            style={`background: url(${this.setImage(theme.name.toLowerCase())}) no-repeat center/cover`}
+            src={this.setImage(theme.name.toLowerCase())}
           />
         })
       }

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

@@ -32,6 +32,7 @@ export default class SettingsGeneral extends Vue {
 
     const hasQyery = Object.keys(this.$route.query).length
     if (hasQyery) { this.$router.replace({}) }
+    window.location.reload()
   }
 
   changeTheme() {

src/store/app.ts

@@ -28,7 +28,7 @@ export interface AppState extends AppSettings {
   themes: AppTheme[];
   getMainSettings: AppSettings;
   activeTheme: AppTheme;
-  battery?: LightDMBattery;
+  battery: LightDMBattery | null;
   brightness?: number;
   username: string;
   desktops: LightdmSession[];
@@ -45,7 +45,7 @@ class App extends VuexModule implements AppState {
   username = LightdmHandler.username
   password = ''
   defaultColor = '#6BBBED'
-  battery?: LightDMBattery = undefined
+  battery: LightDMBattery = null
   brightness = 0
 
   users = LightdmHandler?.users

src/style/components/settings/index.styl

@@ -13,6 +13,9 @@
 
 .user-settings-theme
   height 150px
+  display block
+  width 100%
+  object-fit cover
   border-radius 12px
   cursor pointer
   position relative

src/style/components/settings/users.styl

@@ -23,7 +23,7 @@
 
 .settings-user-image
   border-radius 50%
-  width 100%
+  width 102px
-  height 100%
+  height 102px
   background-size cover
   background-position center

src/style/index.styl

@@ -39,18 +39,3 @@
       transition-duration 0.01ms !important
       scroll-behavior auto !important
 
-
-// @media screen and (-moz-min-device-pixel-ratio: 2), 
-//        screen and (-o-min-device-pixel-ratio: 2/1), 
-//        screen and (-webkit-min-device-pixel-ratio: 2), 
-//        screen and (min-device-pixel-ratio: 2)
-//   body
-//     zoom 2
-
-// @media screen and (-webkit-min-device-pixel-ratio: 2)
-//   body
-//     zoom 2
-
-@media screen and (min-width: 3000px) and (min-height: 1200px)
-  body
-    zoom 2

src/style/setup.styl

@@ -76,9 +76,6 @@ textarea,
 select
   font inherit
 
-img:not([alt]) 
-  filter blur(10px)
-
 @media (prefers-reduced-motion: reduce)
   *
     animation-duration 0.01ms !important

src/utils/lightdm.ts

@@ -167,7 +167,7 @@ if (lightdmDebug) {
   } as any
 }
 
-const isSupportFullApi = 'battery_data' in (window.lightdm || {})
+const isSupportFullApi = 'battery_data' in (window.lightdm || {}) || 'brightness' in (window.lightdm || {})
 
 class LightdmWebkit {
   protected _inputErrorTimer!: null | NodeJS.Timeout