From 497f36d568700a0340513085152d57fd669152a1 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 6 Feb 2020 23:59:01 +0300
Subject: [PATCH] Add styles for setting input and buttons

---
 src/views/settings/components/Frontend.vue    |  6 ++--
 src/views/settings/components/Http.vue        |  2 +-
 src/views/settings/components/Inputs.vue      |  2 +-
 src/views/settings/components/Logger.vue      |  2 +-
 src/views/settings/components/Setting.vue     | 29 +++++++++++++------
 src/views/settings/components/Upload.vue      |  2 +-
 .../inputComponents/EditableKeywordInput.vue  |  6 ++--
 .../inputComponents/MascotsInput.vue          |  8 ++---
 .../components/inputComponents/PruneInput.vue |  4 +--
 .../inputComponents/RateLimitInput.vue        |  6 ++--
 src/views/settings/styles/main.scss           | 24 +++++++++++++++
 11 files changed, 63 insertions(+), 28 deletions(-)

diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 9696bb4f..1772bbbc 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -4,12 +4,12 @@
       <setting :setting-group="frontend" :data="frontendData"/>
     </el-form>
     <el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
-      <el-form-item label="Assets:"/>
+      <el-form-item label="Assets:" class="settings-input"/>
       <setting :setting-group="assets" :data="assetsData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
-      <el-form-item label="Emoji:"/>
+      <el-form-item label="Emoji:" class="settings-input"/>
       <setting :setting-group="emoji" :data="emojiData"/>
     </el-form>
     <div class="line"/>
@@ -18,7 +18,7 @@
     </el-form>
     <div class="line"/>
     <el-form ref="markupData" :model="markupData" :label-width="labelWidth">
-      <el-form-item label="Markup settings:"/>
+      <el-form-item label="Markup settings:" class="settings-input"/>
       <setting :setting-group="markup" :data="markupData"/>
     </el-form>
     <div class="submit-button-container">
diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue
index cd450076..ae35ddea 100644
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@@ -4,7 +4,7 @@
       <setting :setting-group="http" :data="httpData"/>
     </el-form>
     <el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
-      <el-form-item label="Cors plug config:"/>
+      <el-form-item label="Cors plug config:" class="settings-input"/>
       <setting :setting-group="corsPlug" :data="corsPlugData"/>
     </el-form>
     <div class="line"/>
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index feec9fda..b2773fd1 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -83,7 +83,7 @@
         class="expl"
         v-html="getFormattedDescription(setting.description)"/>
     </el-form-item>
-    <el-tooltip v-if="isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end">
+    <el-tooltip v-if="canBeDeleted && isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end">
       <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting"/>
     </el-tooltip>
   </div>
diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue
index 0c21158a..ff4ab6b2 100644
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@@ -13,7 +13,7 @@
     </el-form>
     <div class="line"/>
     <el-form ref="quackData" :model="quackData" :label-width="labelWidth">
-      <el-form-item label="Quack logger:"/>
+      <el-form-item label="Quack logger:" class="settings-input"/>
       <setting :setting-group="quack" :data="quackData"/>
     </el-form>
     <div class="submit-button-container">
diff --git a/src/views/settings/components/Setting.vue b/src/views/settings/components/Setting.vue
index 82f8419f..e5a7310d 100644
--- a/src/views/settings/components/Setting.vue
+++ b/src/views/settings/components/Setting.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading">
-    <el-form-item v-if="settingGroup.description" class="description-container">
+    <el-form-item v-if="settingGroup.description" class="description-container settings-input">
       <span class="description" v-html="getFormattedDescription(settingGroup.description)"/>
     </el-form-item>
     <div v-if="settingGroup.key === 'Pleroma.Emails.Mailer'">
@@ -37,14 +37,19 @@
               :nested="true"/>
           </div>
           <div v-else>
-            <el-form-item>
-              <span slot="label">
-                {{ setting.label }}:
-                <el-tooltip v-if="canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
-                  <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting(setting.key)"/>
-                </el-tooltip>
-              </span>
-            </el-form-item>
+            <div class="input-container">
+              <el-form-item class="settings-input">
+                <span slot="label">
+                  {{ setting.label }}:
+                  <el-tooltip v-if="isDesktop && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
+                    <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting(setting.key)"/>
+                  </el-tooltip>
+                </span>
+              </el-form-item>
+              <el-tooltip v-if="isMobile && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
+                <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>
+              </el-tooltip>
+            </div>
             <div v-for="subSetting in setting.children" :key="subSetting.key">
               <inputs
                 :setting-group="settingGroup"
@@ -91,6 +96,12 @@ export default {
       const adapter = this.$store.state.settings.settings[':pleroma']['Pleroma.Emails.Mailer'][':adapter']
       return this.settingGroup.children.filter(child => child.group && child.group.includes(adapter))
     },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     loading() {
       return this.$store.state.settings.loading
     }
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index b485dc10..2d824c6c 100644
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@@ -4,7 +4,7 @@
       <setting :setting-group="upload" :data="uploadData"/>
     </el-form>
     <el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-width="labelWidth">
-      <el-form-item class="description-container description">
+      <el-form-item class="description-container description settings-input">
         <span class="description"><p>Pleroma.Uploaders.Local</p></span>
       </el-form-item>
       <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
diff --git a/src/views/settings/components/inputComponents/EditableKeywordInput.vue b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
index 0f5eb0d1..69fa6f54 100644
--- a/src/views/settings/components/inputComponents/EditableKeywordInput.vue
+++ b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
@@ -4,7 +4,7 @@
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="pattern" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-input :value="getValue(element)" placeholder="replacement" class="value-input" @input="parseEditableKeyword($event, 'value', element)"/>
-        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
@@ -12,7 +12,7 @@
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-input-number :value="getValue(element)" :min="0" size="large" class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
-        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
@@ -20,7 +20,7 @@
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-select :value="getValue(element)" multiple filterable allow-create class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
-        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
       <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
diff --git a/src/views/settings/components/inputComponents/MascotsInput.vue b/src/views/settings/components/inputComponents/MascotsInput.vue
index b4ad6980..4f4ec9f2 100644
--- a/src/views/settings/components/inputComponents/MascotsInput.vue
+++ b/src/views/settings/components/inputComponents/MascotsInput.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
     <div v-for="mascot in data" :key="getId(mascot)" class="mascot-container">
-      <el-form-item label="Name" label-width="100px">
+      <el-form-item label="Name" label-width="85px" class="settings-input">
         <div class="mascot-name-container">
           <el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>
-          <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
+          <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
         </div>
       </el-form-item>
-      <el-form-item label="URL" label-width="100px">
+      <el-form-item label="URL" label-width="85px" class="settings-input">
         <el-input :value="getUrl(mascot)" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', mascot)"/>
       </el-form-item>
-      <el-form-item label="Mime type" label-width="100px">
+      <el-form-item label="Mime type" label-width="85px" class="settings-input">
         <el-input :value="getMimeType(mascot)" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', mascot)"/>
       </el-form-item>
     </div>
diff --git a/src/views/settings/components/inputComponents/PruneInput.vue b/src/views/settings/components/inputComponents/PruneInput.vue
index f24176bb..a37f22c2 100644
--- a/src/views/settings/components/inputComponents/PruneInput.vue
+++ b/src/views/settings/components/inputComponents/PruneInput.vue
@@ -5,7 +5,7 @@
       <el-radio label=":maxlen">Limit-based</el-radio>
       <el-radio label=":maxage">Time-based</el-radio>
     </el-radio-group>
-    <el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left">
+    <el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left" class="settings-input">
       <el-input-number
         :value="data[1]"
         :min="0"
@@ -14,7 +14,7 @@
         class="top-margin"
         @change="updateIntInput($event, ':maxlen')"/>
     </el-form-item>
-    <el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left">
+    <el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left" class="settings-input">
       <el-input-number
         :value="data[1]"
         :min="0"
diff --git a/src/views/settings/components/inputComponents/RateLimitInput.vue b/src/views/settings/components/inputComponents/RateLimitInput.vue
index 5328b347..bb2da3e6 100644
--- a/src/views/settings/components/inputComponents/RateLimitInput.vue
+++ b/src/views/settings/components/inputComponents/RateLimitInput.vue
@@ -18,7 +18,7 @@
       </div>
     </div>
     <div v-if="rateLimitAuthUsers">
-      <el-form-item label="Unauthenticated users:" label-width="180px" class="rate-limit">
+      <el-form-item label="Unauthenticated users:" label-width="180px" class="rate-limit settings-input">
         <el-input
           :value="rateLimitUnauthUsers[0]"
           placeholder="scale"
@@ -31,7 +31,7 @@
           class="limit-input"
           @input="parseRateLimiter($event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
       </el-form-item>
-      <el-form-item label="Authenticated users:" label-width="180px" class="rate-limit">
+      <el-form-item label="Authenticated users:" label-width="180px" class="rate-limit settings-input">
         <el-input
           :value="rateLimitAuthUsers[0]"
           placeholder="scale"
@@ -45,7 +45,7 @@
           @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
       </el-form-item>
       <div class="limit-button-container">
-        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
         <p class="expl limit-expl">Set limit for all users</p>
       </div>
     </div>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 66a0d2a8..f9662d3b 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -104,6 +104,10 @@
   .keyword-inner-input {
     margin-bottom: 22px;
   }
+  label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .limit-button-container {
     display: flex;
     align-items: baseline;
@@ -205,12 +209,23 @@
 
   @media only screen and (max-width: 760px),
     (min-device-width: 768px) and (max-device-width: 1024px) {
+    .description > p {
+      line-height: 18px;
+      margin: 0 0 7px 0;
+    }
+    .description-container.settings-input {
+      margin-bottom: 0;
+    }
     .input-container {
       width: 100%;
       .settings-delete-button {
         margin: 4px 7px 0 7px;
       }
     }
+    .setting-label {
+      display: flex;
+      justify-content: space-between;
+    }
     .settings-input {
       display: inline-block;
       width: 90%;
@@ -253,9 +268,18 @@
     .icons-button-container {
       line-height: 24px;
     }
+    .keyword-inner-input {
+      margin-bottom: 10px;
+    }
     .line {
       margin-bottom: 10px;
     }
+    .mascot-container {
+      margin-bottom: 5px;
+      .settings-input {
+        width: 100%;
+      }
+    }
     .name-input {
       width: 40%;
       margin-right: 5px