theme switcher

luckspt · Dec 2, 2021 · bf3a146 · bf3a146
1 parent 364fa25
commit bf3a146
Show file tree

Hide file tree

Showing 13 changed files with 138 additions and 563 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,6 +14,6 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'max-len': 'off'
+    'max-len': 'off',
   },
 };
diff --git a/src/App.vue b/src/App.vue
@@ -37,8 +37,6 @@ import Vue from 'vue';
 export default Vue.extend({
   created() {
     console.log('Hola que hace');
-    this.$vs.setTheme('dark');
-
     // Login pela primeira vez
     if (this.$route.name !== 'Login' && !sessionStorage.getItem('user')) {
       this.$router.push({ name: 'Login' });
@@ -91,13 +89,13 @@ body {
   height: 720px !important;
   padding: 0;
   margin: 0;
-  background-color: $dark;
+  background-color: rgb(var(--vs-dark));
 }
 
 #cont {
   width: 100vw;
   height: 100vh;
   transition: background 3s;
-  background-color: $primary;
+  background-color: rgb(var(--vs-primary));
 }
 </style>
diff --git a/src/components/Messages.vue b/src/components/Messages.vue
@@ -22,7 +22,7 @@
       <div class="ic-message-content">
         <span class="ic-author-info">
           {{ parseAutor(msgs[0].autor) }}
-          <span v-if="msgs[0].autor === 'Jogo'" class="ic-system-tag">
+          <span v-if="msgs[0].autor === 'Jogo'" class="ic-system-tag rounded-corners">
             Sistema
           </span>
         </span>
@@ -49,7 +49,7 @@
 
           <!-- FICHEIRO -->
           <a
-            class="vs-button vs-button--icon vs-button--dark vs-button--default"
+            class="vs-button vs-button--icon vs-button--darker vs-button--default"
             :style="`text-decoration:none;width:${mensagem.ficheiro.length}em;`"
             v-if="mensagem.ficheiro"
             :href="mensagem.ficheiro"
@@ -84,7 +84,7 @@ $timeColor: #72767d;
 }
 
 .ic-message {
-  background-color: $dark;
+  background-color: rgb(var(--vs-dark));
   display: flex;
   font-size: 0.9em;
   margin: 1em 0;
@@ -110,7 +110,7 @@ $timeColor: #72767d;
 
   .ic-message-time {
     position: absolute;
-    color: $dark;
+    color: rgb(var(--vs-dark));
     margin-left:-50px;
     font-size: 12px;
   }
@@ -128,7 +128,7 @@ $timeColor: #72767d;
   }
 
   .ic-message-body:hover {
-    background-color: darken($dark, 1%);
+    background-color: rgb(var(--message-hover-color));
 
     .ic-message-time {
       color: $timeColor;
@@ -147,11 +147,10 @@ $timeColor: #72767d;
     }
 
     .ic-system-tag {
-      background-color: $primary;
+      background-color: rgb(var(--vs-primary));
       font-size: 0.8em;
       margin-left: 5px;
       padding: 3px;
-      border-radius: 3px;
       line-height: 100%;
       text-transform: uppercase;
     }

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vs-navbar color="dark" shadow text-white class="rounded-corners">
+    <vs-navbar dark shadow text-white class="rounded-corners">
       <template #left>
         <img class="py-2" src="@/assets/img/logo.png" height="50" />
         <vs-navbar-item @click="goHome">Concord</vs-navbar-item>
@@ -11,6 +11,18 @@
       </template>
 
       <template #right>
+        <vs-switch
+          v-model="lightMode"
+          @click="changeTheme">
+          <template #on>
+            <i class='fa-solid fa-sun mr-2'></i>
+            Claro
+          </template>
+          <template #off>
+            <i class='fa-solid fa-moon mr-2'></i>
+            Escuro
+          </template>
+        </vs-switch>
         <vs-button flat @click="goHelp">
           Ajuda
         </vs-button>
@@ -29,6 +41,12 @@
   </div>
 </template>
 
+<style lang="scss" scoped>
+.vs-switch {
+  height: 34px;
+}
+</style>
+
 <script lang="ts">
 import Vue from 'vue';
 import CriarGrupo from './dialogs/CriarGrupo.vue';
@@ -38,40 +56,17 @@ export default Vue.extend({
   data() {
     return {
       dialogCriarGrupo: false,
-      items: [
-        {
-          label: 'Criar',
-          icon: 'pi pi-fw pi-plus',
-          items: [
-            {
-              label: 'Grupo',
-              icon: 'pi pi-fw pi-users',
-              command: () => {
-                alert('Não implementado.');
-                this.$data.dialogCriarGrupo = true;
-              },
-            },
-            {
-              label: 'Contacto',
-              icon: 'pi pi-fw pi-user',
-              command: () => {
-                alert('Não implementado.');
-              },
-            },
-
-          ],
-        },
-        {
-          label: 'Ajuda',
-          icon: 'pi pi-fw pi-question-circle',
-          command: () => {
-            alert('Não implementado.');
-          },
-        },
-      ],
+      lightMode: false,
     };
   },
+  mounted() {
+    this.lightMode = localStorage.getItem('vsTheme') !== 'dark';
+    this.$vs.setTheme(this.lightMode ? 'light' : 'dark');
+  },
   methods: {
+    changeTheme() {
+      this.$vs.toggleTheme(this.lightMode ? 'light' : 'dark');
+    },
     goHome() {
       if (this.$route.name !== 'Chat') this.$router.push({ name: 'Chat' });
     },
@@ -95,4 +90,5 @@ export default Vue.extend({
     },
   },
 });
+
 </script>
diff --git a/src/components/dialogs/AlterarFundo.vue b/src/components/dialogs/AlterarFundo.vue
@@ -78,7 +78,7 @@
 
 <style lang="scss" scoped>
 .imgselecionada {
-  border: 2px $danger solid;
+  border: 2px rgb(var(--vs-danger)) solid;
 }
 </style>
 

diff --git a/src/components/dialogs/CriarGrupo.vue b/src/components/dialogs/CriarGrupo.vue
@@ -51,45 +51,25 @@
 
         <!-- ADICIONAR P/MAIL -->
         <!-- TODO add botão confirmar; espaço c/lista de mails; botão remover cada mail; -->
-        <vs-input
-          primary
+        <vs-select
           block
-          class="mt-5"
-          label="Adicionar participante por e-mail"
-          type="text"
-          v-model="txtEmail"
-          @input="emailErrors"
-          @click-icon="add"
-          icon-after>
-          <template #icon>
-            <i class='fa-solid fa-plus' id="btnAdicionar"></i>
-          </template>
-
-          <template
-            #message-danger
-            v-if="errosEmail">
-            {{ errosEmail }}
-          </template>
-        </vs-input>
+          primary
+          class="mt-4"
+          label="Contactos por email"
+          multiple
+          filter
+          collapse-chips
+          v-model="selecionadosEmail"
+          @input="contactosErrors">
 
-        <!-- Contactos email -->
-        <div class="grid">
-          <vs-row justify="center" align="center">
-            <vs-col
-              v-for="(email, i) in selecionadosEmail"
-              :key="i">
-              <span
-                class="vs-select__chips__chip">
-                {{ email }}
-                <!-- TODO meter reticencias se comprimento > x; hover se comprimento > x -->
-                <!-- TODO @click -->
-                <span class="vs-select__chips__chip__close">
-                  <i class="vs-icon-close vs-icon-hover-less"></i>
-                </span>
-              </span>
-            </vs-col>
-          </vs-row>
-        </div>
+          <vs-option
+            v-for="(contacto, i) in contactosEmail"
+            :key="i"
+            :label="`${contacto.nome} ${contacto.email}`"
+            :value="contacto">
+            {{ contacto.nome }} <span>{{ contacto.email }}</span>
+          </vs-option>
+        </vs-select>
       </div>
     </div>
 
@@ -122,12 +102,6 @@
 .vs-select__chips__input {
   color: white;
 }
-
-// TODO get parent e por no parent
-#btnAdicionar {
-  border: 5px $primary solid;
-  border-radius: 10px;
-}
 </style>
 
 <script lang="ts">
@@ -149,6 +123,7 @@ export default Vue.extend({
     errosEmail: '',
     errosContactos: '',
     contactos: [],
+    contactosEmail: [],
 
   }),
   computed: {
@@ -165,6 +140,18 @@ export default Vue.extend({
 
         return 0;
       });
+
+    this.contactosEmail = this.$store.state.contactos.recentes
+      .filter((c: Contacto) => !c.grupo && !!c.email)
+      .sort((a: Contacto, b: Contacto) => {
+        if (a.nome < b.nome) return -1;
+        if (a.nome > b.nome) return 1;
+
+        return 0;
+      });
+
+    console.log(this.contactosEmail);
+
     this.resetFields();
   },
   methods: {

diff --git a/src/components/dialogs/Jogos.vue b/src/components/dialogs/Jogos.vue
@@ -84,12 +84,12 @@
 
 <style lang="scss" scoped>
 .imgselecionada {
-  border: 2px $danger solid;
+  border: 2px rgb(var(--vs-danger)) solid;
 }
 
 #msgErroJogos {
   font-size: 11.2px;
-  color: $danger;
+  color: rgb(var(--vs-danger));
   margin-left:6px;
 }
 </style>

diff --git a/src/containers/ChatContainer.vue b/src/containers/ChatContainer.vue
@@ -246,19 +246,19 @@
 
 <style lang="scss">
 #chamadaIconContactos {
-  color: $danger;
+  color: rgb(var(--vs-danger));
 }
 
 #chatCallHeader {
-  border-bottom: 3px $darker solid;
+  border-bottom: 3px rgb(var(--vs-darker)) solid;
   border-radius: 20px;
 }
 
 #leftArrow {
   font-size: 10em;
   margin-top: 200px;
   margin-left: 70px;
-  color: $primary;
+  color: rgb(var(--vs-primary));
 }
 
 .vs-table table {

diff --git a/src/main.ts b/src/main.ts
@@ -8,6 +8,7 @@ import store from './store';
 
 import 'vuesax/dist/vuesax.min.css';
 import '@/scss/helpers.scss';
+import '@/scss/_variables.scss';
 
 const ignoreWarnMessage = 'The .native modifier for v-on is only valid on components but it was used on <div>.';
 Vue.config.warnHandler = (msg) => {
@@ -18,15 +19,16 @@ Vue.config.warnHandler = (msg) => {
 Vue.config.productionTip = false;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-Vue.use(Vuesax as any, {
-  colors: {
-    primary: '#7289da', // '#1a5cff',
-    success: '#46c93a',
-    danger: '#d80c0c',
-    warning: '#ffba00',
-    dark: '#141417',
-  },
-});
+// Vue.use(Vuesax as any, {
+//   colors: {
+//     primary: '#7289da', // '#1a5cff',
+//     success: '#46c93a',
+//     danger: '#d80c0c',
+//     warning: '#ffba00',
+//     dark: '#141417',
+//   },
+// });
+Vue.use(Vuesax as any);
 
 new Vue({
   router,