Merge branch 'fixes-roundup3' into shigusegubu-themes3

src/components/bookmark_folders_menu/bookmark_folders_menu_content.js

@@ -3,6 +3,9 @@ import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
 
 export const BookmarkFoldersMenuContent = {
+  props: [
+    'showPin'
+  ],
   components: {
     NavigationEntry
   },

src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue

@@ -7,10 +7,12 @@
         label: 'nav.all_bookmarks',
         icon: 'bookmark'
       }"
+      :show-pin="showPin"
     />
     <NavigationEntry
       v-for="item in folders"
       :key="item.id"
+      :show-pin="showPin"
       :item="item"
     />
   </ul>

src/components/nav_panel/nav_panel.vue

@@ -113,6 +113,7 @@
           :class="{ '-expanded': showBookmarkFolders }"
         >
           <BookmarkFoldersMenuContent
+            :show-pin="editMode || forceEditMode"
             class="timelines"
           />
         </div>

src/components/navigation/filter.js

@@ -24,6 +24,6 @@ export const getBookmarkFolderEntries = state => state.bookmarkFolders.allFolder
   routeObject: { name: 'bookmark-folder', params: { id: folder.id } },
   labelRaw: folder.name,
   iconEmoji: folder.emoji,
-  iconEmojiUrl: folder.emoji_url,
+  iconEmojiUrl: console.log(folder) || folder.emoji_url,
   iconLetter: folder.name[0]
 }))

src/components/navigation/navigation_pins.js

@@ -1,6 +1,8 @@
 import { mapState } from 'vuex'
 import { TIMELINES, ROOT_ITEMS, routeTo } from 'src/components/navigation/navigation.js'
-import { getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
+import { getBookmarkFolderEntries, getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
+
+import StillImage from 'src/components/still-image/still-image.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -34,12 +36,16 @@ const NavPanel = {
       return routeTo(item, this.currentUser)
     }
   },
+  components: {
+    StillImage
+  },
   computed: {
     getters () {
       return this.$store.getters
     },
     ...mapState({
       lists: getListEntries,
+      bookmarks: getBookmarkFolderEntries,
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,
       privateMode: state => state.instance.private,
@@ -70,6 +76,7 @@ const NavPanel = {
             .filter(([k]) => this.pinnedItems.has(k))
             .map(([k, v]) => ({ ...v, name: k })),
           ...this.lists.filter((k) => this.pinnedItems.has(k.name)),
+          ...this.bookmarks.filter((k) => this.pinnedItems.has(k.name)),
           ...Object
             .entries({ ...ROOT_ITEMS })
             .filter(([k]) => this.pinnedItems.has(k))

src/components/navigation/navigation_pins.vue

@@ -14,9 +14,14 @@
         :icon="item.icon"
       />
       <span
-        v-if="item.iconLetter"
+        v-if="item.iconLetter && !item.iconEmoji"
         class="iconLetter fa-scale-110 fa-old-padding"
       >{{ item.iconLetter }}</span>
+      <StillImage
+        v-if="item.iconEmoji"
+        class="bookmark-emoji"
+        :src="item.iconEmojiUrl"
+      />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
         class="badge -dot"
@@ -52,6 +57,13 @@
     box-sizing: border-box;
     height: 100%;
 
+    .bookmark-emoji {
+      height: 100%;
+      box-sizing: border-box;
+      padding: 0.5em;
+    }
+
+    & .bookmark-emoji,
     & .svg-inline--fa,
     & .iconLetter {
       margin: 0;

src/components/rich_content/rich_content.scss

@@ -8,6 +8,10 @@
     --funtextGreentext: var(--funtextGreentextFaint) !important;
     --funtextCyantext: var(--funtextCyantextFaint) !important;
     /* stylelint-enable declaration-no-important */
+
+    a {
+      color: var(--linkFaint);
+    }
   }
 
   blockquote {

src/components/settings_modal/tabs/general_tab.js

@@ -30,6 +30,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.conversation_display_${mode}`)
       })),
+      absoluteTime12hOptions: ['24h', '12h'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.absolute_time_format_12h_${mode}`)
+      })),
       conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
         key: mode,
         value: mode,

src/components/settings_modal/tabs/general_tab.vue

@@ -249,6 +249,16 @@
               {{ $t('settings.absolute_time_format_min_age') }}
             </UnitSetting>
           </li>
+          <li>
+            <ChoiceSetting
+              id="absoluteTime12h"
+              path="absoluteTime12h"
+              :options="absoluteTime12hOptions"
+              :expert="1"
+            >
+              {{ $t('settings.absolute_time_format_12h') }}
+            </ChoiceSetting>
+          </li>
         </ul>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
@@ -462,22 +472,6 @@
             {{ $t('settings.minimal_scopes_mode') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting
-            path="alwaysShowNewPostButton"
-            expert="1"
-          >
-            {{ $t('settings.always_show_post_button') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting
-            path="autohideFloatingPostButton"
-            expert="1"
-          >
-            {{ $t('settings.autohide_floating_post_button') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting
             path="padEmoji"

src/components/status_action_buttons/action_button.scss

@@ -2,7 +2,9 @@
 /* stylelint-disable declaration-no-important */
 
 .quick-action {
+  justify-content: space-between;
   display: flex;
+  align-items: baseline;
   align-items: center;
   height: 1.5em;
 
@@ -35,6 +37,7 @@
     border-radius: var(--roundness);
     grid-template-columns: minmax(max-content, 1fr) auto;
 
+    .chevron-icon,
     .extra-button,
     .separator {
       display: none;

src/components/status_action_buttons/action_button.vue

@@ -9,6 +9,7 @@
       :class="buttonInnerClass"
       role="menuitem"
       type="button"
+      :title="$t(button.label(funcArg))"
       target="_blank"
       :tabindex="0"
       :disabled="buttonClass.disabled"

src/components/status_action_buttons/status_action_buttons.scss

@@ -3,12 +3,11 @@
 .StatusActionButtons {
   .quick-action-buttons {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 5em);
+    grid-template-columns: repeat(auto-fill, 4em);
     grid-auto-flow: row dense;
     grid-auto-rows: 1fr;
     grid-gap: 1.25em 1em;
     margin-top: var(--status-margin);
-    align-items: baseline;
   }
 
   .pin-action-button {

src/components/timeago/timeago.vue

@@ -28,6 +28,9 @@ export default {
       }
       return DateUtils.durationStrToMs(this.$store.getters.mergedConfig.absoluteTimeFormatMinAge) <= this.relativeTimeMs
     },
+    time12hFormat () {
+      return this.$store.getters.mergedConfig.absoluteTimeFormat12h === '12h'
+    },
     browserLocale () {
       return localeService.internalToBrowserLocale(this.$i18n.locale)
     },
@@ -57,22 +60,26 @@ export default {
         if (DateUtils.isSameDay(this.timeAsDate, now)) {
           return new Intl.DateTimeFormat(this.browserLocale, {
             minute: 'numeric',
-            hour: 'numeric'
+            hour: 'numeric',
+            hour12: this.time12hFormat
           })
         } else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
           return new Intl.DateTimeFormat(this.browserLocale, {
             month: 'short',
-            day: 'numeric'
+            day: 'numeric',
+            hour12: this.time12hFormat
           })
         } else if (DateUtils.isSameYear(this.timeAsDate, now)) {
           return new Intl.DateTimeFormat(this.browserLocale, {
             month: 'short',
-            day: 'numeric'
+            day: 'numeric',
+            hour12: this.time12hFormat
           })
         } else {
           return new Intl.DateTimeFormat(this.browserLocale, {
             year: 'numeric',
-            month: 'short'
+            month: 'short',
+            hour12: this.time12hFormat
           })
         }
       })()

src/i18n/en.json

@@ -532,6 +532,9 @@
     "emoji_reactions_scale": "Reactions scale factor",
     "absolute_time_format": "Use absolute time format",
     "absolute_time_format_min_age": "Only use for time older than this amount of time",
+    "absolute_time_format_12h": "Time format",
+    "absolute_time_format_12h_12h": "12 hour format (i.e. 10:00 PM)",
+    "absolute_time_format_12h_24h": "24 hour format (i.e. 22:00)",
     "export_theme": "Save preset",
     "filtering": "Filtering",
     "wordfilter": "Wordfilter",

src/modules/config.js

@@ -193,6 +193,7 @@ export const defaultState = {
   autoSaveDraft: undefined, // instance default
   useAbsoluteTimeFormat: undefined, // instance default
   absoluteTimeFormatMinAge: undefined, // instance default
+  absoluteTime12h: undefined, // instance default
   imageCompression: true
 }
 

src/modules/instance.js

@@ -131,6 +131,7 @@ const defaultState = {
   autoSaveDraft: false,
   useAbsoluteTimeFormat: false,
   absoluteTimeFormatMinAge: '0d',
+  absoluteTime12h: '24h',
 
   // Nasty stuff
   customEmoji: [],

src/services/color_convert/color_convert.js

@@ -236,8 +236,8 @@ export const getTextColor = function (bg, text, preserve) {
 
   let contrast = getContrastRatio(bg, text)
   const result = convert(rgb2hex(workColor)).hsl
-  const delta = result.l > 50 ? 1 : -1
-  const multiplier = 10
+  const delta = result.l >= 50 ? 1 : -1
+  const multiplier = 1
   while (contrast < 4.5 && result.l > 20 && result.l < 80) {
     result.l += delta * multiplier
     result.l = Math.min(100, Math.max(0, result.l))

src/services/export_import/export_import.js

@@ -3,7 +3,7 @@ import utf8 from 'utf8'
 export const newExporter = ({
   filename = 'data',
   mime = 'application/json',
-  extension = '.json',
+  extension = 'json',
   getExportedObject
 }) => ({
   exportData () {