Disable follow button if blocked by user

1280px is a pretty common screen width for several resolutions
(1280x720, 1280x800, 1280x1024, etc.). Since it is only 20px less than
the current 1300px minimum, this shouldn't be a big issue to lower the
minimum screen width for the 3-column layout to 1280px.

Closes: AkkomaGang/pleroma-fe#255

src/components/about/about.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="column-inner">
-    <instance-specific-panel v-if="showInstanceSpecificPanel" />
+    <!--<instance-specific-panel v-if="showInstanceSpecificPanel" />-->
     <staff-panel />
     <terms-of-service-panel />
     <LocalBubblePanel v-if="showLocalBubblePanel" />

src/components/desktop_nav/desktop_nav.js

@@ -4,7 +4,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faSignInAlt,
   faSignOutAlt,
-  faHome,
+  faHouseChimney,
   faComments,
   faUserPlus,
   faBullhorn,
@@ -23,7 +23,7 @@ import {
 library.add(
   faSignInAlt,
   faSignOutAlt,
-  faHome,
+  faHouseChimney,
   faComments,
   faUserPlus,
   faBullhorn,

src/components/desktop_nav/desktop_nav.vue

@@ -39,7 +39,7 @@
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
-              icon="home"
+              icon="house-chimney"
               :title="$t('nav.home_timeline')"
             />
           </router-link>
@@ -55,18 +55,6 @@
               :title="$t('nav.public_tl')"
             />
           </router-link>
-          <router-link
-            v-if="currentUser && showBubbleTimeline"
-            :to="{ name: 'bubble-timeline' }"
-            class="nav-icon"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding"
-              icon="circle"
-              :title="$t('nav.bubble_timeline')"
-            />
-          </router-link>
           <router-link
             v-if="federating && (currentUser || !(privateMode || restrictedTimelines.federated))"
             :to="{ name: 'public-external-timeline' }"
@@ -79,6 +67,18 @@
               :title="$t('nav.twkn')"
             />
           </router-link>
+          <router-link
+            v-if="currentUser && showBubbleTimeline"
+            :to="{ name: 'bubble-timeline' }"
+            class="nav-icon"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="comment-medical"
+              :title="$t('nav.bubble_timeline')"
+            />
+          </router-link>
         </div>
       </div>
       <router-link

src/components/emoji_input/emoji_input.vue

@@ -88,9 +88,10 @@
     }
   }
   .emoji-picker-panel {
-    position: absolute;
+    position: relative;
     z-index: 20;
     margin-top: 2px;
+    top: 0px !important;
 
     &.hide {
       display: none

src/components/emoji_picker/emoji_picker.scss

@@ -7,7 +7,7 @@
     overflow: hidden;
     left: -70%;
     max-width: 100%;
-    @media (min-width: 800px) and (max-width: 1300px) {
+    @media (min-width: 800px) and (max-width: 1280px) {
       left: -50%;
       min-width: 50%;
       max-width: 130%;
@@ -56,7 +56,11 @@
 
   .heading {
     margin-top: 10px;
-    height: 4.8em;
+    height: 5.8em;
+  }
+
+  .emoji-header {
+    margin-left: 5px;
   }
 
   .content {

src/components/emoji_picker/emoji_picker.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="emoji-picker panel panel-default panel-body">
     <div class="heading">
+      <span class="emoji-header">Emoji Packs</span>
       <span
         class="emoji-tabs"
         @wheel="onWheel"

src/components/media_modal/media_modal.vue

@@ -188,9 +188,21 @@ $modal-view-button-icon-margin: 0.5em;
     overflow-y: auto;
     min-height: 1em;
     max-width: 500px;
-    max-height: 9.5em;
     word-break: break-word;
     white-space: pre-line;
+    background: rgba(0,0,0,0.6);
+    padding: 10px;
+    border-radius: 10px;
+    transition: 0.5s;
+
+    &:not(:hover) {
+      max-height: 1em;
+    }
+
+    &:hover {
+      max-height: 9.5em;
+      transition: 1s;
+    }
   }
 
   .modal-image {

src/components/mention_link/mention_link.scss

@@ -15,11 +15,15 @@
 
   .mention-avatar {
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-    width: 1.5em;
-    height: 1.5em;
+    width: 2em;
+    height: 2em;
     vertical-align: middle;
     user-select: none;
     margin-right: 0.2em;
+
+    .still-image.avatar {
+      border-radius: 14px;
+    }
   }
 
   .full {
@@ -113,3 +117,11 @@
     color: var(--faint, $fallback--faint);
   }
 }
+
+.reply-glued-label {
+
+  .mention-avatar {
+    width: 1.4em;
+    height: 1.4em;
+  }
+}

src/components/moderation_tools/moderation_tools.vue

@@ -41,11 +41,10 @@
             {{ $t('user_card.admin_menu.delete_account') }}
           </button>
           <div
-            v-if="hasTagPolicy"
             role="separator"
             class="dropdown-divider"
           />
-          <span v-if="hasTagPolicy">
+          <span>
             <button
               class="button-default dropdown-item"
               @click="toggleTag(tags.FORCE_NSFW)"

src/components/mrf_transparency_panel/mrf_transparency_panel.vue

@@ -76,7 +76,7 @@
             </table>
           </div>
 
-          <div v-if="quarantineInstances.length">
+          <!--<div v-if="quarantineInstances.length">
             <h4>{{ $t("about.mrf.simple.quarantine") }}</h4>
 
             <p>{{ $t("about.mrf.simple.quarantine_desc") }}</p>
@@ -99,7 +99,7 @@
                 </td>
               </tr>
             </table>
-          </div>
+          </div>-->
 
           <div v-if="ftlRemovalInstances.length">
             <h4>{{ $t("about.mrf.simple.ftl_removal") }}</h4>
@@ -176,7 +176,7 @@
             </table>
           </div>
 
-          <h2 v-if="hasKeywordPolicies">
+          <!--<h2 v-if="hasKeywordPolicies">
             {{ $t("about.mrf.keyword.keyword_policies") }}
           </h2>
 
@@ -217,7 +217,7 @@
                 {{ keyword.replacement }}
               </li>
             </ul>
-          </div>
+          </div>-->
         </div>
       </div>
     </div>

src/components/quote_card/quote_card.vue

@@ -64,11 +64,11 @@
 
   color: $fallback--text;
   color: var(--text, $fallback--text);
-  border-style: solid;
+  border-style: dashed;
   border-width: 1px;
   border-radius: $fallback--attachmentRadius;
   border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: $fallback--cBlue;
+  border-color: var(--cBlue, $fallback--cBlue);
 }
 </style>

src/components/rich_content/rich_content.scss

@@ -49,7 +49,7 @@
   }
 
   .emoji {
-    display: inline-block;
+    display: inline-flex;
     width: var(--emoji-size, 32px);
     height: var(--emoji-size, 32px);
   }

src/components/scope_selector/scope_selector.js

@@ -2,6 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEnvelope,
   faLock,
+  faBiohazard,
   faLockOpen,
   faGlobe
 } from '@fortawesome/free-solid-svg-icons'
@@ -9,6 +10,7 @@ import {
 library.add(
   faEnvelope,
   faGlobe,
+  faBiohazard,
   faLock,
   faLockOpen
 )

src/components/scope_selector/scope_selector.vue

@@ -64,7 +64,7 @@
       @click="changeVis('local')"
     >
       <FAIcon
-        icon="users"
+        icon="biohazard"
         class="fa-scale-110 fa-old-padding"
       />
     </button>

src/components/settings_modal/tabs/version_tab.js

@@ -1,6 +1,6 @@
 import { extractCommit } from 'src/services/version/version.service'
 
-const pleromaFeCommitUrl = 'https://akkoma.dev/AkkomaGang/pleroma-fe/commit/'
+const pleromaFeCommitUrl = 'https://akkoma.dev/eris/pleroma-fe/commit/'
 const pleromaBeCommitUrl = 'https://akkoma.dev/AkkomaGang/akkoma/commit/'
 
 const VersionTab = {

src/components/staff_panel/staff_panel.vue

@@ -12,7 +12,7 @@
           :key="group.role"
           class="staff-group"
         >
-          <h4>{{ $t('general.role.' + group.role) }}</h4>
+          <h4>The Admin Team</h4>
           <basic-user-card
             v-for="user in group.users"
             :key="user.screen_name"
@@ -30,10 +30,21 @@
 
 .staff-group {
   padding-left: 1em;
-  padding-top: 1em;
+  padding-top: 0.2em;
+  padding-bottom: 2px;
 
   .basic-user-card {
+    padding: 0.6em 0.4em;
     padding-left: 0;
+    display: inline-block;
+  }
+
+  .basic-user-card-collapsed-content {
+    display: none;
+  }
+
+  .still-image {
+    border-radius: 15px;
   }
 }
 

src/components/status/status.js

@@ -27,6 +27,7 @@ import {
   faLock,
   faLockOpen,
   faGlobe,
+  faBiohazard,
   faTimes,
   faRetweet,
   faReply,
@@ -46,6 +47,7 @@ library.add(
   faEnvelope,
   faGlobe,
   faLock,
+  faBiohazard,
   faLockOpen,
   faTimes,
   faRetweet,
@@ -455,7 +457,7 @@ const Status = {
         case 'direct':
           return 'envelope'
         case 'local':
-          return 'users'
+          return 'biohazard'
         default:
           return 'globe'
       }

src/components/status/status.vue

@@ -193,6 +193,26 @@
                     :with-direction="true"
                     :auto-update="60"
                   />
+                  <i18n-t
+                    v-if="isEdited && editingAvailable && !isPreview"
+                    keypath="status.edited_at"
+                    tag="span"
+                    class="edited-row"
+                  >
+                    <template #time>
+                      <i18n-t
+                        keypath="time.in_past"
+                        tag="span"
+                      >
+                        <template>
+                          <Timeago
+                            :time="status.edited_at"
+                            :auto-update="60"
+                          />
+                        </template>
+                      </i18n-t>
+                    </template>
+                  </i18n-t>
                 </router-link>
                 <span
                   v-if="status.visibility"
@@ -332,24 +352,6 @@
                 class="mentions-line"
               />
             </div>
-            <div
-              v-if="isEdited && editingAvailable && !isPreview"
-              class="heading-edited-row"
-            >
-              <i18n-t
-                keypath="status.edited_at"
-                tag="span"
-              >
-                <template #time>
-                  <Timeago
-                    :time="status.edited_at"
-                    :auto-update="60"
-                    :long-format="true"
-                    :with-direction="true"
-                  />
-                </template>
-              </i18n-t>
-            </div>
           </div>
 
           <div class="content">

src/components/still-image/still-image.vue

@@ -93,4 +93,9 @@
     }
   }
 }
+.still-image.emoji {
+  img {
+    height: unset;
+  }
+}
 </style>

src/components/timeline_menu/timeline_menu_content.js

@@ -5,8 +5,8 @@ import {
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome,
-  faCircle
+  faHouseChimney,
+  faCommentMedical
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -14,8 +14,8 @@ library.add(
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome,
-  faCircle
+  faHouseChimney,
+  faCommentMedical
 )
 
 const TimelineMenuContent = {

src/components/timeline_menu/timeline_menu_content.vue

@@ -8,7 +8,7 @@
         <FAIcon
           fixed-width
           class="fa-scale-110 fa-old-padding "
-          icon="home"
+          icon="house-chimney"
         />
         <span
           :title="$t('nav.home_timeline_description')"
@@ -16,22 +16,6 @@
         >{{ $t("nav.home_timeline") }}</span>
       </router-link>
     </li>
-    <li v-if="currentUser && showBubbleTimeline">
-      <router-link
-        class="menu-item"
-        :to="{ name: 'bubble-timeline' }"
-      >
-        <FAIcon
-          fixed-width
-          class="fa-scale-110 fa-old-padding "
-          icon="circle"
-        />
-        <span
-          :title="$t('nav.bubble_timeline_description')"
-          :aria-label="$t('nav.bubble_timeline_description')"
-        >{{ $t("nav.bubble_timeline") }}</span>
-      </router-link>
-    </li>
     <li v-if="currentUser || !(privateMode || restrictedTimelines.public)">
       <router-link
         class="menu-item"
@@ -64,6 +48,22 @@
         >{{ $t("nav.twkn") }}</span>
       </router-link>
     </li>
+    <li v-if="currentUser && showBubbleTimeline">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'bubble-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="comment-medical"
+        />
+        <span
+          :title="$t('nav.bubble_timeline_description')"
+          :aria-label="$t('nav.bubble_timeline_description')"
+        >{{ $t("nav.bubble_timeline") }}</span>
+      </router-link>
+    </li>
     <li v-if="currentUser">
       <router-link
         class="menu-item"

src/components/user_card/user_card.scss

@@ -235,7 +235,7 @@
     line-height: 22px;
     flex-wrap: wrap;
 
-    .following, .requested_by {
+    .following, .requested_by, .blocking {
       flex: 1 0 auto;
       margin: 0;
       margin-bottom: .25em;

src/components/user_card/user_card.vue

@@ -127,6 +127,12 @@
           </div>
         </div>
         <div class="user-meta">
+          <div
+            v-if="relationship.blocked_by && loggedIn && isOtherUser"
+            class="blocking"
+          >
+            {{ $t('user_card.blocks_you') }}
+          </div>
           <div
             v-if="relationship.followed_by && loggedIn && isOtherUser"
             class="following"
@@ -187,6 +193,7 @@
             <FollowButton
               :relationship="relationship"
               :user="user"
+              :disabled="relationship.blocked_by"
             />
             <template v-if="relationship.following">
               <ProgressButton

src/components/user_profile/user_profile.vue

@@ -90,6 +90,7 @@
           :user-id="userId"
           :in-profile="true"
           :footer-slipgate="footerRef"
+          :disabled="!currentUser"
         />
         <div
           v-if="followsTabVisible"
@@ -128,6 +129,7 @@
           :user-id="userId"
           :in-profile="true"
           :footer-slipgate="footerRef"
+          :disabled="!currentUser"
         />
         <Timeline
           v-if="isUs"

src/i18n/en.json

@@ -1,11 +1,11 @@
 {
     "about": {
-        "bubble_instances": "Local Bubble Instances",
+        "bubble_instances": "Recommended Instances",
         "bubble_instances_description": "Instances chosen by the admins to represent the local area of this instance",
         "mrf": {
             "federation": "Federation",
             "keyword": {
-                "ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
+                "ftl_removal": "Removal from Federated Timeline",
                 "is_replaced_by": "→",
                 "keyword_policies": "Keyword policies",
                 "reject": "Reject",
@@ -16,8 +16,8 @@
             "simple": {
                 "accept": "Accept",
                 "accept_desc": "This instance only accepts messages from the following instances:",
-                "ftl_removal": "Removal from \"Known Network\" Timeline",
-                "ftl_removal_desc": "This instance removes these instances from \"Known Network\" timeline:",
+                "ftl_removal": "Removal from Federated Timeline",
+                "ftl_removal_desc": "This instance removes these instances from the federated timeline:",
                 "instance": "Instance",
                 "media_nsfw": "Media force-set as sensitive",
                 "media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:",
@@ -27,8 +27,8 @@
                 "quarantine": "Quarantine",
                 "quarantine_desc": "This instance will not send posts to the following instances:",
                 "reason": "Reason",
-                "reject": "Reject",
-                "reject_desc": "This instance will not accept messages from the following instances:",
+                "reject": "Instance Blocks",
+                "reject_desc": "This instance blocks messages to and from the following instances:",
                 "simple_policies": "Instance-specific policies"
             }
         },
@@ -302,12 +302,12 @@
         "announcements": "Announcements",
         "back": "Back",
         "bookmarks": "Bookmarks",
-        "bubble_timeline": "Bubble timeline",
+        "bubble_timeline": "Recommended Instances",
         "bubble_timeline_description": "Posts from instances close to yours, as recommended by the admins",
         "chats": "Chats",
-        "dms": "Direct messages",
-        "friend_requests": "Follow requests",
-        "home_timeline": "Home timeline",
+        "dms": "Direct Messages",
+        "friend_requests": "Follow Requests",
+        "home_timeline": "Home Timeline",
         "home_timeline_description": "Posts from people you follow",
         "interactions": "Interactions",
         "lists": "Lists",
@@ -315,11 +315,11 @@
         "moderation": "Moderation",
         "preferences": "Preferences",
         "public_timeline_description": "Public posts from this instance",
-        "public_tl": "Public timeline",
+        "public_tl": "Local Timeline",
         "search": "Search",
         "timeline": "Timeline",
         "timelines": "Timelines",
-        "twkn": "Known Network",
+        "twkn": "Federated Timeline",
         "twkn_timeline_description": "Posts from the entire network",
         "user_search": "User Search",
         "who_to_follow": "Who to follow"
@@ -379,7 +379,7 @@
             "text/x.misskeymarkdown": "MFM"
         },
         "content_warning": "Content Warning (optional)",
-        "default": "Just arrived at Luna Nova Academy",
+        "default": "Just landed on Neptune",
         "direct_warning_to_all": "This post will be visible to all the mentioned users.",
         "direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.",
         "edit_remote_warning": "Changes made to the post may not be visible on some instances!",
@@ -963,7 +963,7 @@
         "edit": "Edit",
         "edit_history": "Edit History",
         "edit_history_modal_title": "Edited {historyCount} time | Edited {historyCount} times",
-        "edited_at": "Edited {time}",
+        "edited_at": " (Edited {time})",
         "expand": "Expand",
         "external_source": "External source",
         "favorites": "Favorites",
@@ -1121,6 +1121,7 @@
         "block_confirm_title": "Block user",
         "block_progress": "Blocking…",
         "blocked": "Blocked!",
+        "blocks_you": "Blocks you!",
         "bot": "Bot",
         "deactivated": "Deactivated",
         "deny": "Deny",

src/modules/config.js

@@ -52,11 +52,11 @@ export const defaultState = {
   loopVideoSilentOnly: true,
   streaming: false,
   emojiReactionsOnTimeline: true,
-  alwaysShowNewPostButton: false,
+  alwaysShowNewPostButton: true,
   autohideFloatingPostButton: false,
   pauseOnUnfocused: true,
   stopGifs: undefined,
-  replyVisibility: 'all',
+  replyVisibility: 'following',
   thirdColumnMode: 'notifications',
   notificationVisibility: {
     follows: true,
@@ -98,7 +98,7 @@ export const defaultState = {
   useAtIcon: undefined, // instance default
   mentionLinkDisplay: undefined, // instance default
   mentionLinkShowTooltip: undefined, // instance default
-  mentionLinkShowAvatar: undefined, // instance default
+  mentionLinkShowAvatar: true, // instance default
   mentionLinkFadeDomain: undefined, // instance default
   mentionLinkShowYous: undefined, // instance default
   mentionLinkBoldenYou: undefined, // instance default

src/modules/instance.js

@@ -20,11 +20,11 @@ const defaultState = {
   defaultBanner: '/images/banner.png',
   background: '/static/aurora_borealis.jpg',
   collapseMessageWithSubject: true,
-  greentext: false,
+  greentext: true,
   useAtIcon: false,
   mentionLinkDisplay: 'short',
   mentionLinkShowTooltip: true,
-  mentionLinkShowAvatar: false,
+  mentionLinkShowAvatar: true,
   mentionLinkFadeDomain: true,
   mentionLinkShowYous: false,
   mentionLinkBoldenYou: true,
@@ -60,7 +60,7 @@ const defaultState = {
   showFeaturesPanel: true,
   showInstanceSpecificPanel: false,
   showNavShortcuts: true,
-  showWiderShortcuts: true,
+  showWiderShortcuts: false,
   sidebarRight: false,
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',

src/modules/interface.js

@@ -186,7 +186,7 @@ const interfaceMod = {
       if (thirdColumnMode === 'none' || !rootState.users.currentUser) {
         commit('setLayoutType', normalOrMobile)
       } else {
-        const wideLayout = width >= 1300
+        const wideLayout = width >= 1280
         commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
       }
     },