From c5db4803f54c4596c903b3319c822ef2f182c5d2 Mon Sep 17 00:00:00 2001
From: Warinyourself <warinyourself@gmail.com>
Date: Mon, 28 Nov 2022 10:08:59 +0300
Subject: [PATCH] Fix bugs with images

---
 src/components/app/AppBar.tsx                 | 20 +++++++++----------
 src/components/base/BrightIcon.tsx            | 19 ++++++++++++++++++
 src/components/base/UserAvatar.tsx            | 11 +++++-----
 .../base/settings/SettingsThemes.tsx          |  4 ++--
 .../base/settings/general/SettingsGeneral.tsx |  1 +
 src/store/app.ts                              |  4 ++--
 src/style/components/settings/index.styl      |  3 +++
 src/style/components/settings/users.styl      |  4 ++--
 src/style/index.styl                          | 15 --------------
 src/style/setup.styl                          |  3 ---
 src/utils/lightdm.ts                          |  2 +-
 11 files changed, 45 insertions(+), 41 deletions(-)
 create mode 100644 src/components/base/BrightIcon.tsx

diff --git a/src/components/app/AppBar.tsx b/src/components/app/AppBar.tsx
index 29397e2..176c590 100644
--- a/src/components/app/AppBar.tsx
+++ b/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 {
-  get batteryLevel() {
-    return AppModule.batteryLevel
+export default class AppBar extends Vue {
+  get showBattery() {
+    return AppModule.battery
   }
 
-  get brightLevel() {
-    return AppModule.brightness
+  get showBright() {
+    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 />
-        <div class="app-bar__bright">
-          <AppIcon name="brightness" class="brightness-icon"/>
-          { this.brightLevel }
-        </div>
+        { this.showBattery && <BatteryIcon /> }
+        { this.showBright && <BrightIcon /> }
       </div>
     </div>
   }
diff --git a/src/components/base/BrightIcon.tsx b/src/components/base/BrightIcon.tsx
new file mode 100644
index 0000000..3506832
--- /dev/null
+++ b/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>
+  }
+}
diff --git a/src/components/base/UserAvatar.tsx b/src/components/base/UserAvatar.tsx
index 03316f7..9faf31a 100644
--- a/src/components/base/UserAvatar.tsx
+++ b/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
-      class='user-avatar'
-      style={ { 'background-image': `url("${image}")` } }
-    />
+    const userAvatar = <img class='user-avatar' src={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>
diff --git a/src/components/base/settings/SettingsThemes.tsx b/src/components/base/settings/SettingsThemes.tsx
index 4d035c4..4926756 100644
--- a/src/components/base/settings/SettingsThemes.tsx
+++ b/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())}
           />
         })
       }
diff --git a/src/components/base/settings/general/SettingsGeneral.tsx b/src/components/base/settings/general/SettingsGeneral.tsx
index 8cd631e..92e4a96 100644
--- a/src/components/base/settings/general/SettingsGeneral.tsx
+++ b/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() {
diff --git a/src/store/app.ts b/src/store/app.ts
index 417eae7..5fac217 100644
--- a/src/store/app.ts
+++ b/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
diff --git a/src/style/components/settings/index.styl b/src/style/components/settings/index.styl
index 57c492f..1e8aa6c 100644
--- a/src/style/components/settings/index.styl
+++ b/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
diff --git a/src/style/components/settings/users.styl b/src/style/components/settings/users.styl
index 2dab002..5eaf1d8 100644
--- a/src/style/components/settings/users.styl
+++ b/src/style/components/settings/users.styl
@@ -23,7 +23,7 @@
 
 .settings-user-image
   border-radius 50%
-  width 100%
-  height 100%
+  width 102px
+  height 102px
   background-size cover
   background-position center
diff --git a/src/style/index.styl b/src/style/index.styl
index ba2ad22..2edd383 100644
--- a/src/style/index.styl
+++ b/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
diff --git a/src/style/setup.styl b/src/style/setup.styl
index f1c4e96..23c0ebd 100644
--- a/src/style/setup.styl
+++ b/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
diff --git a/src/utils/lightdm.ts b/src/utils/lightdm.ts
index 28c9c33..743fece 100644
--- a/src/utils/lightdm.ts
+++ b/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