ENH - map icon

frontend/src/assets/img/app-icons/map.svg

@@ -1,19 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-  <defs>
-    <linearGradient id="background" x1="18" y1="8" x2="110" y2="120" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#58c7ff"/>
-      <stop offset="1" stop-color="#1478df"/>
-    </linearGradient>
-    <clipPath id="icon">
-      <rect width="128" height="128" rx="28"/>
-    </clipPath>
-  </defs>
-  <g clip-path="url(#icon)">
-    <rect width="128" height="128" fill="url(#background)"/>
-    <path d="M-6 94 34 60 56 72 91 36 134 52v82H-6Z" fill="#69c674"/>
-    <path d="m-8 44 34 18 29-20 27 22 51-35" fill="none" stroke="#f7f3db" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="m-8 44 34 18 29-20 27 22 51-35" fill="none" stroke="#f0c24b" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M91 22c-14 0-25 11-25 25 0 19 25 45 25 45s25-26 25-45c0-14-11-25-25-25Z" fill="#ef4d46" stroke="#fff" stroke-width="4"/>
-    <circle cx="91" cy="47" r="8" fill="#fff"/>
-  </g>
-</svg>

frontend/src/components/AppIcon.vue

@@ -27,7 +27,7 @@ const unreadCount = computed(() =>
   props.app.id === 'mail' ? mail.counts.unread : 0,
 )
 const notificationBadgeColors = {
-  bg: 'bg-red-500',
+  bg: 'bg-[#ff3b30]',
   text: 'text-white',
 }
 

frontend/src/config/apps.ts

@@ -16,7 +16,7 @@ import calculatorIcon from '@/assets/img/app-icons/calculator.webp'
 import cameraIcon from '@/assets/img/app-icons/camera.webp'
 import clockIcon from '@/assets/img/app-icons/clock.webp'
 import mailIcon from '@/assets/img/app-icons/mail.webp'
-import mapIcon from '@/assets/img/app-icons/map.svg'
+import mapIcon from '@/assets/img/app-icons/map.webp'
 import notesIcon from '@/assets/img/app-icons/notes.webp'
 import photosIcon from '@/assets/img/app-icons/gallery.webp'
 import settingsIcon from '@/assets/img/app-icons/settings.webp'

frontend/src/views/apps/SettingsApp.vue

@@ -77,6 +77,10 @@ type SubmenuView = Exclude<SettingsView, 'root' | 'notification-detail'>
 
 const FACTORY_RESET_DURATION_MS = 60_000
 const FACTORY_RESET_CIRCUMFERENCE = 2 * Math.PI * 48
+const FRAME_PICKER_WIDTH = 240
+const FRAME_PICKER_HEIGHT = 140
+const FRAME_PICKER_INSET = 8
+const FRAME_PICKER_GAP = 8
 
 const phone = usePhoneStore()
 const account = useAccountStore()
@@ -89,6 +93,9 @@ const framePickerOpened = ref(false)
 const framePickerTarget = computed(
   () => framePickerButton.value?.$el as HTMLElement | undefined,
 )
+const framePickerPortalTarget = computed(() =>
+  framePickerTarget.value?.closest<HTMLElement>('.phone-screen'),
+)
 const accountMode = ref<'login' | 'register'>('login')
 const accountEmail = ref('')
 const accountPassword = ref('')
@@ -253,65 +260,52 @@ function selectFrame(frame: PhoneFrameId): void {
   framePickerOpened.value = false
 }
 
-async function openFramePicker(): Promise<void> {
+function openFramePicker(): void {
   const target = framePickerTarget.value
-  const screen = target?.closest<HTMLElement>('.phone-screen')
-  const wrapper = target?.closest<HTMLElement>('.phone-resolution-wrapper')
-  const popover = document.querySelector<HTMLElement>(
-    '.settings-frame-popover',
-  )
-  if (!target || !screen || !wrapper || !popover) {
+  const screen = framePickerPortalTarget.value
+  if (!target || !screen) {
     console.error('Unable to position the Settings frame color picker')
     return
   }
 
-  const framePickerScale =
-    wrapper.getBoundingClientRect().width / wrapper.offsetWidth
-  popover.style.width = `${240 * framePickerScale}px`
-  popover.style.marginLeft = '0px'
-  popover.style.marginTop = '0px'
-
-  const pickerGrid = popover.querySelector<HTMLElement>('[role="group"]')
-  if (pickerGrid) {
-    pickerGrid.style.gap = `${20 * framePickerScale}px`
-    pickerGrid.style.padding = `${20 * framePickerScale}px`
-    pickerGrid.querySelectorAll<HTMLElement>('button').forEach((button) => {
-      button.style.width = `${40 * framePickerScale}px`
-      button.style.height = `${40 * framePickerScale}px`
-    })
-  }
-
-  framePickerOpened.value = true
-  await nextTick()
-  await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
-
   const screenRect = screen.getBoundingClientRect()
   const targetRect = target.getBoundingClientRect()
-  const popoverRect = popover.getBoundingClientRect()
-  const inset = 8 * framePickerScale
-  const gap = 8 * framePickerScale
-  const minimumLeft = screenRect.left + inset
-  const maximumLeft = screenRect.right - popoverRect.width - inset
+  const screenScale = screenRect.width / screen.offsetWidth
+  const targetLeft = (targetRect.left - screenRect.left) / screenScale
+  const targetTop = (targetRect.top - screenRect.top) / screenScale
+  const targetWidth = targetRect.width / screenScale
+  const targetHeight = targetRect.height / screenScale
   const desiredLeft =
-    targetRect.left + targetRect.width / 2 - popoverRect.width / 2
-  const aboveTop = targetRect.top - popoverRect.height - gap
+    targetLeft + targetWidth / 2 - FRAME_PICKER_WIDTH / 2
+  const aboveTop =
+    targetTop - FRAME_PICKER_HEIGHT - FRAME_PICKER_GAP
   const desiredTop =
-    aboveTop >= screenRect.top + inset ? aboveTop : targetRect.bottom + gap
+    aboveTop >= FRAME_PICKER_INSET
+      ? aboveTop
+      : targetTop + targetHeight + FRAME_PICKER_GAP
 
-  const clampedLeft = Math.max(
-    minimumLeft,
-    Math.min(desiredLeft, maximumLeft),
+  screen.style.setProperty(
+    '--settings-frame-picker-left',
+    `${Math.max(
+      FRAME_PICKER_INSET,
+      Math.min(
+        desiredLeft,
+        screen.offsetWidth - FRAME_PICKER_WIDTH - FRAME_PICKER_INSET,
+      ),
+    )}px`,
   )
-  const clampedTop = Math.max(
-    screenRect.top + inset,
-    Math.min(
-      desiredTop,
-      screenRect.bottom - popoverRect.height - inset,
-    ),
+  screen.style.setProperty(
+    '--settings-frame-picker-top',
+    `${Math.max(
+      FRAME_PICKER_INSET,
+      Math.min(
+        desiredTop,
+        screen.offsetHeight - FRAME_PICKER_HEIGHT - FRAME_PICKER_INSET,
+      ),
+    )}px`,
   )
 
-  popover.style.marginLeft = `${clampedLeft - popoverRect.left}px`
-  popover.style.marginTop = `${clampedTop - popoverRect.top}px`
+  framePickerOpened.value = true
 }
 
 function selectRingtone(ringtone: RingtoneId): void {
@@ -979,12 +973,11 @@ onBeforeUnmount(() => {
           </k-list-item>
         </k-list>
 
-        <Teleport to="body">
+        <Teleport v-if="framePickerPortalTarget" :to="framePickerPortalTarget">
           <k-popover
             :opened="framePickerOpened"
-            :target="framePickerTarget"
             :class="[
-              'settings-frame-popover',
+              'settings-frame-popover !absolute !z-[200] !left-[var(--settings-frame-picker-left)] !top-[var(--settings-frame-picker-top)]',
               { dark: phone.isDarkMode },
             ]"
             @backdropclick="framePickerOpened = false"

sky_phone/source/html/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sky Phone</title>
-    <script type="module" crossorigin src="./assets/sky-index-_kcEMkLZ.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/sky-index--1RlStC1.css">
+    <script type="module" crossorigin src="./assets/sky-index-CJXoU8N6.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/sky-index-DmFxDrzx.css">
   </head>
   <body>
     <div id="app"></div>