settings page update

src/components/settings/settings.vue

@@ -114,6 +114,12 @@
 
   &:last-child {
     border-bottom: none;
+    padding-bottom: 0;
+    margin-bottom: 1em;
+  }
+
+  select {
+    min-width: 10em;
   }
 
 
@@ -143,8 +149,12 @@
   }
 
   .btn {
-    margin-top: 1em;
     min-height: 28px;
+  }
+
+  .submit {
+    margin-top: 1em;
+    min-height: 30px;
     width: 10em;
   }
 }

src/components/style_switcher/style_switcher.vue

@@ -1,21 +1,62 @@
 <template>
+<div>
+  <div class="presets-container">
     <div>
-    <div>{{$t('settings.presets')}}
+      {{$t('settings.presets')}}
       <label for="style-switcher" class='select'>
         <select id="style-switcher" v-model="selected" class="style-switcher">
-          <option v-for="style in availableStyles" :value="style" :style="{
+          <option v-for="style in availableStyles"
+                  :value="style"
+                  :style="{
                           backgroundColor: style[1],
                           color: style[3]
-                  }">{{style[0]}}</option>
+                          }">
+            {{style[0]}}
+          </option>
         </select>
         <i class="icon-down-open"/>
       </label>
     </div>
-    <div>
+    <div class="import-export">
       <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
       <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
       <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
     </div>
+  </div>
+
+  <div class="preview-container">
+    <div :style="{
+                 '--btnRadius': btnRadiusLocal + 'px',
+                 '--inputRadius': inputRadiusLocal + 'px',
+                 '--panelRadius': panelRadiusLocal + 'px',
+                 '--avatarRadius': avatarRadiusLocal + 'px',
+                 '--avatarAltRadius': avatarAltRadiusLocal + 'px',
+                 '--tooltipRadius': tooltipRadiusLocal + 'px',
+                 '--attachmentRadius': attachmentRadiusLocal + 'px'
+                 }">
+      <div class="panel dummy">
+        <div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
+        <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
+          <div class="avatar" :style="{
+                                      'border-radius': avatarRadiusLocal + 'px'
+                                      }">
+            ( ͡° ͜ʖ ͡°)
+          </div>
+          <h4>Content</h4>
+          <br>
+          A bunch of more content and
+          <a :style="{ color: linkColorLocal }">a nice lil' link</a>
+          <i :style="{ color: blueColorLocal }" class="icon-reply"/>
+          <i :style="{ color: greenColorLocal }" class="icon-retweet"/>
+          <i :style="{ color: redColorLocal }" class="icon-cancel"/>
+          <i :style="{ color: orangeColorLocal }" class="icon-star"/>
+          <br>
+          <button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="color-container">
     <p>{{$t('settings.theme_help')}}</p>
     <div class="color-item">
@@ -59,6 +100,7 @@
       <input id="orangecolor-t" class="theme-color-in" type="text" v-model="orangeColorLocal">
     </div>
   </div>
+
   <div class="radius-container">
     <p>{{$t('settings.radii_help')}}</p>
     <div class="radius-item">
@@ -97,38 +139,11 @@
       <input id="tooltipradius-t" class="theme-radius-in" type="text" v-model="tooltipRadiusLocal">
     </div>
   </div>
-    <div :style="{
+
-                 '--btnRadius': btnRadiusLocal + 'px',
+  <div class="apply-container">
-                 '--inputRadius': inputRadiusLocal + 'px',
+    <button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button>
-                 '--panelRadius': panelRadiusLocal + 'px',
-                 '--avatarRadius': avatarRadiusLocal + 'px',
-                 '--avatarAltRadius': avatarAltRadiusLocal + 'px',
-                 '--tooltipRadius': tooltipRadiusLocal + 'px',
-                 '--attachmentRadius': attachmentRadiusLocal + 'px'
-                 }">
-      <div class="panel dummy">
-        <div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
-        <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
-          <div class="avatar" :style="{
-                                      'border-radius': avatarRadiusLocal + 'px'
-                                      }">
-            ( ͡° ͜ʖ ͡°)
-          </div>
-          <h4>Content</h4>
-          <br>
-          A bunch of more content and
-          <a :style="{ color: linkColorLocal }">a nice lil' link</a>
-          <i :style="{ color: blueColorLocal }" class="icon-reply"/>
-          <i :style="{ color: greenColorLocal }" class="icon-retweet"/>
-          <i :style="{ color: redColorLocal }" class="icon-cancel"/>
-          <i :style="{ color: orangeColorLocal }" class="icon-star"/>
-          <br>
-          <button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button>
-        </div>
-      </div>
-    </div>
-    <button class="btn" @click="setCustomTheme">{{$t('general.apply')}}</button>
   </div>
+</div>
 </template>
 
 <script src="./style_switcher.js"></script>
@@ -144,15 +159,19 @@
   color: var(--cRed, $fallback--cRed);
 }
 
+.apply-container,
 .radius-container,
-.color-container {
+.color-container,
+.presets-container {
   display: flex;
 
   p {
+    flex: 2 0 100%;
     margin-top: 2em;
     margin-bottom: .5em;
   }
 }
+
 .radius-container {
   flex-direction: column;
 }
@@ -162,6 +181,36 @@
   justify-content: space-between;
 }
 
+.presets-container {
+  justify-content: center;
+  .import-export {
+    display: flex;
+
+    .btn {
+      margin-left: .5em;
+    }
+  }
+}
+
+.preview-container {
+  border-top: 1px dashed;
+  border-bottom: 1px dashed;
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  margin: 1em -1em 0;
+  padding: 1em;
+
+  .btn {
+    margin-top: 1em;
+    min-height: 30px;
+    width: 10em;
+  }
+}
+
+.apply-container {
+  justify-content: center;
+}
+
 .radius-item,
 .color-item {
   min-width: 20em;
@@ -229,6 +278,7 @@
   flex: 0;
   min-width: 2em;
   cursor: pointer;
+  max-height: 29px;
 }
 
 .theme-preview-content {

src/i18n/messages.js

@@ -48,8 +48,8 @@ const de = {
     settings: 'Einstellungen',
     theme: 'Farbschema',
     presets: 'Voreinstellungen',
-    export_theme: 'Aktuelles Theme exportieren',
+    export_theme: 'Farbschema speichern',
-    import_theme: 'Gespeichertes Theme laden',
+    import_theme: 'Farbschema laden',
     invalid_theme_imported: 'Die ausgewählte Datei ist kein unterstütztes Pleroma-Theme. Keine Änderungen wurden vorgenommen.',
     theme_help: 'Benutze HTML Farbcodes (#rrggbb) um dein Farbschema anzupassen',
     radii_help: 'Kantenrundung (in Pixel) der Oberfläche anpassen',
@@ -293,8 +293,8 @@ const en = {
     settings: 'Settings',
     theme: 'Theme',
     presets: 'Presets',
-    export_theme: 'Export current theme',
+    export_theme: 'Save preset',
-    import_theme: 'Load saved theme',
+    import_theme: 'Load preset',
     theme_help: 'Use hex color codes (#rrggbb) to customize your color theme.',
     invalid_theme_imported: 'The selected file is not a supported Pleroma theme. No changes to your theme were made.',
     radii_help: 'Set up interface edge rounding (in pixels)',
@@ -1641,8 +1641,8 @@ const ru = {
     set_new_profile_background: 'Загрузить новый фон профиля',
     settings: 'Настройки',
     theme: 'Тема',
-    export_theme: 'Экспортировать текущую тему',
+    export_theme: 'Сохранить Тему',
-    import_theme: 'Загрузить сохранённую тему',
+    import_theme: 'Загрузить Тему',
     presets: 'Пресеты',
     theme_help: 'Используйте шестнадцатеричные коды цветов (#rrggbb) для настройки темы.',
     radii_help: 'Округление краёв элементов интерфейса (в пикселях)',