Merge branch 'develop' into feat/favicon-badge

This commit is contained in:
Shpuld Shpuldson 2020-11-06 14:57:50 +02:00
commit 56c1d65384
15 changed files with 136 additions and 47 deletions

View file

@ -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. - Icons changed from fontello (FontAwesome 4 + others) to FontAwesome 5 due to problems with fontello.
- Some icons changed for better accessibility (lock, globe) - Some icons changed for better accessibility (lock, globe)
- Logo is now clickable - Logo is now clickable
- Changed default logo to SVG version
## [2.1.1] - 2020-09-08 ## [2.1.1] - 2020-09-08
### Changed ### Changed

View file

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

View file

@ -138,11 +138,21 @@
} }
.chat-view-heading { .chat-view-heading {
box-sizing: border-box;
position: static; position: static;
z-index: 9999; z-index: 9999;
top: 0; top: 0;
margin-top: 0; margin-top: 0;
border-radius: 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 { .scrollable-message-list {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

71
static/logo.svg Normal file
View file

@ -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>

After

Width:  |  Height:  |  Size: 2.6 KiB

View file

@ -6,4 +6,4 @@
Pleroma install containing the real ToS for your instance.</p> 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> <p>See the <a href='https://docs.pleroma.social/backend/configuration/static_dir/'>Pleroma documentation</a> for more information.</p>
<br> <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;" />