diff --git a/src/manifest.json b/src/manifest.json index 250e074fc..552281cb0 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -10,6 +10,7 @@ "unlimitedStorage", "activeTab", "tabs", + "sidePanel", "declarativeNetRequestWithHostAccess" ], "optional_permissions": [ @@ -55,5 +56,14 @@ ], "matches": ["*://*/*"] } - ] + ], + "side_panel": { + "default_title": "Superhero Wallet", + "default_path": "index.html" + }, + "sidebar_action": { + "default_title": "Superhero Wallet", + "default_panel": "index.html", + "default_icon": "icons/icon_128.png" + } } diff --git a/src/popup/App.vue b/src/popup/App.vue index 21bec157a..958f5e791 100644 --- a/src/popup/App.vue +++ b/src/popup/App.vue @@ -5,8 +5,6 @@ class="app-wrapper" :class="{ 'show-header': delayedShowHeader, - 'is-desktop-web': IS_WEB && !IS_MOBILE_DEVICE, - 'is-extension': IS_EXTENSION, }" > @@ -140,13 +138,20 @@ export default defineComponent({ || routeMeta.value?.hideHeader )); - function setDocumentHeight() { - document.documentElement.style.setProperty( - '--height', - IS_MOBILE_APP && IS_IOS ? '100vh' : '100%', - ); - if (IS_EXTENSION) { + /** + * Set classes on element to allow CSS to behave differently based on the environment. + * Used mostly by `env-*` mixins set in `mixins.scss` file. + */ + function setHtmlEnvironmentClasses() { + if (IS_MOBILE_APP) { + document.documentElement.classList.add( + 'is-mobile', + (IS_IOS) ? 'is-mobile-ios' : 'is-mobile-android', + ); + } else if (IS_EXTENSION) { document.documentElement.classList.add('is-extension'); + } else if (IS_WEB) { + document.documentElement.classList.add('is-web'); } } @@ -235,7 +240,7 @@ export default defineComponent({ }); onMounted(() => { - setDocumentHeight(); + setHtmlEnvironmentClasses(); checkExtensionUpdates(); restoreLanguage(); restoreTransferSendForm(); @@ -289,6 +294,12 @@ export default defineComponent({ @use '@/styles/mixins'; .app { + --screen-padding-x: 16px; + --screen-border-radius: 0; + --screen-bg-color: #{$color-bg-app}; + --header-height: 0; + --gap: 12px; + position: relative; display: flex; justify-content: center; @@ -297,12 +308,6 @@ export default defineComponent({ height: 100%; .app-wrapper { - --screen-padding-x: 16px; - --screen-border-radius: 0; - --screen-bg-color: #{$color-bg-app}; - --header-height: 0; - --gap: 12px; - @extend %text-body; position: relative; @@ -340,34 +345,36 @@ export default defineComponent({ width: 100%; } - &.is-extension, - &.is-desktop-web { - width: $extension-width; - height: $extension-height; + &.show-header { + --header-height: 40px; } + } + + @include mixins.env-mobile-ios { + height: 100vh; + } - // Imitate the appearance of the mobile/extension app in a desktop browser + // Setting the extension popup window size + @include mixins.env-extension { + min-width: $extension-width; + min-height: $extension-height; + } - &.is-desktop-web { + @include mixins.env-web { + // Imitate the appearance of the mobile/extension app by displaying it in a box + // TODO consider full-screen + @include mixins.desktop { --screen-border-radius: #{$border-radius-app}; - overflow: hidden; - box-shadow: $color-border 0 0 0 1px; - transform: translate(0, 0); // Create custom viewport for fixed elements - - @include mixins.mobile { - --screen-border-radius: 0; + width: $extension-width; + height: $extension-height; - width: 100%; - height: 100%; - overflow: visible; - box-shadow: none; + .app-wrapper { + overflow: hidden; + box-shadow: $color-border 0 0 0 1px; + transform: translate(0, 0); // Create custom viewport for fixed elements } } - - &.show-header { - --header-height: 40px; - } } } diff --git a/src/popup/components/ListItemWrapper.vue b/src/popup/components/ListItemWrapper.vue index 1d6c87794..d0e4277e0 100644 --- a/src/popup/components/ListItemWrapper.vue +++ b/src/popup/components/ListItemWrapper.vue @@ -38,7 +38,7 @@ export default defineComponent({ &:hover { background-color: rgba($color-bg-4-hover, 0.5); - @include mixins.mobile { + @include mixins.env-mobile { background-color: transparent; } } diff --git a/src/popup/router/index.ts b/src/popup/router/index.ts index af0cb9043..e869910e0 100644 --- a/src/popup/router/index.ts +++ b/src/popup/router/index.ts @@ -155,6 +155,7 @@ if (IS_MOBILE_APP) { } }); + // TODO establish if we still need this router.afterEach((to) => { if (to.path === '/') { document.body.classList.remove('color-bg-app'); diff --git a/src/styles/global.scss b/src/styles/global.scss index 5a4afe760..69cf528f6 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -33,7 +33,6 @@ html.is-extension { // Fixes issue with extension not rendering properly // .tabs-inner & .ion-page classes are added by Ionic - ion-tabs, .tabs-inner, ion-router-outlet, @@ -44,16 +43,10 @@ html.is-extension { body { position: unset; } - - .app { - width: $extension-width; - height: $extension-height; - } } // When scanner is active we need to hide everything else // because the scanner will show-up behind the webview - body.scanner-active { background-color: transparent; @@ -109,7 +102,6 @@ ion-content { } /** remove left-right padding **/ - &::part(scroll) { --padding-end: 0; --padding-start: 0; @@ -117,23 +109,22 @@ ion-content { } } -html, -body, -#app { - height: var(--height); -} - -body, -#app { - --ion-text-color: $color-white; - --ion-font-family: $font-sans; +body { + height: 100%; margin: 0; background-color: $color-black; &.color-bg-app { background-color: $color-bg-app; } +} + +#app { + --ion-text-color: $color-white; + --ion-font-family: $font-sans; + + height: 100%; @include mixins.desktop { display: flex; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 360b9e2f5..9fba3c7af 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -12,6 +12,34 @@ } } +// Based on class added to html element by App.vue component +@mixin env-mobile { + @at-root html.is-mobile & { + @content; + } +} + +// Based on class added to html element by App.vue component +@mixin env-mobile-ios { + @at-root html.is-mobile-ios & { + @content; + } +} + +// Running in extension popup or extension side panel +@mixin env-extension { + @at-root html.is-extension & { + @content; + } +} + +// Running in regular browser window +@mixin env-web { + @at-root html.is-web & { + @content; + } +} + @mixin collapsed { @media screen and (max-height: 250px) { @content;