Merge branch 'ci-update' into 'develop'

Update gitlab CI file to avoid arm runner that keeps failing certain resource-intensive tasks

See merge request pleroma/pleroma-fe!1914

.gitlab-ci.yml

@@ -43,6 +43,8 @@ lint:
 
 test:
   stage: test
+  tags:
+    - amd64
   variables:
     APT_CACHE_DIR: apt-cache
   script:
@@ -54,6 +56,8 @@ test:
 
 build:
   stage: build
+  tags:
+    - amd64
   script:
     - yarn
     - npm run build

changelog.d/ci-runner.skip

@@ -0,0 +1 @@
+stop using that one runner for intensive tasks

src/App.scss

@@ -3,7 +3,7 @@
 @import "./panel";
 
 :root {
-  --fontSize: 14px;
+  --font-size: 14px;
   --status-margin: 0.75em;
   --navbar-height: 3.5rem;
   --post-line-height: 1.4;
@@ -20,7 +20,7 @@
 }
 
 html {
-  font-size: var(--textSize);
+  font-size: var(--font-size);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 

src/components/settings_modal/helpers/setting.js

@@ -48,10 +48,6 @@ export default {
     draftMode: {
       type: Boolean,
       default: undefined
-    },
-    timedApplyMode: {
-      type: Boolean,
-      default: false
     }
   },
   inject: {
@@ -165,11 +161,7 @@ export default {
         case 'admin':
           return (k, v) => this.$store.dispatch('pushAdminSetting', { path: k, value: v })
         default:
-          if (this.timedApplyMode) {
-            return (k, v) => this.$store.dispatch('setOptionTemporarily', { name: k, value: v })
-          } else {
-            return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
-          }
+          return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
       }
     },
     defaultState () {

src/components/settings_modal/helpers/unit_setting.js

@@ -21,23 +21,15 @@ export default {
     unitSet: {
       type: String,
       default: 'none'
-    },
-    step: {
-      type: Number,
-      default: 1
-    },
-    resetDefault: {
-      type: Object,
-      default: null
     }
   },
   computed: {
     ...Setting.computed,
     stateUnit () {
-      return typeof this.state === 'string' ? this.state.replace(/[0-9,.]+/, '') : ''
+      return this.state.replace(/\d+/, '')
     },
     stateValue () {
-      return typeof this.state === 'string' ? this.state.replace(/[^0-9,.]+/, '') : ''
+      return this.state.replace(/\D+/, '')
     }
   },
   methods: {
@@ -47,18 +39,10 @@ export default {
       return this.$t(['settings', 'units', this.unitSet, value].join('.'))
     },
     updateValue (e) {
-      this.configSink(this.path, parseFloat(e.target.value) + this.stateUnit)
+      this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
     },
     updateUnit (e) {
-      let value = this.stateValue
-      const newUnit = e.target.value
-      if (this.resetDefault) {
-        const replaceValue = this.resetDefault[newUnit]
-        if (replaceValue != null) {
-          value = replaceValue
-        }
-      }
-      this.configSink(this.path, value + newUnit)
+      this.configSink(this.path, this.stateValue + e.target.value)
     }
   }
 }

src/components/settings_modal/helpers/unit_setting.vue

@@ -13,7 +13,7 @@
       :id="path"
       class="input number-input"
       type="number"
-      step="step"
+      step="1"
       :disabled="disabled"
       :min="min || 0"
       :value="stateValue"

src/components/settings_modal/settings_modal.js

@@ -4,7 +4,6 @@ import AsyncComponentError from 'src/components/async_component_error/async_comp
 import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
 import Popover from '../popover/popover.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { cloneDeep, isEqual } from 'lodash'
 import {
@@ -54,7 +53,6 @@ const SettingsModal = {
     Modal,
     Popover,
     Checkbox,
-    ConfirmModal,
     SettingsModalUserContent: getResettableAsyncComponent(
       () => import('./settings_modal_user_content.vue'),
       {
@@ -167,7 +165,6 @@ const SettingsModal = {
   },
   computed: {
     currentSaveStateNotice () {
-      console.log(this.$store.state.interface.settings.currentSaveStateNotice)
       return this.$store.state.interface.settings.currentSaveStateNotice
     },
     modalActivated () {

src/components/settings_modal/settings_modal.vue

@@ -147,18 +147,6 @@
         </span>
       </div>
     </div>
-    <teleport to="#modal">
-      <ConfirmModal
-        v-if="$store.state.interface.temporaryChangesTimeoutId"
-        :title="$t('settings.confirm_new_setting')"
-        :cancel-text="$t('settings.revert')"
-        :confirm-text="$t('settings.confirm')"
-        @cancelled="$store.state.interface.temporaryChangesRevert"
-        @accepted="$store.state.interface.temporaryChangesConfirm"
-      >
-        {{ $t('settings.confirm_new_question') }}
-      </ConfirmModal>
-    </teleport>
   </Modal>
 </template>
 

src/components/settings_modal/settings_modal_user_content.js

@@ -7,7 +7,6 @@ import FilteringTab from './tabs/filtering_tab.vue'
 import SecurityTab from './tabs/security_tab/security_tab.vue'
 import ProfileTab from './tabs/profile_tab.vue'
 import GeneralTab from './tabs/general_tab.vue'
-import AppearanceTab from './tabs/appearance_tab.vue'
 import VersionTab from './tabs/version_tab.vue'
 import ThemeTab from './tabs/theme_tab/theme_tab.vue'
 
@@ -45,7 +44,6 @@ const SettingsModalContent = {
     SecurityTab,
     ProfileTab,
     GeneralTab,
-    AppearanceTab,
     VersionTab,
     ThemeTab
   },

src/components/settings_modal/settings_modal_user_content.vue

@@ -21,13 +21,6 @@
     >
       <ProfileTab />
     </div>
-    <div
-      :label="$t('settings.appearance')"
-      icon="paint-brush"
-      data-tab-name="appearance"
-    >
-      <AppearanceTab />
-    </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.security_tab')"

src/components/settings_modal/tabs/appearance_tab.js

@@ -1,39 +0,0 @@
-import BooleanSetting from '../helpers/boolean_setting.vue'
-import ChoiceSetting from '../helpers/choice_setting.vue'
-import IntegerSetting from '../helpers/integer_setting.vue'
-import FloatSetting from '../helpers/float_setting.vue'
-import UnitSetting from '../helpers/unit_setting.vue'
-
-import SharedComputedObject from '../helpers/shared_computed_object.js'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faGlobe
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faGlobe
-)
-
-const AppearanceTab = {
-  data () {
-    return {}
-  },
-  components: {
-    BooleanSetting,
-    ChoiceSetting,
-    IntegerSetting,
-    FloatSetting,
-    UnitSetting,
-    ProfileSettingIndicator
-  },
-  computed: {
-    instanceWallpaperUsed () {
-      return this.$store.state.instance.background &&
-        !this.$store.state.users.currentUser.background_image
-    },
-    ...SharedComputedObject()
-  }
-}
-
-export default AppearanceTab

src/components/settings_modal/tabs/appearance_tab.vue

@@ -1,71 +0,0 @@
-<template>
-  <div :label="$t('settings.general')">
-    <div class="setting-item">
-      <h2>{{ $t('settings.interface') }}</h2>
-      <ul class="setting-list">
-        <li v-if="instanceWallpaperUsed">
-          <BooleanSetting path="hideInstanceWallpaper">
-            {{ $t('settings.hide_wallpaper') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="disableStickyHeaders">
-            {{ $t('settings.disable_sticky_headers') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="showScrollbars">
-            {{ $t('settings.show_scrollbars') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <UnitSetting
-            path="textSize"
-            step="0.1"
-            :units="['px', 'rem']"
-            :reset-default="{ 'px': 14, 'rem': 1 }"
-            timed-apply-mode
-          >
-            {{ $t('settings.text_size') }}
-          </UnitSetting>
-          <div>
-            <small>
-              <i18n-t
-                scope="global"
-                keypath="settings.text_size_tip"
-                tag="span"
-              >
-                <code>px</code>
-                <code>rem</code>
-              </i18n-t>
-              <br/>
-              <i18n-t
-                scope="global"
-                keypath="settings.text_size_tip2"
-                tag="span"
-              >
-                <code>14px</code>
-              </i18n-t>
-            </small>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script src="./appearance_tab.js"></script>
-
-<style lang="scss">
-.column-settings {
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-}
-
-.column-settings .size-label {
-  display: block;
-  margin-bottom: 0.5em;
-  margin-top: 0.5em;
-}
-</style>

src/components/settings_modal/tabs/general_tab.vue

@@ -15,6 +15,11 @@
             {{ $t('settings.hide_isp') }}
           </BooleanSetting>
         </li>
+        <li v-if="instanceWallpaperUsed">
+          <BooleanSetting path="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
@@ -96,6 +101,16 @@
         <li>
           <h3>{{ $t('settings.columns') }}</h3>
         </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="sidebarRight">
             {{ $t('settings.right_sidebar') }}

src/i18n/en.json

@@ -374,14 +374,6 @@
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
     "post_look_feel": "Posts Look & Feel",
     "mention_links": "Mention links",
-    "appearance": "Appearance",
-    "confirm_new_setting": "Confirm new setting?",
-    "confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.",
-    "revert": "Revert",
-    "confirm": "Confirm",
-    "text_size": "Text and interface size",
-    "text_size_tip": "Use {0} for absolute values, {1} will scale with browser default text size.",
-    "text_size_tip2": "Values other than {0} might break some things and themes",
     "mfa": {
       "otp": "OTP",
       "setup_otp": "Setup OTP",

src/modules/config.js

@@ -115,8 +115,7 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
-  emojiReactionsScale: undefined,
-  textSize: undefined, // instance default
+  emojiReactionsScale: 1.0,
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -174,10 +173,6 @@ const config = {
     }
   },
   mutations: {
-    setOptionTemporarily (state, { name, value }) {
-      set(state, name, value)
-      applyConfig(state)
-    },
     setOption (state, { name, value }) {
       set(state, name, value)
     },
@@ -208,31 +203,6 @@ const config = {
     setHighlight ({ commit, dispatch }, { user, color, type }) {
       commit('setHighlight', { user, color, type })
     },
-    setOptionTemporarily ({ commit, dispatch, state, rootState }, { name, value }) {
-      if (rootState.interface.temporaryChangesTimeoutId !== null) {
-        console.warn('Can\'t track more than one temporary change')
-        return
-      }
-      const oldValue = state[name]
-
-      commit('setOptionTemporarily', { name, value })
-
-      const confirm = () => {
-        dispatch('setOption', { name, value })
-        commit('clearTemporaryChanges')
-      }
-
-      const revert = () => {
-        commit('setOptionTemporarily', { name, value: oldValue })
-        commit('clearTemporaryChanges')
-      }
-
-      commit('setTemporaryChanges', {
-        timeoutId: setTimeout(revert, 10000),
-        confirm,
-        revert
-      })
-    },
     setOption ({ commit, dispatch, state }, { name, value }) {
       const exceptions = new Set([
         'useStreamingApi'
@@ -261,7 +231,6 @@ const config = {
           case 'sidebarColumnWidth':
           case 'contentColumnWidth':
           case 'notifsColumnWidth':
-          case 'textSize':
           case 'emojiReactionsScale':
             applyConfig(state)
             break

src/modules/instance.js

@@ -98,8 +98,6 @@ const defaultState = {
   sidebarRight: false,
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',
-  emojiReactionsScale: 1.0,
-  textSize: '14px',
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',

src/modules/interface.js

@@ -1,8 +1,5 @@
 const defaultState = {
   themeApplied: false,
-  temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
-  temporaryChangesConfirm: () => {}, // used for applying temporary options
-  temporaryChangesRevert: () => {}, // used for reverting temporary options
   settingsModalState: 'hidden',
   settingsModalLoadedUser: false,
   settingsModalLoadedAdmin: false,
@@ -39,17 +36,6 @@ const interfaceMod = {
         state.settings.currentSaveStateNotice = { error: true, errorData: error }
       }
     },
-    setTemporaryChanges (state, { timeoutId, confirm, revert }) {
-      state.temporaryChangesTimeoutId = timeoutId
-      state.temporaryChangesConfirm = confirm
-      state.temporaryChangesRevert = revert
-    },
-    clearTemporaryChanges (state) {
-      clearTimeout(state.temporaryChangesTimeoutId)
-      state.temporaryChangesTimeoutId = null
-      state.temporaryChangesConfirm = () => {}
-      state.temporaryChangesRevert = () => {}
-    },
     setThemeApplied (state) {
       state.themeApplied = true
     },

src/services/style_setter/style_setter.js

@@ -148,19 +148,8 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
   return Promise.resolve()
 }
 
-const configColumns = ({
-  sidebarColumnWidth,
-  contentColumnWidth,
-  notifsColumnWidth,
-  emojiReactionsScale,
-  textSize
-}) => ({
-  sidebarColumnWidth,
-  contentColumnWidth,
-  notifsColumnWidth,
-  emojiReactionsScale,
-  textSize
-})
+const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
+  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale })
 
 const defaultConfigColumns = configColumns(defaultState)
 
@@ -186,7 +175,6 @@ export const applyConfig = (config) => {
 
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
-
   body.classList.remove('hidden')
 }