Merge pull request #55 from OkunaOrg/feature/theme-switcher

✨ theme switcher modal

assets/styles/global/modifiers/_theming.scss

@@ -188,6 +188,10 @@
   border-top: 1px solid var(--primary-invert-color-80) !important;
 }
 
+.ok-has-border-accent {
+  border: 1px solid var(--accent-color) !important;
+}
+
 .ok-has-border-bottom-accent {
   border-bottom: 1px solid var(--accent-color) !important;
 }

components/menus/OkUserMenu.vue

@@ -109,15 +109,19 @@
                 </nuxt-link>
             </li>
             <li>
-                <nuxt-link :to="'/'" class="has-no-hover-text-decoration ok-has-background-primary-highlight-hover">
+                <a
+                    href="javascript://"
+                    class="has-no-hover-text-decoration ok-has-background-primary-highlight-hover"
+                    @click="onThemesClick"
+                >
                             <span class="icon has-padding-right-10">
                                  <ok-customize-icon
                                          class="ok-svg-icon-primary-invert"></ok-customize-icon>
                             </span>
                     <span class="ok-has-text-primary-invert">
                                 {{$t('components.user_dropdown.themes')}}
                             </span>
-                </nuxt-link>
+                </a>
             </li>
             <li>
                 <nuxt-link :to="'/'" class="has-no-hover-text-decoration ok-has-background-primary-highlight-hover">
@@ -170,6 +174,7 @@
     import { OkAvatarSize } from "~/components/avatars/lib/OkAvatarSize";
     import { OkAvatarBorderRadius } from '~/components/avatars/lib/OkAvatarBorderRadius';
     import { BehaviorSubject } from '~/node_modules/rxjs';
+    import { IModalService } from "../../services/modal/IModalService";
 
     @Component({
         name: "OkUserMenu",
@@ -191,6 +196,7 @@
         };
 
         private userService: IUserService = okunaContainer.get<IUserService>(TYPES.UserService);
+        private modalService: IModalService = okunaContainer.get<IModalService>(TYPES.ModalService);
 
         tooltipOptions = {
             placement: 'bottom-end'
@@ -199,5 +205,12 @@
         get profileUrl(){
             return `/${this.$observables.loggedInUser.value.username}`;
         }
+
+        async onThemesClick() {
+            this.$emit('leaveMenu');
+            await this.modalService.openThemesModal({
+                title: this.$t('components.user_dropdown.themes').toString()
+            });
+        }
     }
-</script>
+</script>

pages/home/components/header/components/user-menu-dropdown/OkUserMenuDropdown.vue

@@ -21,7 +21,7 @@
         </button>
         <!-- This will be the content of the popover -->
         <div slot="popover" class="ok-has-background-primary has-border-radius-10 ok-has-border-primary-highlight">
-            <ok-user-menu></ok-user-menu>
+            <ok-user-menu @leaveMenu="handleLeaveMenu"></ok-user-menu>
         </div>
     </v-popover>
 </template>
@@ -72,5 +72,9 @@
             // Close tooltip
             this.dropdownIsOpen = false;
         }
+
+        handleLeaveMenu() {
+            this.dropdownIsOpen = false;
+        }
     }
 </script>

pages/home/components/modals/OkModals.vue

@@ -49,6 +49,9 @@
             <ok-connections-circles-picker-modal :return-data-setter="setModalReturnData"
                                     :params="activeModalParams"></ok-connections-circles-picker-modal>
         </b-modal>
+        <b-modal :active.sync="themesModalOpen" :trap-focus="true" @close="onModalClosed">
+            <ok-themes-modal :params="activeModalParams"></ok-themes-modal>
+        </b-modal>
     </div>
 </template>
 
@@ -82,6 +85,7 @@
     import OkConnectionsCirclesPickerModal
         from '~/pages/home/components/modals/components/OkConnectionsCirclesPickerModal.vue';
     import OkPostCommentActionsModal from '~/pages/home/components/modals/components/OkPostCommentActionsModal.vue';
+    import OkThemesModal from '~/pages/home/components/modals/components/OkThemesModal.vue';
 
     @Component({
         name: "OkModals",
@@ -91,7 +95,8 @@
             OkUserActionsModal,
             OkReportObjectModal,
             OkPostActionsModal,
-            OkCommunitiesListModal, OkPostCommentReactionsModal, OkPostReactionsModal, OkPostModal
+            OkCommunitiesListModal, OkPostCommentReactionsModal, OkPostReactionsModal, OkPostModal,
+            OkThemesModal
         },
         subscriptions: function () {
             return {
@@ -116,6 +121,7 @@
         communitiesListModalOpen: boolean = false;
         reportObjectModalOpen: boolean = false;
         connectionsCirclesPickerOpen: boolean = false;
+        themesModalOpen: boolean = false;
 
         private modalService: IModalService = okunaContainer.get<IModalService>(TYPES.ModalService);
 
@@ -148,6 +154,7 @@
             this.postCommentActionsModalOpened = activeModalValue === ModalType.postCommentActions;
             this.reportObjectModalOpen = activeModalValue === ModalType.reportObject;
             this.connectionsCirclesPickerOpen = activeModalValue === ModalType.connectionsCirclesPicker;
+            this.themesModalOpen = activeModalValue === ModalType.themes;
         }
     }
-</script>
+</script>

pages/home/components/modals/components/OkThemesModal.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="is-flex justify-center align-items-center" v-if="activeTheme">
+        <div class="ok-has-background-primary is-semi-rounded">
+            <div class="box ok-has-background-primary-highlight has-height-100-percent">
+                <span class="ok-has-text-primary-invert">{{ params.title }}</span>
+
+                <div class="is-flex justify-center align-items-center" v-if="curatedThemes && curatedThemes.length">
+                    <div
+                        class="ok-themes-wrapper has-padding-20"
+                        v-for="theme in curatedThemes"
+                        :key="theme.id"
+                        @click="onThemeClick(theme)"
+                    >
+                        <div class="ok-theme-circle has-margin-bottom-10" :class="{ 'ok-has-border-accent': theme === activeTheme }">
+                            <div class="accent-gradient" :style="getThemeGradientStyles(theme)"></div>
+                            <div class="primary" :style="getThemePrimaryStyles(theme)"></div>
+                        </div>
+                        <div class="ok-has-text-primary-invert is-size-7">{{ theme.name }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "nuxt-property-decorator";
+    import { BehaviorSubject } from "rxjs";
+    import { okunaContainer } from "~/services/inversify";
+    import { TYPES } from "~/services/inversify-types";
+    import { IThemeService } from "~/services/theme/IThemeService";
+    import { ITheme } from "~/models/common/theme/ITheme";
+    import { ThemeModalParams } from "~/services/modal/IModalService";
+
+    @Component({
+        name: "OkThemesModal",
+        subscriptions: function () {
+            return {
+                activeTheme: this["themeService"].activeTheme
+            };
+        }
+    })
+    export default class OkThemesModal extends Vue {
+        @Prop({
+            type: Object,
+            required: true
+        }) readonly params: ThemeModalParams;
+
+        $observables!: {
+            activeTheme: BehaviorSubject<ITheme | undefined>
+        }
+
+        private themeService: IThemeService = okunaContainer.get<IThemeService>(TYPES.ThemeService);
+
+        private curatedThemes: ITheme[] = this.themeService.getCuratedThemes();
+
+        getThemePrimaryStyles(theme: ITheme) {
+            return {
+                background: theme.primaryColor.hex()
+            };
+        }
+
+        getThemeGradientStyles(theme: ITheme) {
+            const [ from, to ] = theme.accentGradient.map(c => c.hex());
+            return {
+                background: from,
+                backgroundImage: `linear-gradient(180deg, ${from} 0%, ${to} 100%)`
+            };
+        }
+
+        onThemeClick(theme: ITheme) {
+            return this.themeService.setActiveTheme(theme);
+        }
+
+        onClosePressed() {
+            this.$parent["close"]();
+        }
+    }
+</script>
+
+<style lang="scss">
+    .ok-themes-modal {
+        max-width: 360px;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    .ok-themes-wrapper {
+        cursor: pointer;
+    }
+
+    .ok-theme-circle {
+        width: 40px;
+        height: 40px;
+        font-size: 0;
+        border-radius: 100%;
+        overflow: hidden;
+        transform: rotate(-45deg);
+        border: 3px solid transparent;
+        margin: 0 auto;
+
+        .primary, .accent-gradient {
+            width: 50%;
+            height: 40px;
+            display: inline-block;
+        }
+
+        &.ok-has-border-accent {
+            border-width: 3px !important;
+        }
+    }
+</style>

services/modal/IModalService.ts

@@ -36,6 +36,8 @@ export interface IModalService {
 
     openConnectionsCirclesPickerModal(params: ConnectionsCirclesPickerModalParams): Promise<void>;
 
+    openThemesModal(params: ThemeModalParams): Promise<void>;
+
     // Methods for OkModals component
     activeModal: BehaviorSubject<ModalType | undefined>
 
@@ -57,7 +59,8 @@ export type ModalParams =
     | CommunityActionsModalParams
     | PostCommentActionsModalParams
     | HashtagActionsModalParams
-    | ConnectionsCirclesPickerModalParams;
+    | ConnectionsCirclesPickerModalParams
+    | ThemeModalParams;
 
 export interface HttpListModalParams<T> {
     refresher: OkHttpListRefresher<T>;
@@ -127,3 +130,7 @@ export interface ReportObjectModalParams {
     extraData?: {[key: string]: any};
     onObjectReported: (object: any) => void;
 }
+
+export interface ThemeModalParams {
+    title: string;
+}

services/modal/ModalService.ts

@@ -5,7 +5,7 @@ import {
     IModalService,
     ModalParams, PostActionsModalParams, PostCommentActionsModalParams, PostCommentReactionsModalParams,
     PostModalParams,
-    PostReactionsModalParams, ReportObjectModalParams, UserActionsModalParams
+    PostReactionsModalParams, ReportObjectModalParams, UserActionsModalParams, ThemeModalParams
 } from '~/services/modal/IModalService';
 // From outside Vue instance
 import { BehaviorSubject } from '~/node_modules/rxjs';
@@ -104,6 +104,11 @@ export class ModalService implements IModalService {
         this.historyService.setPathSilently(originalPath);
     }
 
+    async openThemesModal(params: ThemeModalParams): Promise<void> {
+        this.ensureHasNoActiveModal();
+        return this.openModal(ModalType.themes, params);
+    }
+
 
     notifyModalClosed(): void {
         this.ensureHasActiveModal();
@@ -163,4 +168,4 @@ export class ModalService implements IModalService {
     }
 
 
-}
+}

services/modal/lib/ModalType.ts

@@ -10,6 +10,7 @@ export class ModalType {
     static hashtagActions = new ModalType('HashtagActions');
     static postCommentActions = new ModalType('PostCommentActions');
     static connectionsCirclesPicker = new ModalType('ConnectionsCirclesPicker');
+    static themes = new ModalType('Themes');
 
 
     static _values: ModalType[] = [
@@ -22,6 +23,7 @@ export class ModalType {
         ModalType.communityActions,
         ModalType.postCommentActions,
         ModalType.connectionsCirclesPicker,
+        ModalType.themes,
     ];
 
     static values() {