Add button for rebooting the instance in desktop, tablet and mobile interface

src/lang/en.js

@@ -363,7 +363,8 @@ export default {
     assets: 'Assets',
     emoji: 'Emoji',
     markup: 'Markup settings',
-    corsPlug: 'CORS plug config'
+    corsPlug: 'CORS plug config',
+    instanceReboot: 'Instance Reboot'
   },
   invites: {
     inviteTokens: 'Invite tokens',

src/store/modules/settings.js

@@ -6,11 +6,13 @@ const settings = {
   state: {
     activeTab: 'instance',
     configDisabled: true,
-    description: [],
-    settings: {},
-    updatedSettings: {},
     db: {},
-    loading: true
+    description: [],
+    loading: true,
+    needReboot: true,
+    settings: {},
+    updatedSettings: {}
+
   },
   mutations: {
     CLEAR_UPDATED_SETTINGS: (state) => {

src/views/settings/index.vue

@@ -3,17 +3,25 @@
     <div v-if="isDesktop">
       <div class="settings-header-container">
         <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
-        <el-link
+        <div>
-          :underline="false"
+          <el-button v-if="needReboot" class="settings-reboot-button">
-          href="https://docs-develop.pleroma.social/backend/administration/CLI_tasks/config/"
-          target="_blank">
-          <el-button class="settings-docs-button">
             <span>
-              <i class="el-icon-document"/>
+              <i class="el-icon-refresh"/>
-              {{ $t('settings.seeDocs') }}
+              {{ $t('settings.instanceReboot') }}
             </span>
           </el-button>
-        </el-link>
+          <el-link
+            :underline="false"
+            href="https://docs-develop.pleroma.social/backend/administration/CLI_tasks/config/"
+            target="_blank">
+            <el-button class="settings-docs-button">
+              <span>
+                <i class="el-icon-document"/>
+                {{ $t('settings.seeDocs') }}
+              </span>
+            </el-button>
+          </el-link>
+        </div>
       </div>
       <el-tabs v-model="activeTab" tab-position="left">
         <el-tab-pane :label="$t('settings.activityPub')" :disabled="configDisabled" name="activityPub" lazy>
@@ -79,8 +87,16 @@
       </el-tabs>
     </div>
     <div v-if="isMobile || isTablet">
-      <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
       <div class="settings-header-container">
+        <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
+        <el-button v-if="needReboot" class="settings-reboot-button">
+          <span>
+            <i class="el-icon-refresh"/>
+            {{ $t('settings.instanceReboot') }}
+          </span>
+        </el-button>
+      </div>
+      <div class="nav-container">
         <el-select v-model="activeTab" class="settings-menu" placeholder="Select">
           <el-option
             v-for="item in options"
@@ -219,6 +235,9 @@ export default {
     },
     isTablet() {
       return this.$store.state.app.device === 'tablet'
+    },
+    needReboot() {
+      return this.$store.state.settings.needReboot
     }
   },
   mounted: function() {

src/views/settings/styles/main.scss

@@ -247,6 +247,8 @@
     margin-bottom: 10px;
   }
   .settings-container {
+    max-width: 1824px;
+    margin: auto;
     .el-tabs {
       margin-top: 20px
     }
@@ -269,6 +271,11 @@
     align-items: center;
     margin: 22px 30px 15px 15px;
   }
+  .settings-reboot-button {
+    width: 145px;
+    text-align: left;
+    padding: 10px;
+  }
   .single-input {
     margin-right: 10px
   }
@@ -318,10 +325,6 @@
   }
 
   @media only screen and (min-width: 1824px) {
-    .settings-container {
-      max-width: 1824px;
-      margin: auto;
-    }
     .submit-button-container {
       max-width: 1637px;
       margin-left: auto;
@@ -425,11 +428,20 @@
       justify-content: space-between;
     }
     .settings-header {
-      margin: 7px 10px 15px 15px;
+      width: fit-content;
+      display: inline-block;
+      margin: 0;
     }
     .settings-header-container {
       margin: 15px;
     }
+    .nav-container {
+      display: flex;
+      height: 36px;
+      justify-content: space-between;
+      align-items: center;
+      margin: 15px;
+    }
     .settings-menu {
       width: 163px;
     }
@@ -508,6 +520,7 @@
     }
   }
   @media only screen and (max-width:801px) and (min-width: 481px) {
+
     .delete-setting-button {
       margin: 4px 0 0 10px;
       height: 28px;
@@ -538,14 +551,18 @@
       display: flex;
       justify-content: space-between;
     }
+    .nav-container {
+      display: flex;
+      height: 36px;
+      justify-content: space-between;
+      align-items: center;
+      margin: 15px 30px 15px 15px;
+    }
     .rate-limit-label-container {
       width: 250px;
     }
     .settings-delete-button {
       float: right;
     }
-    .settings-header {
-      margin: 5px 0 0 15px;
-    }
   }
 }