changelog.d/themes3-fixes.fix

@@ -1 +0,0 @@
-fix color inputs and some in-development themes3 issues

src/App.scss

@@ -14,14 +14,14 @@
   --ZI_navbar_popovers: 7500;
   --ZI_navbar: 7000;
   --ZI_popovers: 6000;
-
-  // Fallback for when stuff is loading
-  --background: var(--bg);
 }
 
 html {
   font-size: var(--font-size);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
+
+  // Fallback for when stuff is loading
+  --background: var(--bg);
 }
 
 body {
@@ -410,7 +410,6 @@ nav {
   width: 100%;
   line-height: var(--__line-height);
   padding: var(--__vertical-gap) var(--__horizontal-gap);
-  background: transparent;
 
   --__line-height: 1.5em;
   --__horizontal-gap: 0.75em;

src/App.vue

@@ -2,7 +2,6 @@
   <div
     id="app-loaded"
     :style="bgStyle"
-    v-show="$store.state.interface.themeApplied"
   >
     <div
       id="app_bg_wrapper"

src/boot/after_store.js

@@ -363,7 +363,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
     } else {
       applyTheme(customTheme)
     }
-    store.commit('setThemeApplied')
   } else if (theme) {
     // do nothing, it will load asynchronously
   } else {

src/components/color_input/color_input.scss

@@ -9,7 +9,6 @@
     padding: 0.2em 8px;
 
     input {
-      color: var(--text);
       background: none;
       border: none;
       padding: 0;
@@ -20,38 +19,21 @@
         min-width: 3em;
         padding: 0;
       }
-    }
 
-    .nativeColor {
+      &.nativeColor {
-      cursor: pointer;
+        flex: 0 0 2em;
-      flex: 0 0 auto;
+        min-width: 2em;
-
+        align-self: stretch;
-      input {
+        min-height: 100%;
-        appearance: none;
-        max-width: 0;
-        min-width: 0;
-        max-height: 0;
-        /* stylelint-disable-next-line declaration-no-important */
-        opacity: 0 !important;
       }
     }
 
     .computedIndicator,
-    .validIndicator,
-    .invalidIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
-      margin: 0 0.5em;
       min-width: 2em;
       align-self: stretch;
-      min-height: 1.5em;
+      min-height: 100%;
-      border-radius: var(--roundness);
-    }
-
-    .invalidIndicator {
-      background: transparent;
-      box-sizing: border-box;
-      border: 2px solid var(--cRed);
     }
 
     .transparentIndicator {
@@ -72,13 +54,11 @@
       &::after {
         top: 0;
         left: 0;
-        border-top-left-radius: var(--roundness);
       }
 
       &::before {
         bottom: 0;
         right: 0;
-        border-bottom-right-radius: var(--roundness);
       }
     }
   }

src/components/color_input/color_input.vue

@@ -25,51 +25,30 @@
         :disabled="!present || disabled"
         @input="$emit('update:modelValue', $event.target.value)"
       >
-      <div
+      <input
         v-if="validColor"
-        class="validIndicator"
+        :id="name"
-        :style="{backgroundColor: modelValue || fallback}"
+        class="nativeColor unstyled"
-      />
+        type="color"
+        :value="modelValue || fallback"
+        :disabled="!present || disabled"
+        @input="$emit('update:modelValue', $event.target.value)"
+      >
       <div
-        v-else-if="transparentColor"
+        v-if="transparentColor"
         class="transparentIndicator"
       />
       <div
-        v-else-if="computedColor"
+        v-if="computedColor"
         class="computedIndicator"
         :style="{backgroundColor: fallback}"
       />
-      <div
-        v-else
-        class="invalidIndicator"
-      />
-      <label class="nativeColor">
-        <FAIcon icon="eye-dropper"/>
-        <input
-          :id="name"
-          class="unstyled"
-          type="color"
-          :value="modelValue || fallback"
-          :disabled="!present || disabled"
-          @input="$emit('update:modelValue', $event.target.value)"
-        >
-      </label>
     </div>
   </div>
 </template>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
-
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faEyeDropper
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faEyeDropper
-)
-
 export default {
   components: {
     Checkbox
@@ -129,3 +108,12 @@ export default {
 }
 </script>
 <style lang="scss" src="./color_input.scss"></style>
+
+<style lang="scss">
+.color-control {
+  input.text-input {
+    max-width: 7em;
+    flex: 1;
+  }
+}
+</style>

src/components/list/list_item.style.js

@@ -14,8 +14,7 @@ export default {
     'ButtonUnstyled',
     'RichContent',
     'Input',
-    'Avatar',
+    'Avatar'
-    'Badge'
   ],
   defaultRules: [
     {

src/components/popover/popover.vue

@@ -71,7 +71,6 @@
   border-color: var(--border);
   border-style: solid;
   border-width: 1px;
-  background-color: var(--background);
 }
 
 .dropdown-menu {
@@ -83,7 +82,6 @@
   max-width: 100vw;
   z-index: var(--ZI_popover_override, var(--ZI_popovers));
   white-space: nowrap;
-  background-color: var(--background);
 
   .dropdown-divider {
     height: 0;

src/components/settings_modal/tabs/filtering_tab.js

@@ -1,7 +1,6 @@
 import { filter, trim, debounce } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
-import SizeSetting from '../helpers/size_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -20,7 +19,6 @@ const FilteringTab = {
   components: {
     BooleanSetting,
     ChoiceSetting,
-    SizeSetting,
     IntegerSetting
   },
   computed: {

src/components/settings_modal/tabs/filtering_tab.vue

@@ -96,16 +96,6 @@
             {{ $t('settings.hide_scrobbles') }}
           </BooleanSetting>
         </li>
-        <li>
-          <SizeSetting
-            key="hideScrobblesAfter"
-            path="hideScrobblesAfter"
-            :units="['m', 'h', 'd']"
-            expert="1"
-          >
-            {{ $t('settings.hide_scrobbles_after') }}
-          </SizeSetting>
-        </li>
       </ul>
     </div>
     <div

src/components/status/status.js

@@ -414,25 +414,7 @@ const Status = {
       return this.quotedStatus && this.displayQuote
     },
     scrobblePresent () {
-      if (this.mergedConfig.hideScrobbles) return false
+      return !this.mergedConfig.hideScrobbles && this.status.user.latestScrobble && this.status.user.latestScrobble.artist
-      if (!this.status.user.latestScrobble) return false
-      const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
-      const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
-      let multiplier = 60 * 1000 // minutes is smallest unit
-      switch (unit) {
-        case 'm':
-          multiplier *= 60 // hour
-          break
-        case 'd':
-          multiplier *= 60 // hour
-          multiplier *= 24 // day
-          break
-      }
-      const maxAge = Number(value) * multiplier
-      const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
-      const age = Date.now() - createdAt
-      if (age > maxAge) return false
-      return this.status.user.latestScrobble.artist
     },
     scrobble () {
       return this.status.user.latestScrobble

src/components/user_card/user_card.scss

@@ -204,11 +204,6 @@
 
     --emoji-size: 1.7em;
 
-    .RichContent {
-      /* stylelint-disable-next-line declaration-no-important */
-      --link: var(--text) !important;
-    }
-
     .top-line,
     .bottom-line {
       display: flex;

src/i18n/en.json

@@ -502,7 +502,6 @@
     "mute_bot_posts": "Mute bot posts",
     "hide_actor_type_indication": "Hide actor type (bots, groups, etc.) indication in posts",
     "hide_scrobbles": "Hide scrobbles",
-    "hide_scrobbles_after": "Hide scrobbles older than",
     "hide_all_muted_posts": "Hide muted posts",
     "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
     "hide_isp": "Hide instance-specific panel",

src/modules/config.js

@@ -41,7 +41,6 @@ export const defaultState = {
   hideAttachments: false,
   hideAttachmentsInConv: false,
   hideScrobbles: false,
-  hideScrobblesAfter: '2d',
   maxThumbnails: 16,
   hideNsfw: true,
   preloadImage: true,

src/modules/instance.js

@@ -386,7 +386,6 @@ const instance = {
           } else {
             applyTheme(themeData.theme)
           }
-          commit('setThemeApplied')
         })
     },
     fetchEmoji ({ dispatch, state }) {

src/modules/interface.js

@@ -1,5 +1,4 @@
 const defaultState = {
-  themeApplied: false,
   settingsModalState: 'hidden',
   settingsModalLoadedUser: false,
   settingsModalLoadedAdmin: false,
@@ -36,9 +35,6 @@ const interfaceMod = {
         state.settings.currentSaveStateNotice = { error: true, errorData: error }
       }
     },
-    setThemeApplied (state) {
-      state.themeApplied = true
-    },
     setNotificationPermission (state, permission) {
       state.notificationPermission = permission
     },

src/services/style_setter/style_setter.js

@@ -8,7 +8,7 @@ import { chunk } from 'lodash'
 
 export const generateTheme = async (input, callbacks) => {
   const {
-    onNewRule = (rule, isLazy) => {},
+    onNewRule = (rule) => {},
     onLazyFinished = () => {},
     onEagerFinished = () => {}
   } = callbacks
@@ -38,9 +38,9 @@ export const generateTheme = async (input, callbacks) => {
         parts[1],
         '}'
       ].join('')
-      onNewRule(newRule, false)
+      onNewRule(newRule)
     } else {
-      onNewRule(rule, false)
+      onNewRule(rule)
     }
   })
   onEagerFinished()
@@ -67,9 +67,9 @@ export const generateTheme = async (input, callbacks) => {
             parts[1],
             '}'
           ].join('')
-          onNewRule(newRule, true)
+          onNewRule(newRule)
         } else {
-          onNewRule(rule, true)
+          onNewRule(rule)
         }
       })
       // const t1 = performance.now()
@@ -88,28 +88,23 @@ export const generateTheme = async (input, callbacks) => {
 }
 
 export const applyTheme = async (input) => {
+  const body = document.body
+  body.classList.add('hidden')
+
   const styleSheet = new CSSStyleSheet()
-  const lazyStyleSheet = new CSSStyleSheet()
+  document.adoptedStyleSheets = [styleSheet]
 
   const { lazyProcessFunc } = await generateTheme(
     input,
     {
-      onNewRule (rule, isLazy) {
+      onNewRule (rule) {
-        if (isLazy) {
+        styleSheet.insertRule(rule, 'index-max')
-          lazyStyleSheet.insertRule(rule, 'index-max')
-        } else {
-          styleSheet.insertRule(rule, 'index-max')
-        }
-      },
-      onEagerFinished () {
-        document.adoptedStyleSheets = [styleSheet]
-      },
-      onLazyFinished () {
-        document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
       }
     }
   )
 
+  body.classList.remove('hidden')
+
   setTimeout(lazyProcessFunc, 0)
 
   return Promise.resolve()

src/services/sw/sw.js

@@ -28,7 +28,7 @@ function subscribePush (registration, isEnabled, vapidPublicKey) {
   if (!vapidPublicKey) return Promise.reject(new Error('VAPID public key is not found'))
 
   const subscribeOptions = {
-    userVisibleOnly: true,
+    userVisibleOnly: false,
     applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
   }
   return registration.pushManager.subscribe(subscribeOptions)

src/services/theme_data/theme2_keys.js

@@ -158,12 +158,12 @@ export default [
   'alertPopupNeutral',
   'alertPopupNeutralText',
 
-  'badgeNeutral',
-  'badgeNeutralText',
-
   'badgeNotification',
   'badgeNotificationText',
 
+  'badgeNeutral',
+  'badgeNeutralText',
+
   'chatBg',
 
   'chatMessageIncomingBg',

src/services/theme_data/theme2_to_theme3.js

@@ -517,8 +517,6 @@ export const convertTheme2To3 = (data) => {
       } else if (newRule.component === 'Badge') {
         if (newRule.variant === 'notification') {
           return [newRule, { component: 'Root', directives: { '--badgeNotification': 'color | ' + newRule.directives.background } }]
-        } else if (newRule.variant === 'neutral') {
-          return [{ ...newRule, variant: 'normal' }]
         } else {
           return [newRule]
         }

static/config.json

@@ -1,6 +1,6 @@
 {
-  "alwaysShowSubjectInput": false,
+  "alwaysShowSubjectInput": true,
-  "background": "/static/sigsegv_s.png",
+  "background": "/static/aurora_borealis.jpg",
   "collapseMessageWithSubject": false,
   "greentext": false,
   "hideFilteredStatuses": false,
@@ -19,13 +19,11 @@
   "postContentType": "text/plain",
   "redirectRootLogin": "/main/friends",
   "redirectRootNoLogin": "/main/all",
-  "scopeCopy": false,
+  "scopeCopy": true,
   "showFeaturesPanel": true,
   "showInstanceSpecificPanel": false,
   "sidebarRight": false,
-  "subjectLineBehavior": "noop",
+  "subjectLineBehavior": "email",
-  "theme": "sigsegv",
+  "theme": "pleroma-dark",
-  "webPushNotifications": false,
+  "webPushNotifications": false
-  "greentext": true,
-  "mentionLinkShowYous": true
 }

static/styles.json

@@ -1,6 +1,4 @@
 {
-  "sigsegv": [ "シグセグＶ", "#100f32", "#221548", "#e6fcff", "#fe9df8", "#fd3f3f", "#cafeb8", "#9fd3fe", "#ffe96b" ],
-  "sigsegv2": [ "SigSeg部", "#003238", "#00616c", "#e8f9fb", "#81ffff", "#ff7b66", "#4ae619", "#00ddff", "#ccef53" ],
   "pleroma-dark": "/static/themes/pleroma-dark.json",
   "pleroma-light": "/static/themes/pleroma-light.json",
   "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],

static/terms-of-service.html

@@ -1,9 +1,9 @@
-<img src="/static/logo.svg"/ style="display: block; margin: auto; width: 100%; padding: 20px">
 <h4>Terms of Service</h4>
-<p>We don't block/silence/suspend any other instances.</p>
+
-<br>
+<p>This is the default placeholder ToS.  You should copy it over to your static folder and edit it to fit the needs of your instance.</p>
-<p>Don't do anything illegal, or else you will be シグストップ'd.</p>
+
-<p>Violator and subject to severe penalties and will be prosecutedt to the full extent of the ＪＡＭ.</p>
+<p>To do so, place a file at <code>"/instance/static/static/terms-of-service.html"</code> in your
-<br>
+   Pleroma install containing the real ToS for your instance.</p>
-<p>Admin: Fediverse: hj@shigusegubu.club, hj@pleroma.hjkos.com; Email: pleroma@hjkos.com</p>
+<p>See the <a href='https://docs.pleroma.social/backend/configuration/static_dir/'>Pleroma documentation</a> for more information.</p>
 <br>
+<img src="/static/logo.svg" style="display: block; margin: auto; max-width: 100%; height: 50px; object-fit: contain;" />