Merge branch 'appearance-tab' into shigusegubu-themes3

src/components/emoji_picker/emoji_picker.js

@@ -298,10 +298,6 @@ const EmojiPicker = {
       return this.emojiSize
     },
     itemPerRow () {
-      console.log(
-        this.emojiSize,
-        this.width
-      )
       return this.width ? Math.floor(this.width / this.emojiSize) : 6
     },
     activeGroupView () {

src/components/settings_modal/helpers/unit_setting.vue

@@ -9,6 +9,7 @@
     >
       <slot />
     </label>
+    {{ ' ' }}
     <input
       :id="path"
       class="input number-input"

src/components/settings_modal/tabs/appearance_tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :label="$t('settings.general')">
+  <div class="appearance-tab" :label="$t('settings.general')">
     <div class="setting-item">
       <h2>{{ $t('settings.theme') }}</h2>
       <ul
@@ -34,6 +34,9 @@
         </button>
       </ul>
     </div>
+    <div class="alert neutral theme-notice">
+      {{ $t("settings.style.appearance_tab_note") }}
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.scale_and_layout') }}</h2>
       <ul class="setting-list">
@@ -254,48 +257,56 @@
 <script src="./appearance_tab.js"></script>
 
 <style lang="scss">
-.column-settings {
+.appearance-tab {
-  display: flex;
+  .theme-notice {
-  justify-content: space-evenly;
+    padding: 0.5em;
-  flex-wrap: wrap;
+    margin: 1em;
-}
+  }
 
-.column-settings .size-label {
+  .column-settings {
-  display: block;
-  margin-bottom: 0.5em;
-  margin-top: 0.5em;
-}
-
-.theme-list {
-  list-style: none;
-  display: flex;
-  flex-wrap: wrap;
-  margin: -0.5em 0;
-  height: 25em;
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  border-radius: var(--roundness);
-  border: 1px solid var(--border);
-  padding: 0;
-
-  .theme-preview {
-    width: 19rem;
     display: flex;
-    flex-direction: column;
+    justify-content: space-evenly;
-    align-items: center;
+    flex-wrap: wrap;
-    margin: 0.5em;
+  }
 
-    &.placeholder {
+  .column-settings .size-label {
-      opacity: 0.2;
+    display: block;
-    }
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+  }
 
-    .preview-container {
+  .theme-list {
-      pointer-events: none;
+    list-style: none;
-      zoom: 0.5;
+    display: flex;
-      border: none;
+    flex-wrap: wrap;
-      border-radius: var(--roundness);
+    margin: -0.5em 0;
-      text-align: left;
+    height: 25em;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    padding: 0;
+
+    .theme-preview {
+      font-size: 1rem; // fix for firefox
+      width: 19rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0.5em;
+
+      &.placeholder {
+        opacity: 0.2;
+      }
+
+      .preview-container {
+        pointer-events: none;
+        zoom: 0.5;
+        border: none;
+        border-radius: var(--roundness);
+        text-align: left;
+      }
     }
   }
 }

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -1,4 +1,9 @@
 .theme-tab {
+  .deprecation-warning {
+    padding: 0.5em;
+    margin: 2em;
+  }
+
   padding-bottom: 2em;
 
   .preset-switcher {

src/components/settings_modal/tabs/theme_tab/theme_tab.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="theme-tab">
-    <div class="alert warning">
+    <div class="alert warning deprecation-warning">
       {{ $t("settings.style.themes2_outdated") }}
     </div>
     <div class="presets-container">

src/i18n/en.json

@@ -741,7 +741,8 @@
     "more_settings": "More settings",
     "style": {
       "custom_theme_used": "(Custom theme)",
-      "themes2_outdated": "Editor for Themes V2 is no longer supported and presented here for sake of legacy.",
+      "themes2_outdated": "Editor for Themes V2 is being phased out and will eventually be replaced with a new one that takes advantage of new Themes V3 engine. It should still work but experience might be degraded and inconsistent.",
+      "appearance_tab_note": "Changes on this tab do not affect the theme used, so exported theme will be different from what seen in the UI",
       "update_preview": "Update preview",
       "themes3": {
         "define": "Override",

src/panel.scss

@@ -61,7 +61,7 @@
 .panel-heading,
 .panel-footer {
   --panel-heading-height-padding: calc(var(--panelHeaderSize, 3.2rem) * 0.2);
-  --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1);
+  --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1564);
   --__panel-heading-height: var(--panelHeaderSize, 3.2em);
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 

test/unit/specs/services/theme_data/theme_data3.spec.js

@@ -66,7 +66,7 @@ describe('Theme Data 3', () => {
     this.timeout(5000)
 
     it('Test initialization without anything', () => {
-      const out = init({ ruleset: [], ultimateBackgroundColor: '#DEADAF' })
+      const out = init({ inputRuleset: [], ultimateBackgroundColor: '#DEADAF' })
 
       expect(out).to.have.property('eager')
       expect(out).to.have.property('lazy')
@@ -86,7 +86,7 @@ describe('Theme Data 3', () => {
 
     it('Test initialization with a basic palette', () => {
       const out = init({
-        ruleset: [{
+        inputRuleset: [{
           component: 'Root',
           directives: {
             '--bg': 'color | #008080',
@@ -109,7 +109,7 @@ describe('Theme Data 3', () => {
 
     it('Test initialization with opacity', () => {
       const out = init({
-        ruleset: [{
+        inputRuleset: [{
           component: 'Root',
           directives: {
             '--bg': 'color | #008080'