Adaptive for high DPI screens

src/App.tsx

@@ -1,10 +1,10 @@
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import Mousetrap from 'mousetrap'
 import { AppModule } from '@/store/app'
-import { PageModule } from './store/page'
+import { PageModule } from '@/store/page'
-import { Debounce, focusInputPassword } from './utils/helper'
+import { Debounce, focusInputPassword, setCSSVariable } from '@/utils/helper'
 import { hotkeys } from '@/utils/hotkeys'
-import { initTimer } from './utils/time'
+import { initTimer } from '@/utils/time'
 
 @Component
 export default class MainApp extends Vue {
@@ -22,6 +22,13 @@ export default class MainApp extends Vue {
     AppModule.syncSettingsWithCache()
   }
 
+  setZoomVariable() {
+    const defaultRatio = 2 // depends on screen resolution
+    const ratio = window.devicePixelRatio
+    const zoom = ratio < defaultRatio ? defaultRatio - ratio + 1 : ratio / defaultRatio
+    setCSSVariable('--zoom', (zoom) + '')
+  }
+
   created() {
     AppModule.setUpSettings()
     this.initKeybinds()

src/store/app.ts

@@ -18,7 +18,7 @@ import {
 } from '@/models/app'
 
 import { LightdmSession, LightdmUsers } from '@/models/lightdm'
-import { isDifferentRoute, parseQueryValue, randomize, randomizeSettingsTheme } from '@/utils/helper'
+import { isDifferentRoute, parseQueryValue, randomize, randomizeSettingsTheme, setCSSVariable } from '@/utils/helper'
 import { AppThemes, defaultTheme } from '@/utils/constant'
 import { version } from '@/../package.json'
 import { LightdmHandler } from '@/utils/lightdm'
@@ -45,7 +45,7 @@ class App extends VuexModule implements AppState {
   username = LightdmHandler.username
   password = ''
   defaultColor = '#6BBBED'
-  battery: LightDMBattery = null
+  battery: LightDMBattery | null = null
   brightness = 0
 
   users = LightdmHandler?.users
@@ -238,8 +238,8 @@ class App extends VuexModule implements AppState {
       }
     }
 
-    document.documentElement.style.setProperty('--color-active', activeColor)
+    setCSSVariable('--color-active', activeColor)
-    document.documentElement.style.setProperty('--color-bg', color.background)
+    setCSSVariable('--color-bg', color.background)
   }
 
   @Action

src/style/components/login.styl

@@ -5,6 +5,10 @@
 
 .login-view
   --login-width 330px
+  --resolution calc(2 * var(--zoom))
+  --half-width calc(100vw / var(--resolution))
+  --half-height calc(100vh / var(--resolution))
+
   padding 12px
   position absolute 
   border-radius 20px
@@ -17,15 +21,15 @@
   height 230px
   z-index 10
   &.login-view--center
-    transform translate(calc(100vw / 2 - 50%), calc(100vh / 2 - 50%))
+    transform translate(calc(var(--half-width) - 50%), calc(var(--half-height) - 50%))
   &.login-view--top
-    transform translate(calc(100vw / 2 - 50%), calc(var(--gap) + var(--height-bar)))
+    transform translate(calc(var(--half-width) - 50%), calc(var(--gap) + var(--height-bar)))
   &.login-view--right
-    transform translate(calc(100vw - 100% - 12px), calc(100vh / 2 - 50%))
+    transform translate(calc(100vw - 100% - 12px), calc(var(--half-height) - 50%))
   &.login-view--bottom
-    transform translate(calc(100vw / 2 - 50%), calc(100vh - 100% - 12px))
+    transform translate(calc(var(--half-width) - 50%), calc(100vh - 100% - 12px))
   &.login-view--left
-    transform translate(12px, calc(100vh / 2 - 50%))
+    transform translate(12px, calc(var(--half-height) - 50%))
 
   .slash
     stroke-dasharray 29
@@ -47,9 +51,9 @@
 
 .login-content-settings
   .login-view
-    transform translate(calc(100vw / 2 - 50%), calc(100vh / 2 - 50%))
+    transform translate(calc(var(--half-width) - 50%), calc(var(--half-height) - 50%))
-    height 50vmin
+    height calc(50vmin / var(--zoom))
-    width 80vmin
+    width calc(80vmin / var(--zoom))
   .user-choice
     margin-bottom 8px
     display flex

src/style/general.styl

@@ -14,5 +14,8 @@
 .transition-group
   position: relative
 
+.login-view, .app-bar, .shutdown-block
+  zoom: var(--zoom)
+
 // .background-image
 //   mask url('../assets/images/masks/main.svg') 50% 50% / 100% 80%  no-repeat border-box

src/style/index.styl

@@ -14,6 +14,7 @@
   --color-focus white
   --background-block: rgba(0,0,0,0.45)
   --gap: 12px
+  --zoom: 1
   --height-bar: 36px
   font-size 16px
 

src/utils/constant.ts

@@ -1,13 +1,12 @@
-import { AppTheme, AppInputThemeGeneral } from '@/models/app'
+import { AppTheme } from '@/models/app'
 import {
   pxratio,
   hueSlider,
   randomButton,
-  setActiveColor,
   brightnessSlider,
   buildInputSlider,
   buildInvertCheckbox,
-  buildInputColor
+  setCSSVariable
 } from './helper'
 
 const background = '#22233D'
@@ -226,7 +225,7 @@ export const AppThemes: AppTheme[] = [
         options: {
           class: 'w-50'
         },
-        callback: setActiveColor
+        callback: (value) => setCSSVariable('--color-active', value + '')
       }
     ],
     color: {

src/utils/helper.ts

@@ -179,8 +179,8 @@ export function randomizeSettingsTheme(theme: AppTheme) {
   })
 }
 
-export function setActiveColor(color: AppInputThemeValue) {
+export function setCSSVariable(property: string, value: string) {
-  document.documentElement.style.setProperty('--color-active', color + '')
+  document.documentElement.style.setProperty(property, value)
 }
 
 export const randomButton: AppInputButton = {

src/utils/lightdm.ts

@@ -314,7 +314,7 @@ class LightdmNode extends LightdmWebkit {
 
   public async updateBatteryData(): Promise<void> {
     const module = await getAppModule()
-    module.SET_STATE_APP({ key: 'battery', value: window.lightdm?.battery_data })
+    module.SET_STATE_APP({ key: 'battery', value: window.lightdm?.battery_data || null })
   }
 
   public async updateBrightData(): Promise<void> {