feat(UI): light theme

2025-06-05 21:59:22 +02:00 · 2021-04-03 11:21:58 +02:00
parent 0783f8b57e
commit 280697698e
29 changed files with 799 additions and 265 deletions
--- a/src/renderer/components/BaseContextMenu.vue
+++ b/src/renderer/components/BaseContextMenu.vue
@ -71,7 +71,6 @@ export default {
 <style lang="scss">
 .context {
  display: flex;
-  color: $body-font-color;
  font-size: 16px;
  z-index: 400;
  justify-content: center;
@ -87,7 +86,6 @@ export default {
  .context-container {
    min-width: 100px;
    z-index: 10;
-    box-shadow: 0 0 2px 0 #000;
    padding: 0;
    background: #1d1d1d;
    border-radius: 0.1rem;
@ -111,14 +109,10 @@ export default {
        position: absolute;
        left: 100%;
        top: 0;
-        background: #1d1d1d;
-        box-shadow: 0 0 2px 0 #000;
        min-width: 100px;
      }

      &:hover {
-        background: $primary-color;
-
        .context-submenu {
          display: block;
          visibility: visible;
--- a/src/renderer/components/BaseTextEditor.vue
+++ b/src/renderer/components/BaseTextEditor.vue
@ -102,8 +102,6 @@ export default {

 <style lang="scss" scoped>
 .editor-wrapper {
-  border-bottom: 1px solid #444;
-
  .editor {
    width: 100%;
  }
@ -113,17 +111,4 @@ export default {
  display: inline-block;
  width: 17px;
 }
-
-.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
-  background-color: #c9561a99;
-}
-
-.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
-  background-color: #c9571a33;
-  border: none;
-}
-
-.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight {
-  color: #e0d00c;
-}
 </style>
--- a/src/renderer/components/BaseUploadInput.vue
+++ b/src/renderer/components/BaseUploadInput.vue
@ -63,13 +63,11 @@ export default {

 <style lang="scss" scoped>
 .file-uploader {
-  border: 0.05rem solid $bg-color-light;
  border-radius: 0.1rem;
  height: 1.8rem;
  line-height: 1.2rem;
  display: flex;
  cursor: pointer;
-  background-color: $bg-color-gray;
  transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
  position: relative;
  flex: 1 1 auto;
@ -80,8 +78,6 @@ export default {

  .file-uploader-message {
    display: flex;
-    border-right: 0.05rem solid $bg-color-light;
-    background-color: $bg-color;
  }

  .file-uploader-input {
@ -105,7 +101,6 @@ export default {
 :disabled {
  .file-uploader {
    cursor: not-allowed;
-    background-color: #151515;
    opacity: 0.5;
  }
 }
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@ -140,20 +140,29 @@
                        <div class="column col-12 h6 text-uppercase mb-2">
                           {{ $t('message.applicationTheme') }}
                        </div>
-                        <div class="column col-6 c-hand theme-block" :class="{'selected': applicationTheme === 'dark'}">
+                        <div
+                           class="column col-6 c-hand theme-block"
+                           :class="{'selected': applicationTheme === 'dark'}"
+                           @click="changeApplicationTheme('dark')"
+                        >
                           <img :src="require('@/images/dark.png').default" class="img-responsive img-fit-cover s-rounded">
-                           <div class="theme-name">
+                           <div class="theme-name text-light">
                              <i class="mdi mdi-moon-waning-crescent mdi-48px" />
                              <div class="h6 mt-4">
                                 {{ $t('word.dark') }}
                              </div>
                           </div>
                        </div>
-                        <div class="column col-6 theme-block disabled" :class="{'selected': applicationTheme === 'light'}">
-                           <div class="theme-name">
+                        <div
+                           class="column col-6 c-hand theme-block"
+                           :class="{'selected': applicationTheme === 'light'}"
+                           @click="changeApplicationTheme('light')"
+                        >
+                           <img :src="require('@/images/light.png').default" class="img-responsive img-fit-cover s-rounded">
+                           <div class="theme-name text-dark">
                              <i class="mdi mdi-white-balance-sunny mdi-48px" />
                              <div class="h6 mt-4">
-                                 {{ $t('word.light') }} (Coming)
+                                 {{ $t('word.light') }}
                              </div>
                           </div>
                        </div>
@ -352,6 +361,7 @@ ORDER BY
         changeLocale: 'settings/changeLocale',
         changeAutoComplete: 'settings/changeAutoComplete',
         changeLineWrap: 'settings/changeLineWrap',
+         changeApplicationTheme: 'settings/changeApplicationTheme',
         changeEditorTheme: 'settings/changeEditorTheme',
         updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
      }),
@ -415,7 +425,6 @@ ORDER BY
          top: 0;
          height: 100%;
          width: 100%;
-          text-shadow: 0 0 8px #000;
        }
      }
    }
--- a/src/renderer/components/ModalSettingsUpdate.vue
+++ b/src/renderer/components/ModalSettingsUpdate.vue
@ -92,9 +92,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss">
-.empty {
-  color: $body-font-color;
-}
-</style>
--- a/src/renderer/components/QueryEditor.vue
+++ b/src/renderer/components/QueryEditor.vue
@ -312,19 +312,6 @@ export default {
  width: 17px;
 }

-.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
-  background-color: #c9561a99;
-}
-
-.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
-  background-color: #c9571a33;
-  border: none;
-}
-
-.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight {
-  color: #e0d00c;
-}
-
 .ace_gutter-cell.ace_breakpoint {
  &::before {
    content: '\F0403';
--- a/src/renderer/components/TheFooter.vue
+++ b/src/renderer/components/TheFooter.vue
@ -64,13 +64,11 @@ export default {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    background: $primary-color;
    padding: 0 0.2rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
-    box-shadow: 0 0 1px 0 #000;

    .footer-elements {
      list-style: none;
@ -88,10 +86,6 @@ export default {
        &.footer-link {
          cursor: pointer;
          transition: background 0.2s;
-
-          &:hover {
-            background: rgba($color: #fff, $alpha: 0.1);
-          }
        }
      }
    }
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@ -36,6 +36,10 @@

      <div class="settingbar-bottom-elements">
         <ul class="settingbar-elements">
+            <li class="settingbar-element btn btn-link ex-tooltip">
+               <i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
+               <span class="ex-tooltip-content">{{ $t('word.scratchpad') }}</span>
+            </li>
            <li class="settingbar-element btn btn-link ex-tooltip" @click="showSettingModal('general')">
               <i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" :class="{' badge badge-update': hasUpdates}" />
               <span class="ex-tooltip-content">{{ $t('word.settings') }}</span>
@ -117,9 +121,7 @@ export default {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
-    background: $bg-color-light;
    padding: 0;
-    box-shadow: 0 0 1px 0 #000;
    z-index: 9;

    .settingbar-top-elements {
@ -134,7 +136,6 @@ export default {

    .settingbar-bottom-elements {
      padding-top: 0.5rem;
-      background: $bg-color-light;
      z-index: 1;
    }

@ -162,7 +163,6 @@ export default {
        }

        &.selected {
-          border-left-color: $body-font-color;
          opacity: 1;
        }

@ -171,12 +171,10 @@ export default {
            bottom: -10px;
            right: 0;
            position: absolute;
-            background: $success-color;
          }

          &.badge-update::after {
            bottom: initial;
-            background: $primary-color;
          }
        }
      }
--- a/src/renderer/components/TheTitleBar.vue
+++ b/src/renderer/components/TheTitleBar.vue
@ -102,12 +102,10 @@ export default {
    display: flex;
    position: relative;
    justify-content: space-between;
-    background: $bg-color-light;
    align-items: center;
    height: $titlebar-height;
    -webkit-app-region: drag;
    user-select: none;
-    box-shadow: 0 0 1px 0 #000;
    z-index: 9999;

    .titlebar-resizer {
@ -149,11 +147,6 @@ export default {

        &:hover {
          opacity: 1;
-          background: rgba($color: #fff, $alpha: 0.2);
-        }
-
-        &.close-button:hover {
-          background: red;
        }
      }
    }
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@ -304,7 +304,6 @@ export default {
    height: calc(100vh - #{$excluding-size});

    .tab-block {
-      background: $bg-color-light;
      margin-top: 0;
      flex-direction: row;
      align-items: flex-start;
@ -324,7 +323,6 @@ export default {

        > a {
          padding: 0.2rem 0.8rem;
-          color: $body-font-color;
          cursor: pointer;
          display: flex;
          align-items: center;
@ -355,7 +353,6 @@ export default {

        &.tools-dropdown {
          .tab-link:focus {
-            color: $primary-color;
            opacity: 1;
            outline: 0;
            box-shadow: none;
@ -374,11 +371,6 @@ export default {
              white-space: nowrap;
              border: 0;

-              &:hover {
-                color: $primary-color;
-                background: $bg-color-gray;
-              }
-
              .tool-icon {
                line-height: 1;
                display: inline-block;
@ -414,11 +406,9 @@ export default {
      .th {
        position: sticky;
        top: 0;
-        background: $bg-color;
        border: 1px solid;
        border-left: none;
        border-bottom-width: 2px;
-        border-color: $bg-color-light;
        padding: 0;
        font-weight: 700;
        font-size: 0.7rem;
@ -433,7 +423,6 @@ export default {
      .td {
        border-right: 1px solid;
        border-bottom: 1px solid;
-        border-color: $bg-color-light;
        padding: 0 0.4rem;
        text-overflow: ellipsis;
        max-width: 200px;
@ -443,8 +432,6 @@ export default {
        position: relative;

        &:focus {
-          box-shadow: inset 0 0 0 1px $body-font-color;
-          background: rgba($color: #000, $alpha: 0.3);
          outline: none;
        }
      }
--- a/src/renderer/components/WorkspaceConnectPanel.vue
+++ b/src/renderer/components/WorkspaceConnectPanel.vue
@ -1,6 +1,6 @@
 <template>
   <div class="columns">
-      <div class="column col-12 empty text-light">
+      <div class="column col-12 empty">
         <div class="empty-icon">
            <i class="mdi mdi-48px mdi-power-plug-off" />
         </div>
--- a/src/renderer/components/WorkspaceExploreBar.vue
+++ b/src/renderer/components/WorkspaceExploreBar.vue
@ -460,8 +460,6 @@ export default {
    justify-content: flex-start;
    align-items: center;
    text-align: left;
-    background: $bg-color-gray;
-    box-shadow: 0 0 1px 0 #000;
    z-index: 8;
    flex: initial;
    position: relative;
--- a/src/renderer/components/WorkspaceExploreBarSchema.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchema.vue
@ -171,7 +171,8 @@ export default {
      ...mapGetters({
         getLoadedSchemas: 'workspaces/getLoadedSchemas',
         getWorkspace: 'workspaces/getWorkspace',
-         getSearchTerm: 'workspaces/getSearchTerm'
+         getSearchTerm: 'workspaces/getSearchTerm',
+         applicationTheme: 'settings/getApplicationTheme'
      }),
      searchTerm () {
         return this.getSearchTerm(this.connection.uid);
@ -239,7 +240,10 @@ export default {
      },
      piePercentage (val) {
         const perc = val / this.maxSize * 100;
-         return { background: `conic-gradient(lime ${perc}%, white 0)` };
+         if (this.applicationTheme === 'dark')
+            return { background: `conic-gradient(lime ${perc}%, white 0)` };
+         else
+            return { background: `conic-gradient(teal ${perc}%, silver 0)` };
      },
      setBreadcrumbs (payload) {
         if (this.breadcrumbs.schema === payload.schema && this.breadcrumbs.table === payload.table) return;
@ -262,7 +266,6 @@ export default {
  .database-name {
    position: sticky;
    top: 0;
-    background: $bg-color-gray;
    z-index: 2;
  }

@ -308,26 +311,15 @@ export default {
  .database-name,
  .misc-name {
    &:hover {
-      color: $body-font-color;
-      background: $bg-color-light;
      border-radius: 2px;
    }
  }

-  a.table-name {
-    &:hover {
-      color: inherit;
-      background: inherit;
-    }
-  }
-
  .menu-item {
    line-height: 1.2;
    position: relative;

    &:hover {
-      color: $body-font-color;
-      background: rgba($color: #fff, $alpha: 0.05);
      border-radius: 2px;
    }
  }
--- a/src/renderer/components/WorkspacePropsForeignModal.vue
+++ b/src/renderer/components/WorkspacePropsForeignModal.vue
@ -2,6 +2,7 @@
   <ConfirmModal
      :confirm-text="$t('word.confirm')"
      size="medium"
+      class="options-modal"
      @confirm="confirmForeignsChange"
      @hide="$emit('hide')"
   >
@ -36,7 +37,7 @@
                        v-for="foreign in foreignProxy"
                        :key="foreign._id"
                        class="tile tile-centered c-hand mb-1 p-1"
-                        :class="{'selected-foreign': selectedForeignID === foreign._id}"
+                        :class="{'selected-element': selectedForeignID === foreign._id}"
                        @click="selectForeign($event, foreign._id)"
                     >
                        <div class="tile-icon">
@ -371,23 +372,16 @@ export default {
  }

  &:hover {
-    background: $bg-color-light;
-
    .tile-action {
      opacity: 1;
    }
  }

-  &.selected-foreign {
-    background: $bg-color-light;
+  &.selected-element {
    opacity: 1;
  }
 }

-.editor-col {
-  border-left: 2px solid $bg-color-light;
-}
-
 .fields-list {
  max-height: 80px;
  overflow: auto;
--- a/src/renderer/components/WorkspacePropsFunctionParamsModal.vue
+++ b/src/renderer/components/WorkspacePropsFunctionParamsModal.vue
@ -2,6 +2,7 @@
   <ConfirmModal
      :confirm-text="$t('word.confirm')"
      size="medium"
+      class="options-modal"
      @confirm="confirmParametersChange"
      @hide="$emit('hide')"
   >
@ -36,7 +37,7 @@
                        v-for="param in parametersProxy"
                        :key="param._id"
                        class="tile tile-centered c-hand mb-1 p-1"
-                        :class="{'selected-param': selectedParam === param._id}"
+                        :class="{'selected-element': selectedParam === param._id}"
                        @click="selectParameter($event, param._id)"
                     >
                        <div class="tile-icon">
@ -249,23 +250,16 @@ export default {
  }

  &:hover {
-    background: $bg-color-light;
-
    .tile-action {
      opacity: 1;
    }
  }

-  &.selected-param {
-    background: $bg-color-light;
+  &.selected-element {
    opacity: 1;
  }
 }

-.editor-col {
-  border-left: 2px solid $bg-color-light;
-}
-
 .fields-list {
  max-height: 300px;
  overflow: auto;
--- a/src/renderer/components/WorkspacePropsIndexesModal.vue
+++ b/src/renderer/components/WorkspacePropsIndexesModal.vue
@ -2,6 +2,7 @@
   <ConfirmModal
      :confirm-text="$t('word.confirm')"
      size="medium"
+      class="options-modal"
      @confirm="confirmIndexesChange"
      @hide="$emit('hide')"
   >
@ -36,7 +37,7 @@
                        v-for="index in indexesProxy"
                        :key="index._id"
                        class="tile tile-centered c-hand mb-1 p-1"
-                        :class="{'selected-index': selectedIndexID === index._id}"
+                        :class="{'selected-element': selectedIndexID === index._id}"
                        @click="selectIndex($event, index._id)"
                     >
                        <div class="tile-icon">
@ -256,23 +257,16 @@ export default {
  }

  &:hover {
-    background: $bg-color-light;
-
    .tile-action {
      opacity: 1;
    }
  }

-  &.selected-index {
-    background: $bg-color-light;
+  &.selected-element {
    opacity: 1;
  }
 }

-.editor-col {
-  border-left: 2px solid $bg-color-light;
-}
-
 .fields-list {
  max-height: 300px;
  overflow: auto;
--- a/src/renderer/components/WorkspacePropsRoutineParamsModal.vue
+++ b/src/renderer/components/WorkspacePropsRoutineParamsModal.vue
@ -2,6 +2,7 @@
   <ConfirmModal
      :confirm-text="$t('word.confirm')"
      size="medium"
+      class="options-modal"
      @confirm="confirmParametersChange"
      @hide="$emit('hide')"
   >
@ -36,7 +37,7 @@
                        v-for="param in parametersProxy"
                        :key="param._id"
                        class="tile tile-centered c-hand mb-1 p-1"
-                        :class="{'selected-param': selectedParam === param._id}"
+                        :class="{'selected-element': selectedParam === param._id}"
                        @click="selectParameter($event, param._id)"
                     >
                        <div class="tile-icon">
@ -280,23 +281,16 @@ export default {
  }

  &:hover {
-    background: $bg-color-light;
-
    .tile-action {
      opacity: 1;
    }
  }

-  &.selected-param {
-    background: $bg-color-light;
+  &.selected-element {
    opacity: 1;
  }
 }

-.editor-col {
-  border-left: 2px solid $bg-color-light;
-}
-
 .fields-list {
  max-height: 300px;
  overflow: auto;
--- a/src/renderer/components/WorkspaceQueryTab.vue
+++ b/src/renderer/components/WorkspaceQueryTab.vue
@ -232,7 +232,6 @@ export default {
        .btn {
          display: flex;
          align-self: center;
-          color: $body-font-color;
          margin-right: 0.4rem;
        }
      }
--- a/src/renderer/components/WorkspaceTableTab.vue
+++ b/src/renderer/components/WorkspaceTableTab.vue
@ -289,10 +289,6 @@ export default {
 .export-dropdown {
  .menu {
    min-width: 100%;
-
-    .menu-item a:hover {
-      background: $bg-color-gray;
-    }
  }
 }
 </style>