Merge branch 'develop' into feat/favicon-badge

CHANGELOG.md

@@ -27,6 +27,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Icons changed from fontello (FontAwesome 4 + others) to FontAwesome 5 due to problems with fontello.
 - Some icons changed for better accessibility (lock, globe)
 - Logo is now clickable
+- Changed default logo to SVG version
 
 ## [2.1.1] - 2020-09-08
 ### Changed

src/App.scss

@@ -603,19 +603,24 @@ nav {
     flex-grow: 0;
   }
 }
+
 .badge {
+  box-sizing: border-box;
   display: inline-block;
   border-radius: 99px;
-  min-width: 22px;
-  max-width: 22px;
-  min-height: 22px;
-  max-height: 22px;
-  font-size: 15px;
-  line-height: 22px;
-  text-align: center;
+  max-width: 10em;
+  min-width: 1.7em;
+  height: 1.3em;
+  padding: 0.15em 0.15em;
   vertical-align: middle;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 0.9em;
+  line-height: 1;
+  text-align: center;
   white-space: nowrap;
-  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &.badge-notification {
     background-color: $fallback--cRed;

src/components/chat/chat.scss

@@ -138,11 +138,21 @@
     }
 
     .chat-view-heading {
+      box-sizing: border-box;
       position: static;
       z-index: 9999;
       top: 0;
       margin-top: 0;
       border-radius: 0;
+
+      /* This practically overlays the panel heading color over panel background
+       * color. This is needed because we allow transparent panel background and
+       * it doesn't work well in this "disjointed panel header" case
+       */
+      background:
+        linear-gradient(to top, var(--panel), var(--panel)),
+        linear-gradient(to top, var(--bg), var(--bg));
+      height: 50px;
     }
 
     .scrollable-message-list {

src/components/chat_list_item/chat_list_item.vue

@@ -21,6 +21,12 @@
           />
         </span>
         <span class="heading-right" />
+        <div class="time-wrapper">
+          <Timeago
+            :time="chat.updated_at"
+            :auto-update="60"
+          />
+        </div>
       </div>
       <div class="chat-preview">
         <StatusContent
@@ -35,12 +41,6 @@
         </div>
       </div>
     </div>
-    <div class="time-wrapper">
-      <Timeago
-        :time="chat.updated_at"
-        :auto-update="60"
-      />
-    </div>
   </div>
 </template>
 

src/components/mobile_nav/mobile_nav.vue

@@ -110,12 +110,23 @@
   }
 
   .mobile-nav-button {
+    display: inline-block;
     text-align: center;
-    margin: 0 1em;
+    padding: 0 1em;
     position: relative;
     cursor: pointer;
   }
 
+  .site-name {
+    padding: 0 .3em;
+    display: inline-block;
+  }
+
+  .item {
+    /* moslty just to get rid of extra whitespaces */
+    display: flex;
+  }
+
   .alert-dot {
     border-radius: 100%;
     height: 8px;

src/components/nav_panel/nav_panel.vue

@@ -27,7 +27,7 @@
           <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
             <div
               v-if="unreadChatCount"
-              class="badge badge-notification unread-chat-count"
+              class="badge badge-notification"
             >
               {{ unreadChatCount }}
             </div>
@@ -47,7 +47,7 @@
             />{{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
-              class="badge follow-request-count"
+              class="badge badge-notification"
             >
               {{ followRequestCount }}
             </span>
@@ -84,12 +84,6 @@
     padding: 0;
   }
 
-  .follow-request-count {
-    vertical-align: baseline;
-    background-color: $fallback--bg;
-    background-color: var(--input, $fallback--faint);
-  }
-
   li {
     position: relative;
     border-bottom: 1px solid;
@@ -156,21 +150,10 @@
     margin-right: 0.8em;
   }
 
-  .unread-chat-count {
-    font-size: 0.9em;
-    font-weight: bolder;
-    font-style: normal;
+  .badge {
     position: absolute;
     right: 0.6rem;
     top: 1.25em;
-    padding: 0 0.3em;
-    min-width: 1.3rem;
-    min-height: 1.3rem;
-    max-height: 1.3rem;
-    line-height: 1.3rem;
-    max-width: 10em;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 }
 </style>

src/components/side_drawer/side_drawer.vue

@@ -70,7 +70,7 @@
             /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
-              class="badge badge-notification unread-chat-count"
+              class="badge badge-notification"
             >
               {{ unreadChatCount }}
             </span>
@@ -99,7 +99,7 @@
             /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
-              class="badge follow-request-count"
+              class="badge badge-notification"
             >
               {{ followRequestCount }}
             </span>
@@ -272,12 +272,11 @@
   --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
 
-  .follow-request-count {
-    vertical-align: baseline;
-    background-color: $fallback--bg;
-    background-color: var(--input, $fallback--faint);
+  .badge {
+    position: absolute;
+    right: 0.7rem;
+    top: 1em;
   }
-
 }
 
 .side-drawer-logo-wrapper {

src/components/status/status.scss

@@ -59,6 +59,15 @@ $status-margin: 0.75em;
     justify-content: flex-end;
   }
 
+  ._misclick-prevention & {
+    pointer-events: none;
+
+    .attachments {
+      pointer-events: initial;
+      cursor: initial;
+    }
+  }
+
   .left-side {
     margin-right: $status-margin;
   }

src/components/timeline/timeline.js

@@ -72,7 +72,7 @@ const Timeline = {
     },
     classes () {
       let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
-      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked'])
+      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
         header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),

src/components/timeline/timeline.vue

@@ -113,7 +113,7 @@
   }
 
   &.-blocked {
-    pointer-events: none;
+    cursor: progress;
   }
 }
 

src/modules/instance.js

@@ -27,7 +27,7 @@ const defaultState = {
   hideSitename: false,
   hideUserStats: false,
   loginMethod: 'password',
-  logo: '/static/logo.png',
+  logo: '/static/logo.svg',
   logoMargin: '.2em',
   logoMask: true,
   logoLeft: false,

static/config.json

@@ -10,7 +10,7 @@
   "hideSitename": false,
   "hideUserStats": false,
   "loginMethod": "password",
-  "logo": "/static/logo.png",
+  "logo": "/static/logo.svg",
   "logoMargin": ".1em",
   "logoMask": true,
   "logoLeft": false,

static/logo.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg4485"
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata4491">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4489" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1274"
+     inkscape:window-height="1410"
+     id="namedview4487"
+     showgrid="false"
+     inkscape:zoom="1.2636719"
+     inkscape:cx="305.99333"
+     inkscape:cy="304.30809"
+     inkscape:window-x="1280"
+     inkscape:window-y="22"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g4612"
+     inkscape:document-rotation="0" />
+  <g
+     id="g4612">
+    <g
+       id="g850"
+       transform="matrix(0.99659595,0,0,0.99659595,0.37313949,0.87143746)">
+      <path
+         style="opacity:1;fill:#fba457;fill-opacity:1;stroke:#009bff;stroke-width:0;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.175879"
+         d="m 194.75841,124.65165 a 20.449443,20.449443 0 0 0 -20.44944,20.44945 v 242.24725 h 65.28091 v -262.6967 z"
+         id="path4497" />
+      <path
+         style="fill:#fba457;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 272.6236,124.65165 V 256 h 45.61799 a 20.449443,20.449443 0 0 0 20.44944,-20.44945 v -110.8989 z"
+         id="path4516" />
+      <path
+         style="opacity:1;fill:#fba457;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 272.6236,322.06744 v 65.28091 h 45.61799 a 20.449443,20.449443 0 0 0 20.44944,-20.44945 v -44.83146 z"
+         id="path4516-5" />
+    </g>
+  </g>
+</svg>

static/terms-of-service.html

@@ -6,4 +6,4 @@
    Pleroma install containing the real ToS for your instance.</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.png" style="display: block; margin: auto; max-width: 100%; height: 50px; object-fit: contain;" />
+<img src="/static/logo.svg" style="display: block; margin: auto; max-width: 100%; height: 50px; object-fit: contain;" />