Compare commits
1 Commits
develop
...
renovate/v
| Author | SHA1 | Date |
|---|---|---|
Pleroma Renovate Bot
|
112ca85d91 |
|
|
@ -43,8 +43,6 @@ lint:
|
||||||
|
|
||||||
test:
|
test:
|
||||||
stage: test
|
stage: test
|
||||||
tags:
|
|
||||||
- amd64
|
|
||||||
variables:
|
variables:
|
||||||
APT_CACHE_DIR: apt-cache
|
APT_CACHE_DIR: apt-cache
|
||||||
script:
|
script:
|
||||||
|
|
@ -56,8 +54,6 @@ test:
|
||||||
|
|
||||||
build:
|
build:
|
||||||
stage: build
|
stage: build
|
||||||
tags:
|
|
||||||
- amd64
|
|
||||||
script:
|
script:
|
||||||
- yarn
|
- yarn
|
||||||
- npm run build
|
- npm run build
|
||||||
|
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
stop using that one runner for intensive tasks
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Added ability to mute sensitive posts (ported from eintei)
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
The expiry date indication won't be shown if the poll never expires
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Synchronized requested notification types with backend, hopefully should fix missing notifications for polls and follow requests
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Add poll end notifications to fetched types.
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Display quotes count on posts and add quotes list page
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Option to only show scrobbles that are recent enough
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Display loading and error indicator for conversation page
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Add caching system for themes3
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
fix color inputs and some in-development themes3 issues
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Overhauled the way themes work, migrating to new Pleroma Interface Style Sheets system.
|
|
||||||
|
|
@ -32,7 +32,6 @@
|
||||||
"click-outside-vue3": "4.0.1",
|
"click-outside-vue3": "4.0.1",
|
||||||
"cropperjs": "1.5.13",
|
"cropperjs": "1.5.13",
|
||||||
"escape-html": "1.0.3",
|
"escape-html": "1.0.3",
|
||||||
"hash-sum": "^2.0.0",
|
|
||||||
"js-cookie": "3.0.5",
|
"js-cookie": "3.0.5",
|
||||||
"localforage": "1.10.0",
|
"localforage": "1.10.0",
|
||||||
"parse-link-header": "2.0.0",
|
"parse-link-header": "2.0.0",
|
||||||
|
|
@ -58,10 +57,10 @@
|
||||||
"@intlify/vue-i18n-loader": "5.0.1",
|
"@intlify/vue-i18n-loader": "5.0.1",
|
||||||
"@ungap/event-target": "0.2.4",
|
"@ungap/event-target": "0.2.4",
|
||||||
"@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
|
"@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
|
||||||
"@vue/babel-plugin-jsx": "1.2.1",
|
"@vue/babel-plugin-jsx": "1.2.2",
|
||||||
"@vue/compiler-sfc": "3.2.45",
|
"@vue/compiler-sfc": "3.2.45",
|
||||||
"@vue/test-utils": "2.2.8",
|
"@vue/test-utils": "2.2.8",
|
||||||
"autoprefixer": "10.4.19",
|
"autoprefixer": "10.4.18",
|
||||||
"babel-loader": "9.1.3",
|
"babel-loader": "9.1.3",
|
||||||
"babel-plugin-lodash": "3.3.4",
|
"babel-plugin-lodash": "3.3.4",
|
||||||
"chai": "4.3.7",
|
"chai": "4.3.7",
|
||||||
|
|
|
||||||
425
src/App.scss
425
src/App.scss
|
|
@ -1,10 +1,9 @@
|
||||||
// stylelint-disable rscss/class-format
|
// stylelint-disable rscss/class-format
|
||||||
/* stylelint-disable no-descending-specificity */
|
/* stylelint-disable no-descending-specificity */
|
||||||
|
@import "./variables";
|
||||||
@import "./panel";
|
@import "./panel";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--font-size: 14px;
|
|
||||||
--status-margin: 0.75em;
|
|
||||||
--navbar-height: 3.5rem;
|
--navbar-height: 3.5rem;
|
||||||
--post-line-height: 1.4;
|
--post-line-height: 1.4;
|
||||||
// Z-Index stuff
|
// Z-Index stuff
|
||||||
|
|
@ -14,21 +13,19 @@
|
||||||
--ZI_navbar_popovers: 7500;
|
--ZI_navbar_popovers: 7500;
|
||||||
--ZI_navbar: 7000;
|
--ZI_navbar: 7000;
|
||||||
--ZI_popovers: 6000;
|
--ZI_popovers: 6000;
|
||||||
|
|
||||||
// Fallback for when stuff is loading
|
|
||||||
--background: var(--bg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: var(--font-size);
|
font-size: 14px;
|
||||||
// overflow-x: clip causes my browser's tab to crash with SIGILL lul
|
// overflow-x: clip causes my browser's tab to crash with SIGILL lul
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-family: var(--font);
|
font-family: var(--interfaceFont, sans-serif);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
overscroll-behavior-y: none;
|
overscroll-behavior-y: none;
|
||||||
|
|
@ -45,35 +42,17 @@ body {
|
||||||
// have a cursor/pointer to operate them
|
// have a cursor/pointer to operate them
|
||||||
@media (any-pointer: fine) {
|
@media (any-pointer: fine) {
|
||||||
* {
|
* {
|
||||||
scrollbar-color: var(--fg) transparent;
|
scrollbar-color: var(--btn) transparent;
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-corner {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-resizer {
|
|
||||||
/* stylelint-disable-next-line declaration-no-important */
|
|
||||||
background-color: transparent !important;
|
|
||||||
background-image:
|
|
||||||
linear-gradient(
|
|
||||||
135deg,
|
|
||||||
transparent calc(50% - 1px),
|
|
||||||
var(--textFaint) 50%,
|
|
||||||
transparent calc(50% + 1px),
|
|
||||||
transparent calc(75% - 1px),
|
|
||||||
var(--textFaint) 75%,
|
|
||||||
transparent calc(75% + 1px),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-button,
|
&::-webkit-scrollbar-button,
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
box-shadow: var(--shadow);
|
background-color: var(--btn);
|
||||||
border-radius: var(--roundness);
|
box-shadow: var(--buttonShadow);
|
||||||
|
border-radius: var(--btnRadius);
|
||||||
}
|
}
|
||||||
|
|
||||||
// horizontal/vertical/increment/decrement are webkit-specific stuff
|
// horizontal/vertical/increment/decrement are webkit-specific stuff
|
||||||
|
|
@ -82,7 +61,7 @@ body {
|
||||||
&::-webkit-scrollbar-button {
|
&::-webkit-scrollbar-button {
|
||||||
--___bgPadding: 2px;
|
--___bgPadding: 2px;
|
||||||
|
|
||||||
color: var(--text);
|
color: var(--btnText);
|
||||||
background-repeat: no-repeat, no-repeat;
|
background-repeat: no-repeat, no-repeat;
|
||||||
|
|
||||||
&:horizontal {
|
&:horizontal {
|
||||||
|
|
@ -90,15 +69,15 @@ body {
|
||||||
|
|
||||||
&:increment {
|
&:increment {
|
||||||
background-image:
|
background-image:
|
||||||
linear-gradient(45deg, var(--text) 50%, transparent 51%),
|
linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
|
||||||
linear-gradient(-45deg, transparent 50%, var(--text) 51%);
|
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
|
||||||
background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
|
background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:decrement {
|
&:decrement {
|
||||||
background-image:
|
background-image:
|
||||||
linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
|
linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
|
||||||
linear-gradient(-45deg, var(--text) 50%, transparent 51%);
|
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
|
||||||
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
|
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -108,15 +87,15 @@ body {
|
||||||
|
|
||||||
&:increment {
|
&:increment {
|
||||||
background-image:
|
background-image:
|
||||||
linear-gradient(-45deg, transparent 50%, var(--text) 51%),
|
linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
|
||||||
linear-gradient(45deg, transparent 50%, var(--text) 51%);
|
linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
|
||||||
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
|
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:decrement {
|
&:decrement {
|
||||||
background-image:
|
background-image:
|
||||||
linear-gradient(-45deg, var(--text) 50%, transparent 51%),
|
linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
|
||||||
linear-gradient(45deg, var(--text) 50%, transparent 51%);
|
linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
|
||||||
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
|
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -125,14 +104,15 @@ body {
|
||||||
}
|
}
|
||||||
// Body should have background to scrollbar otherwise it will use white (body color?)
|
// Body should have background to scrollbar otherwise it will use white (body color?)
|
||||||
html {
|
html {
|
||||||
scrollbar-color: var(--fg) var(--wallpaper);
|
scrollbar-color: var(--selectedMenu) var(--wallpaper);
|
||||||
background: var(--wallpaper);
|
background: var(--wallpaper);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--link);
|
color: $fallback--link;
|
||||||
|
color: var(--link, $fallback--link);
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
|
|
@ -148,12 +128,27 @@ h4 {
|
||||||
i[class*="icon-"],
|
i[class*="icon-"],
|
||||||
.svg-inline--fa,
|
.svg-inline--fa,
|
||||||
.iconLetter {
|
.iconLetter {
|
||||||
color: var(--icon);
|
color: $fallback--icon;
|
||||||
|
color: var(--icon, $fallback--icon);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-unstyled:hover,
|
||||||
|
a:hover {
|
||||||
|
> i[class*="icon-"],
|
||||||
|
> .svg-inline--fa,
|
||||||
|
> .iconLetter {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
z-index: var(--ZI_navbar);
|
z-index: var(--ZI_navbar);
|
||||||
box-shadow: var(--shadow);
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--topBar, $fallback--fg);
|
||||||
|
color: $fallback--faint;
|
||||||
|
color: var(--faint, $fallback--faint);
|
||||||
|
box-shadow: 0 0 4px rgb(0 0 0 / 60%);
|
||||||
|
box-shadow: var(--topBarShadow);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: var(--navbar-height);
|
height: var(--navbar-height);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -200,7 +195,8 @@ nav {
|
||||||
grid-column: 1 / span 3;
|
grid-column: 1 / span 3;
|
||||||
grid-row: 1 / 1;
|
grid-row: 1 / 1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-color: var(--underlay);
|
background-color: rgb(0 0 0 / 15%);
|
||||||
|
background-color: var(--underlay, rgb(0 0 0 / 15%));
|
||||||
z-index: -1000;
|
z-index: -1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -208,6 +204,7 @@ nav {
|
||||||
--miniColumn: 25rem;
|
--miniColumn: 25rem;
|
||||||
--maxiColumn: 45rem;
|
--maxiColumn: 45rem;
|
||||||
--columnGap: 1em;
|
--columnGap: 1em;
|
||||||
|
--status-margin: 0.75em;
|
||||||
--effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
|
--effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
|
||||||
--effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
|
--effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
|
||||||
--effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
|
--effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
|
||||||
|
|
@ -369,113 +366,106 @@ nav {
|
||||||
|
|
||||||
.button-default {
|
.button-default {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--btnText, $fallback--text);
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--btn, $fallback--fg);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--roundness);
|
border-radius: $fallback--btnRadius;
|
||||||
|
border-radius: var(--btnRadius, $fallback--btnRadius);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: var(--background);
|
box-shadow: $fallback--buttonShadow;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--buttonShadow);
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-family: var(--font);
|
font-family: var(--interfaceFont, sans-serif);
|
||||||
|
|
||||||
|
&.-sublime {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
i[class*="icon-"],
|
||||||
|
.svg-inline--fa {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnText, $fallback--text);
|
||||||
|
}
|
||||||
|
|
||||||
&::-moz-focus-inner {
|
&::-moz-focus-inner {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 4px rgb(255 255 255 / 30%);
|
||||||
|
box-shadow: var(--buttonHoverShadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
box-shadow:
|
||||||
|
0 0 4px 0 rgb(255 255 255 / 30%),
|
||||||
|
0 1px 0 0 rgb(0 0 0 / 20%) inset,
|
||||||
|
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
|
||||||
|
box-shadow: var(--buttonPressedShadow);
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnPressedText, $fallback--text);
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--btnPressed, $fallback--fg);
|
||||||
|
|
||||||
|
svg,
|
||||||
|
i {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnPressedText, $fallback--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnDisabledText, $fallback--text);
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--btnDisabled, $fallback--fg);
|
||||||
|
|
||||||
|
svg,
|
||||||
|
i {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnDisabledText, $fallback--text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item,
|
&.toggled {
|
||||||
.list-item {
|
color: $fallback--text;
|
||||||
display: block;
|
color: var(--btnToggledText, $fallback--text);
|
||||||
box-sizing: border-box;
|
background-color: $fallback--fg;
|
||||||
border: none;
|
background-color: var(--btnToggled, $fallback--fg);
|
||||||
outline: none;
|
box-shadow:
|
||||||
text-align: initial;
|
0 0 4px 0 rgb(255 255 255 / 30%),
|
||||||
font-size: inherit;
|
0 1px 0 0 rgb(0 0 0 / 20%) inset,
|
||||||
font-family: inherit;
|
0 -1px 0 0 rgb(255 255 255 / 20%) inset;
|
||||||
font-weight: 400;
|
box-shadow: var(--buttonPressedShadow);
|
||||||
cursor: pointer;
|
|
||||||
color: inherit;
|
|
||||||
clear: both;
|
|
||||||
position: relative;
|
|
||||||
white-space: nowrap;
|
|
||||||
border-color: var(--border);
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0;
|
|
||||||
border-top-width: 1px;
|
|
||||||
width: 100%;
|
|
||||||
line-height: var(--__line-height);
|
|
||||||
padding: var(--__vertical-gap) var(--__horizontal-gap);
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
--__line-height: 1.5em;
|
svg,
|
||||||
--__horizontal-gap: 0.75em;
|
i {
|
||||||
--__vertical-gap: 0.5em;
|
color: $fallback--text;
|
||||||
|
color: var(--btnToggledText, $fallback--text);
|
||||||
&.-non-interactive {
|
}
|
||||||
cursor: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-active,
|
&.danger {
|
||||||
&:hover {
|
// TODO: add better color variable
|
||||||
border-top-width: 1px;
|
color: $fallback--text;
|
||||||
border-bottom-width: 1px;
|
color: var(--alertErrorPanelText, $fallback--text);
|
||||||
}
|
background-color: $fallback--alertError;
|
||||||
|
background-color: var(--alertError, $fallback--alertError);
|
||||||
&.-active + &,
|
|
||||||
&:hover + & {
|
|
||||||
border-top-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover + .menu-item-collapsible:not(.-expanded) + &,
|
|
||||||
&.-active + .menu-item-collapsible:not(.-expanded) + & {
|
|
||||||
border-top-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[aria-expanded="true"] {
|
|
||||||
border-bottom-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
button:not(.button-default) {
|
|
||||||
text-align: initial;
|
|
||||||
padding: 0;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
display: inline;
|
|
||||||
font-size: 100%;
|
|
||||||
font-family: inherit;
|
|
||||||
line-height: unset;
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-top-right-radius: var(--roundness);
|
|
||||||
border-top-left-radius: var(--roundness);
|
|
||||||
border-top-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom-right-radius: var(--roundness);
|
|
||||||
border-bottom-left-radius: var(--roundness);
|
|
||||||
border-bottom-width: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-unstyled {
|
.button-unstyled {
|
||||||
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
display: inline;
|
display: inline;
|
||||||
text-align: initial;
|
text-align: initial;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
box-shadow: var(--shadow);
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
line-height: unset;
|
line-height: unset;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -483,23 +473,28 @@ nav {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
&.-link {
|
&.-link {
|
||||||
/* stylelint-disable-next-line declaration-no-important */
|
color: $fallback--link;
|
||||||
color: var(--link) !important;
|
color: var(--link, $fallback--link);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.-fullwidth {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.-hover-highlight {
|
||||||
|
&:hover svg {
|
||||||
|
color: $fallback--lightText;
|
||||||
|
color: var(--lightText, $fallback--lightText);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
textarea {
|
textarea,
|
||||||
border: none;
|
|
||||||
display: inline-block;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
.input {
|
||||||
&.unstyled {
|
&.unstyled {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
/* stylelint-disable-next-line declaration-no-important */
|
background: none;
|
||||||
background: none !important;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
height: unset;
|
height: unset;
|
||||||
}
|
}
|
||||||
|
|
@ -507,11 +502,19 @@ textarea {
|
||||||
--_padding: 0.5em;
|
--_padding: 0.5em;
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--roundness);
|
border-radius: $fallback--inputRadius;
|
||||||
background-color: var(--background);
|
border-radius: var(--inputRadius, $fallback--inputRadius);
|
||||||
color: var(--text);
|
box-shadow:
|
||||||
box-shadow: var(--shadow);
|
0 1px 0 0 rgb(0 0 0 / 20%) inset,
|
||||||
font-family: var(--font);
|
0 -1px 0 0 rgb(255 255 255 / 20%) inset,
|
||||||
|
0 0 2px 0 rgb(0 0 0 / 100%) inset;
|
||||||
|
box-shadow: var(--inputShadow);
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--input, $fallback--fg);
|
||||||
|
color: $fallback--lightText;
|
||||||
|
color: var(--inputText, $fallback--lightText);
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-family: var(--inputFont, sans-serif);
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -525,6 +528,7 @@ textarea {
|
||||||
&[disabled="disabled"],
|
&[disabled="disabled"],
|
||||||
&.disabled {
|
&.disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[type="range"] {
|
&[type="range"] {
|
||||||
|
|
@ -539,9 +543,9 @@ textarea {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
&:checked + label::before {
|
&:checked + label::before {
|
||||||
box-shadow: var(--shadow);
|
box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
|
||||||
background-color: var(--background);
|
box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
|
||||||
color: var(--text);
|
background-color: var(--accent, $fallback--link);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
|
|
@ -555,14 +559,16 @@ textarea {
|
||||||
+ label::before {
|
+ label::before {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
content: "•";
|
content: "";
|
||||||
transition: box-shadow 200ms;
|
transition: box-shadow 200ms;
|
||||||
width: 1.1em;
|
width: 1.1em;
|
||||||
height: 1.1em;
|
height: 1.1em;
|
||||||
border-radius: 100%; // Radio buttons should always be circle
|
border-radius: 100%; // Radio buttons should always be circle
|
||||||
background-color: var(--background);
|
box-shadow: 0 0 2px black inset;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--inputShadow);
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--input, $fallback--fg);
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
|
|
@ -575,9 +581,8 @@ textarea {
|
||||||
|
|
||||||
&[type="checkbox"] {
|
&[type="checkbox"] {
|
||||||
&:checked + label::before {
|
&:checked + label::before {
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
background-color: var(--background);
|
color: var(--inputText, $fallback--text);
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
|
|
@ -595,9 +600,13 @@ textarea {
|
||||||
transition: color 200ms;
|
transition: color 200ms;
|
||||||
width: 1.1em;
|
width: 1.1em;
|
||||||
height: 1.1em;
|
height: 1.1em;
|
||||||
border-radius: var(--roundness);
|
border-radius: $fallback--checkboxRadius;
|
||||||
box-shadow: var(--shadow);
|
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
|
||||||
|
box-shadow: 0 0 2px black inset;
|
||||||
|
box-shadow: var(--inputShadow);
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--input, $fallback--fg);
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
|
|
@ -614,14 +623,16 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Textareas should have stock line-height + vertical padding instead of huge line-height
|
// Textareas should have stock line-height + vertical padding instead of huge line-height
|
||||||
textarea.input {
|
textarea {
|
||||||
padding: var(--_padding);
|
padding: var(--_padding);
|
||||||
line-height: var(--post-line-height);
|
line-height: var(--post-line-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
option {
|
option {
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
background-color: var(--background);
|
color: var(--text, $fallback--text);
|
||||||
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--bg, $fallback--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide-number-spinner {
|
.hide-number-spinner {
|
||||||
|
|
@ -642,7 +653,7 @@ option {
|
||||||
|
|
||||||
li {
|
li {
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: var(--roundness);
|
border-radius: var(--inputRadius);
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
margin: 0.25em;
|
margin: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
@ -703,58 +714,74 @@ option {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
&.-dot,
|
&.badge-notification {
|
||||||
&.-counter {
|
background-color: $fallback--cRed;
|
||||||
margin: 0;
|
background-color: var(--badgeNotification, $fallback--cRed);
|
||||||
position: absolute;
|
color: white;
|
||||||
}
|
color: var(--badgeNotificationText, white);
|
||||||
|
|
||||||
&.-dot {
|
|
||||||
min-height: 8px;
|
|
||||||
max-height: 8px;
|
|
||||||
min-width: 8px;
|
|
||||||
max-width: 8px;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 0;
|
|
||||||
font-size: 0;
|
|
||||||
left: calc(50% - 4px);
|
|
||||||
top: calc(50% - 4px);
|
|
||||||
margin-left: 6px;
|
|
||||||
margin-top: -6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.-counter {
|
|
||||||
border-radius: var(--roundness);
|
|
||||||
font-size: 0.75em;
|
|
||||||
line-height: 1;
|
|
||||||
text-align: right;
|
|
||||||
padding: 0.2em;
|
|
||||||
min-width: 0;
|
|
||||||
left: calc(50% - 0.5em);
|
|
||||||
top: calc(50% - 0.4em);
|
|
||||||
margin-left: 0.7em;
|
|
||||||
margin-top: -1em;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert {
|
.alert {
|
||||||
margin: 0 0.35em;
|
margin: 0 0.35em;
|
||||||
padding: 0 0.25em;
|
padding: 0 0.25em;
|
||||||
border-radius: var(--roundness);
|
border-radius: $fallback--tooltipRadius;
|
||||||
border: 1px solid var(--border);
|
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
background-color: $fallback--alertError;
|
||||||
|
background-color: var(--alertError, $fallback--alertError);
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--alertErrorText, $fallback--text);
|
||||||
|
|
||||||
|
.panel-heading & {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--alertErrorPanelText, $fallback--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
background-color: $fallback--alertWarning;
|
||||||
|
background-color: var(--alertWarning, $fallback--alertWarning);
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--alertWarningText, $fallback--text);
|
||||||
|
|
||||||
|
.panel-heading & {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--alertWarningPanelText, $fallback--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
background-color: var(--alertSuccess, $fallback--alertWarning);
|
||||||
|
color: var(--alertSuccessText, $fallback--text);
|
||||||
|
|
||||||
|
.panel-heading & {
|
||||||
|
color: var(--alertSuccessPanelText, $fallback--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.faint {
|
.faint {
|
||||||
--text: var(--textFaint);
|
color: $fallback--faint;
|
||||||
--link: var(--linkFaint);
|
color: var(--faint, $fallback--faint);
|
||||||
|
}
|
||||||
|
|
||||||
color: var(--text);
|
.faint-link {
|
||||||
|
color: $fallback--faint;
|
||||||
|
color: var(--faint, $fallback--faint);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.visibility-notice {
|
.visibility-notice {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
border: 1px solid var(--textFaint);
|
border: 1px solid $fallback--faint;
|
||||||
border-radius: var(--roundness);
|
border: 1px solid var(--faint, $fallback--faint);
|
||||||
|
border-radius: $fallback--inputRadius;
|
||||||
|
border-radius: var(--inputRadius, $fallback--inputRadius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-dismissible {
|
.notice-dismissible {
|
||||||
|
|
@ -775,10 +802,6 @@ option {
|
||||||
&.iconLetter {
|
&.iconLetter {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.svg-inline--fa {
|
|
||||||
vertical-align: -0.15em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fa-old-padding {
|
.fa-old-padding {
|
||||||
|
|
@ -793,11 +816,6 @@ option {
|
||||||
opacity: 0.25;
|
opacity: 0.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeago {
|
|
||||||
--link: var(--text);
|
|
||||||
--linkFaint: var(--textFaint);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-hint {
|
.login-hint {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
|
@ -896,8 +914,3 @@ option {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
*::selection {
|
|
||||||
color: var(--selectionText);
|
|
||||||
background-color: var(--selectionBackground);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-show="$store.state.interface.themeApplied"
|
|
||||||
id="app-loaded"
|
id="app-loaded"
|
||||||
:style="bgStyle"
|
:style="bgStyle"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
$main-color: #f58d2c;
|
||||||
|
$main-background: white;
|
||||||
|
$darkened-background: whitesmoke;
|
||||||
|
|
||||||
|
$fallback--bg: #121a24;
|
||||||
|
$fallback--fg: #182230;
|
||||||
|
$fallback--faint: rgb(185 185 186 / 50%);
|
||||||
|
$fallback--text: #b9b9ba;
|
||||||
|
$fallback--link: #d8a070;
|
||||||
|
$fallback--icon: #666;
|
||||||
|
$fallback--lightBg: rgb(21 30 42);
|
||||||
|
$fallback--lightText: #b9b9ba;
|
||||||
|
$fallback--border: #222;
|
||||||
|
$fallback--cRed: #f00;
|
||||||
|
$fallback--cBlue: #0095ff;
|
||||||
|
$fallback--cGreen: #0fa00f;
|
||||||
|
$fallback--cOrange: orange;
|
||||||
|
|
||||||
|
$fallback--alertError: rgb(211 16 20 / 50%);
|
||||||
|
$fallback--alertWarning: rgb(111 111 20 / 50%);
|
||||||
|
|
||||||
|
$fallback--panelRadius: 10px;
|
||||||
|
$fallback--checkboxRadius: 2px;
|
||||||
|
$fallback--btnRadius: 4px;
|
||||||
|
$fallback--inputRadius: 4px;
|
||||||
|
$fallback--tooltipRadius: 5px;
|
||||||
|
$fallback--avatarRadius: 4px;
|
||||||
|
$fallback--avatarAltRadius: 10px;
|
||||||
|
$fallback--attachmentRadius: 10px;
|
||||||
|
$fallback--chatMessageRadius: 10px;
|
||||||
|
|
||||||
|
$fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%),
|
||||||
|
0 1px 0 0 rgb(255 255 255 / 20%) inset,
|
||||||
|
0 -1px 0 0 rgb(0 0 0 / 20%) inset;
|
||||||
|
|
||||||
|
$status-margin: 0.75em;
|
||||||
|
|
@ -14,7 +14,7 @@ import { windowWidth, windowHeight } from '../services/window_utils/window_utils
|
||||||
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
|
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
|
||||||
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
|
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
|
||||||
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
|
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
|
||||||
import { applyTheme, applyConfig, tryLoadCache } from '../services/style_setter/style_setter.js'
|
import { applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
|
||||||
import FaviconService from '../services/favicon_service/favicon_service.js'
|
import FaviconService from '../services/favicon_service/favicon_service.js'
|
||||||
import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
|
import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
|
||||||
|
|
||||||
|
|
@ -328,6 +328,8 @@ const setConfig = async ({ store }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const checkOAuthToken = async ({ store }) => {
|
const checkOAuthToken = async ({ store }) => {
|
||||||
|
// eslint-disable-next-line no-async-promise-executor
|
||||||
|
return new Promise(async (resolve, reject) => {
|
||||||
if (store.getters.getUserToken()) {
|
if (store.getters.getUserToken()) {
|
||||||
try {
|
try {
|
||||||
await store.dispatch('loginUser', store.getters.getUserToken())
|
await store.dispatch('loginUser', store.getters.getUserToken())
|
||||||
|
|
@ -335,7 +337,8 @@ const checkOAuthToken = async ({ store }) => {
|
||||||
console.error(e)
|
console.error(e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return Promise.resolve()
|
resolve()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const afterStoreSetup = async ({ store, i18n }) => {
|
const afterStoreSetup = async ({ store, i18n }) => {
|
||||||
|
|
@ -353,26 +356,21 @@ const afterStoreSetup = async ({ store, i18n }) => {
|
||||||
|
|
||||||
await setConfig({ store })
|
await setConfig({ store })
|
||||||
|
|
||||||
const { customTheme, customThemeSource, forceThemeRecompilation } = store.state.config
|
const { customTheme, customThemeSource } = store.state.config
|
||||||
const { theme } = store.state.instance
|
const { theme } = store.state.instance
|
||||||
const customThemePresent = customThemeSource || customTheme
|
const customThemePresent = customThemeSource || customTheme
|
||||||
|
|
||||||
if (!forceThemeRecompilation && tryLoadCache()) {
|
|
||||||
store.commit('setThemeApplied')
|
|
||||||
} else {
|
|
||||||
if (customThemePresent) {
|
if (customThemePresent) {
|
||||||
if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
|
if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
|
||||||
applyTheme(customThemeSource)
|
applyTheme(customThemeSource)
|
||||||
} else {
|
} else {
|
||||||
applyTheme(customTheme)
|
applyTheme(customTheme)
|
||||||
}
|
}
|
||||||
store.commit('setThemeApplied')
|
|
||||||
} else if (theme) {
|
} else if (theme) {
|
||||||
// do nothing, it will load asynchronously
|
// do nothing, it will load asynchronously
|
||||||
} else {
|
} else {
|
||||||
console.error('Failed to load any theme!')
|
console.error('Failed to load any theme!')
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
applyConfig(store.state.config)
|
applyConfig(store.state.config)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,6 @@ import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
|
||||||
import ListsEdit from 'components/lists_edit/lists_edit.vue'
|
import ListsEdit from 'components/lists_edit/lists_edit.vue'
|
||||||
import NavPanel from 'src/components/nav_panel/nav_panel.vue'
|
import NavPanel from 'src/components/nav_panel/nav_panel.vue'
|
||||||
import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
|
import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
|
||||||
import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
|
|
||||||
|
|
||||||
export default (store) => {
|
export default (store) => {
|
||||||
const validateAuthenticatedRoute = (to, from, next) => {
|
const validateAuthenticatedRoute = (to, from, next) => {
|
||||||
|
|
@ -52,7 +51,6 @@ export default (store) => {
|
||||||
{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
|
{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
|
||||||
{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
|
{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
|
||||||
{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
|
{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
|
||||||
{ name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
|
|
||||||
{
|
{
|
||||||
name: 'remote-user-profile-acct',
|
name: 'remote-user-profile-acct',
|
||||||
path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
|
path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
|
||||||
|
|
|
||||||
|
|
@ -11,14 +11,14 @@
|
||||||
<template v-if="relationship.following">
|
<template v-if="relationship.following">
|
||||||
<button
|
<button
|
||||||
v-if="relationship.showing_reblogs"
|
v-if="relationship.showing_reblogs"
|
||||||
class="dropdown-item menu-item"
|
class="btn button-default dropdown-item"
|
||||||
@click="hideRepeats"
|
@click="hideRepeats"
|
||||||
>
|
>
|
||||||
{{ $t('user_card.hide_repeats') }}
|
{{ $t('user_card.hide_repeats') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="!relationship.showing_reblogs"
|
v-if="!relationship.showing_reblogs"
|
||||||
class="dropdown-item menu-item"
|
class="btn button-default dropdown-item"
|
||||||
@click="showRepeats"
|
@click="showRepeats"
|
||||||
>
|
>
|
||||||
{{ $t('user_card.show_repeats') }}
|
{{ $t('user_card.show_repeats') }}
|
||||||
|
|
@ -31,34 +31,34 @@
|
||||||
<UserListMenu :user="user" />
|
<UserListMenu :user="user" />
|
||||||
<button
|
<button
|
||||||
v-if="relationship.followed_by"
|
v-if="relationship.followed_by"
|
||||||
class="dropdown-item menu-item"
|
class="btn button-default btn-block dropdown-item"
|
||||||
@click="removeUserFromFollowers"
|
@click="removeUserFromFollowers"
|
||||||
>
|
>
|
||||||
{{ $t('user_card.remove_follower') }}
|
{{ $t('user_card.remove_follower') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="relationship.blocking"
|
v-if="relationship.blocking"
|
||||||
class="dropdown-item menu-item"
|
class="btn button-default btn-block dropdown-item"
|
||||||
@click="unblockUser"
|
@click="unblockUser"
|
||||||
>
|
>
|
||||||
{{ $t('user_card.unblock') }}
|
{{ $t('user_card.unblock') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-else
|
v-else
|
||||||
class="dropdown-item menu-item"
|
class="btn button-default btn-block dropdown-item"
|
||||||
@click="blockUser"
|
@click="blockUser"
|
||||||
>
|
>
|
||||||
{{ $t('user_card.block') }}
|
{{ $t('user_card.block') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="dropdown-item menu-item"
|
class="btn button-default btn-block dropdown-item"
|
||||||
@click="reportUser"
|
@click="reportUser"
|
||||||
>
|
>
|
||||||
{{ $t('user_card.report') }}
|
{{ $t('user_card.report') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="pleromaChatMessagesAvailable"
|
v-if="pleromaChatMessagesAvailable"
|
||||||
class="dropdown-item menu-item"
|
class="btn button-default btn-block dropdown-item"
|
||||||
@click="openChat"
|
@click="openChat"
|
||||||
>
|
>
|
||||||
{{ $t('user_card.message') }}
|
{{ $t('user_card.message') }}
|
||||||
|
|
@ -122,12 +122,19 @@
|
||||||
<script src="./account_actions.js"></script>
|
<script src="./account_actions.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.AccountActions {
|
.AccountActions {
|
||||||
.ellipsis-button {
|
.ellipsis-button {
|
||||||
width: 2.5em;
|
width: 2.5em;
|
||||||
margin: -0.5em 0;
|
margin: -0.5em 0;
|
||||||
padding: 0.5em 0;
|
padding: 0.5em 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
&:not(:hover) .icon {
|
||||||
|
color: $fallback--lightText;
|
||||||
|
color: var(--lightText, $fallback--lightText);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'Alert',
|
|
||||||
selector: '.alert',
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text',
|
|
||||||
'Icon',
|
|
||||||
'Link',
|
|
||||||
'Border',
|
|
||||||
'ButtonUnstyled'
|
|
||||||
],
|
|
||||||
variants: {
|
|
||||||
normal: '.neutral',
|
|
||||||
error: '.error',
|
|
||||||
warning: '.warning',
|
|
||||||
success: '.success'
|
|
||||||
},
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
background: '--text',
|
|
||||||
opacity: 0.5,
|
|
||||||
blur: '9px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
parent: {
|
|
||||||
component: 'Alert'
|
|
||||||
},
|
|
||||||
component: 'Border',
|
|
||||||
textColor: '--parent'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
variant: 'error',
|
|
||||||
directives: {
|
|
||||||
background: '--cRed'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
variant: 'warning',
|
|
||||||
directives: {
|
|
||||||
background: '--cOrange'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
variant: 'success',
|
|
||||||
directives: {
|
|
||||||
background: '--cGreen'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -99,14 +99,16 @@
|
||||||
<script src="./announcement.js"></script>
|
<script src="./announcement.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.announcement {
|
.announcement {
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border, $fallback--border);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
padding: var(--status-margin);
|
padding: var(--status-margin, $status-margin);
|
||||||
|
|
||||||
.heading,
|
.heading,
|
||||||
.body {
|
.body {
|
||||||
margin-bottom: var(--status-margin);
|
margin-bottom: var(--status-margin, $status-margin);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<textarea
|
<textarea
|
||||||
ref="textarea"
|
ref="textarea"
|
||||||
v-model="announcement.content"
|
v-model="announcement.content"
|
||||||
class="input post-textarea"
|
class="post-textarea"
|
||||||
rows="1"
|
rows="1"
|
||||||
cols="1"
|
cols="1"
|
||||||
:placeholder="$t('announcements.post_placeholder')"
|
:placeholder="$t('announcements.post_placeholder')"
|
||||||
|
|
@ -14,7 +14,6 @@
|
||||||
<input
|
<input
|
||||||
id="announcement-start-time"
|
id="announcement-start-time"
|
||||||
v-model="announcement.startsAt"
|
v-model="announcement.startsAt"
|
||||||
class="input"
|
|
||||||
:type="announcement.allDay ? 'date' : 'datetime-local'"
|
:type="announcement.allDay ? 'date' : 'datetime-local'"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
>
|
>
|
||||||
|
|
@ -24,7 +23,6 @@
|
||||||
<input
|
<input
|
||||||
id="announcement-end-time"
|
id="announcement-end-time"
|
||||||
v-model="announcement.endsAt"
|
v-model="announcement.endsAt"
|
||||||
class="input"
|
|
||||||
:type="announcement.allDay ? 'date' : 'datetime-local'"
|
:type="announcement.allDay ? 'date' : 'datetime-local'"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -61,13 +61,15 @@
|
||||||
<script src="./announcements_page.js"></script>
|
<script src="./announcements_page.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.announcements-page {
|
.announcements-page {
|
||||||
.post-form {
|
.post-form {
|
||||||
padding: var(--status-margin);
|
padding: var(--status-margin, $status-margin);
|
||||||
|
|
||||||
.heading,
|
.heading,
|
||||||
.body {
|
.body {
|
||||||
margin-bottom: var(--status-margin);
|
margin-bottom: var(--status-margin, $status-margin);
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-button {
|
.post-button {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.Attachment {
|
.Attachment {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -7,8 +9,10 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-radius: var(--roundness);
|
border-radius: $fallback--attachmentRadius;
|
||||||
border-color: var(--border);
|
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||||
|
border-color: $fallback--border;
|
||||||
|
border-color: var(--border, $fallback--border);
|
||||||
|
|
||||||
.attachment-wrapper {
|
.attachment-wrapper {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
|
@ -80,13 +84,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-container {
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
color: inherit;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.audio-container {
|
.audio-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
|
@ -129,12 +126,23 @@
|
||||||
|
|
||||||
.attachment-button {
|
.attachment-button {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: var(--roundness);
|
border-radius: $fallback--tooltipRadius;
|
||||||
|
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 2em;
|
width: 2em;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
|
// TODO: theming? hard to theme with unknown background image color
|
||||||
|
background: rgb(230 230 230 / 70%);
|
||||||
|
|
||||||
|
.svg-inline--fa {
|
||||||
|
color: rgb(0 0 0 / 60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .svg-inline--fa {
|
||||||
|
color: rgb(0 0 0 / 90%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -209,7 +217,8 @@
|
||||||
|
|
||||||
&.-placeholder {
|
&.-placeholder {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: var(--link);
|
color: $fallback--link;
|
||||||
|
color: var(--postLink, $fallback--link);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'Attachment',
|
|
||||||
selector: '.Attachment',
|
|
||||||
validInnerComponents: [
|
|
||||||
'Border',
|
|
||||||
'ButtonUnstyled',
|
|
||||||
'Input'
|
|
||||||
],
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
roundness: 3
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'ButtonUnstyled',
|
|
||||||
parent: { component: 'Attachment' },
|
|
||||||
directives: {
|
|
||||||
background: '#FFFFFF',
|
|
||||||
opacity: 0.5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
v-if="edit"
|
v-if="edit"
|
||||||
v-model="localDescription"
|
v-model="localDescription"
|
||||||
type="text"
|
type="text"
|
||||||
class="input description-field"
|
class="description-field"
|
||||||
:placeholder="$t('post_status.media_description')"
|
:placeholder="$t('post_status.media_description')"
|
||||||
@keydown.enter.prevent=""
|
@keydown.enter.prevent=""
|
||||||
>
|
>
|
||||||
|
|
@ -175,6 +175,7 @@
|
||||||
:is="videoTag"
|
:is="videoTag"
|
||||||
v-if="type === 'video' && !hidden"
|
v-if="type === 'video' && !hidden"
|
||||||
class="video-container"
|
class="video-container"
|
||||||
|
:class="{ 'button-unstyled': 'isModal' }"
|
||||||
:href="attachment.url"
|
:href="attachment.url"
|
||||||
@click.stop.prevent="openModal"
|
@click.stop.prevent="openModal"
|
||||||
>
|
>
|
||||||
|
|
@ -252,7 +253,7 @@
|
||||||
v-if="edit"
|
v-if="edit"
|
||||||
v-model="localDescription"
|
v-model="localDescription"
|
||||||
type="text"
|
type="text"
|
||||||
class="input description-field"
|
class="description-field"
|
||||||
:placeholder="$t('post_status.media_description')"
|
:placeholder="$t('post_status.media_description')"
|
||||||
@keydown.enter.prevent=""
|
@keydown.enter.prevent=""
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-click-outside="onClickOutside"
|
v-click-outside="onClickOutside"
|
||||||
|
|
@ -7,12 +6,12 @@
|
||||||
<input
|
<input
|
||||||
v-model="term"
|
v-model="term"
|
||||||
:placeholder="placeholder"
|
:placeholder="placeholder"
|
||||||
class="input autosuggest-input"
|
class="autosuggest-input"
|
||||||
@click="onInputClick"
|
@click="onInputClick"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="resultsVisible && filtered.length > 0"
|
v-if="resultsVisible && filtered.length > 0"
|
||||||
class="panel autosuggest-results"
|
class="autosuggest-results"
|
||||||
>
|
>
|
||||||
<slot
|
<slot
|
||||||
v-for="item in filtered"
|
v-for="item in filtered"
|
||||||
|
|
@ -25,6 +24,8 @@
|
||||||
<script src="./autosuggest.js"></script>
|
<script src="./autosuggest.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.autosuggest {
|
.autosuggest {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
@ -39,15 +40,18 @@
|
||||||
top: 100%;
|
top: 100%;
|
||||||
right: 0;
|
right: 0;
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
background-color: var(--bg);
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--bg, $fallback--bg);
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-color: var(--border);
|
border-color: $fallback--border;
|
||||||
border-radius: var(--roundness);
|
border-color: var(--border, $fallback--border);
|
||||||
|
border-radius: $fallback--inputRadius;
|
||||||
|
border-radius: var(--inputRadius, $fallback--inputRadius);
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
|
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--panelShadow);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,8 @@
|
||||||
<script src="./avatar_list.js"></script>
|
<script src="./avatar_list.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.avatars {
|
.avatars {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -34,7 +36,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-small {
|
.avatar-small {
|
||||||
border-radius: var(--roundness);
|
border-radius: $fallback--avatarAltRadius;
|
||||||
|
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'Badge',
|
|
||||||
selector: '.badge',
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text',
|
|
||||||
'Icon'
|
|
||||||
],
|
|
||||||
variants: {
|
|
||||||
notification: '.-notification'
|
|
||||||
},
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
component: 'Root',
|
|
||||||
directives: {
|
|
||||||
'--badgeNotification': 'color | --cRed'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
background: '--cGreen'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
variant: 'notification',
|
|
||||||
directives: {
|
|
||||||
background: '--cRed'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -47,6 +47,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 0;
|
flex: 1 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding: 0.6em 1em;
|
||||||
|
|
||||||
--emoji-size: 14px;
|
--emoji-size: 14px;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'Border',
|
|
||||||
selector: '/*border*/',
|
|
||||||
virtual: true,
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
textColor: '$mod(--parent, 10)',
|
|
||||||
textAuto: 'no-auto'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'Button', // Name of the component
|
|
||||||
selector: '.button-default', // CSS selector/prefix
|
|
||||||
// outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
|
|
||||||
// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
|
|
||||||
states: {
|
|
||||||
// States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
|
|
||||||
// All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
|
|
||||||
// However, cascading still works, so resulting state will be result of merging of all relevant states/variants
|
|
||||||
// normal: '' // normal state is implicitly added, it is always included
|
|
||||||
toggled: '.toggled',
|
|
||||||
pressed: ':active',
|
|
||||||
hover: ':hover:not(:disabled)',
|
|
||||||
focused: ':focus-within',
|
|
||||||
disabled: ':disabled'
|
|
||||||
},
|
|
||||||
// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
|
|
||||||
variants: {
|
|
||||||
// Variants save on computation time since adding new variant just adds one more "set".
|
|
||||||
// normal: '', // you can override normal variant, it will be appenended to the main class
|
|
||||||
danger: '.danger'
|
|
||||||
// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
|
|
||||||
// This (currently) is further multipled by number of places where component can exist.
|
|
||||||
},
|
|
||||||
// This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text',
|
|
||||||
'Icon'
|
|
||||||
],
|
|
||||||
// Default rules, used as "default theme", essentially.
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
component: 'Root',
|
|
||||||
directives: {
|
|
||||||
'--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
|
|
||||||
'--defaultButtonShadow': 'shadow | 0 0 2 #000000',
|
|
||||||
'--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2) | $borderSide(#000000, bottom, 0.2)',
|
|
||||||
'--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// component: 'Button', // no need to specify components every time unless you're specifying how other component should look
|
|
||||||
// like within it
|
|
||||||
directives: {
|
|
||||||
background: '--fg',
|
|
||||||
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
|
|
||||||
roundness: 3
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['hover'],
|
|
||||||
directives: {
|
|
||||||
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['pressed'],
|
|
||||||
directives: {
|
|
||||||
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['hover', 'pressed'],
|
|
||||||
directives: {
|
|
||||||
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['toggled'],
|
|
||||||
directives: {
|
|
||||||
background: '--inheritedBackground,-14.2',
|
|
||||||
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['toggled', 'hover'],
|
|
||||||
directives: {
|
|
||||||
background: '--inheritedBackground,-14.2',
|
|
||||||
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['disabled'],
|
|
||||||
directives: {
|
|
||||||
background: '$blend(--inheritedBackground, 0.25, --parent)',
|
|
||||||
shadow: ['--defaultButtonBevel']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Text',
|
|
||||||
parent: {
|
|
||||||
component: 'Button',
|
|
||||||
state: ['disabled']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textOpacity: 0.25,
|
|
||||||
textOpacityMode: 'blend'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'ButtonUnstyled',
|
|
||||||
selector: '.button-unstyled',
|
|
||||||
states: {
|
|
||||||
toggled: '.toggled',
|
|
||||||
disabled: ':disabled',
|
|
||||||
hover: ':hover:not(:disabled)',
|
|
||||||
focused: ':focus-within'
|
|
||||||
},
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text',
|
|
||||||
'Icon',
|
|
||||||
'Badge'
|
|
||||||
],
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
background: '#ffffff',
|
|
||||||
opacity: 0,
|
|
||||||
shadow: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Icon',
|
|
||||||
parent: {
|
|
||||||
component: 'ButtonUnstyled',
|
|
||||||
state: ['hover']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textColor: '--parent--text'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Icon',
|
|
||||||
parent: {
|
|
||||||
component: 'ButtonUnstyled',
|
|
||||||
state: ['toggled']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textColor: '--parent--text'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Icon',
|
|
||||||
parent: {
|
|
||||||
component: 'ButtonUnstyled',
|
|
||||||
state: ['toggled', 'hover']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textColor: '--parent--text'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Icon',
|
|
||||||
parent: {
|
|
||||||
component: 'ButtonUnstyled',
|
|
||||||
state: ['toggled', 'focused']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textColor: '--parent--text'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Icon',
|
|
||||||
parent: {
|
|
||||||
component: 'ButtonUnstyled',
|
|
||||||
state: ['toggled', 'focused', 'hover']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textColor: '--parent--text'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Text',
|
|
||||||
parent: {
|
|
||||||
component: 'ButtonUnstyled',
|
|
||||||
state: ['disabled']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textOpacity: 0.25,
|
|
||||||
textOpacityMode: 'blend'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Icon',
|
|
||||||
parent: {
|
|
||||||
component: 'ButtonUnstyled',
|
|
||||||
state: ['disabled']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textOpacity: 0.25,
|
|
||||||
textOpacityMode: 'blend'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -11,15 +11,15 @@
|
||||||
|
|
||||||
.chat-view-body {
|
.chat-view-body {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
background-color: var(--chatBg, $fallback--bg);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
min-height: calc(100vh - var(--navbar-height));
|
min-height: calc(100vh - var(--navbar-height));
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-radius: var(--roundness);
|
border-radius: 10px 10px 0 0;
|
||||||
border-bottom-left-radius: 0;
|
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
.footer {
|
.footer {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--bg, $fallback--bg);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -59,6 +61,8 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1.3em;
|
right: 1.3em;
|
||||||
top: -3.2em;
|
top: -3.2em;
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--btn, $fallback--fg);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -75,6 +79,12 @@
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1em;
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
|
}
|
||||||
|
|
||||||
.unread-message-count {
|
.unread-message-count {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'Chat',
|
|
||||||
selector: '.chat-message-list',
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text',
|
|
||||||
'Link',
|
|
||||||
'Icon',
|
|
||||||
'Avatar',
|
|
||||||
'ChatMessage'
|
|
||||||
],
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
background: '--bg',
|
|
||||||
blur: '5px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="chat-message-list message-list"
|
class="message-list"
|
||||||
:style="{ height: scrollableContainerHeight }"
|
:style="{ height: scrollableContainerHeight }"
|
||||||
>
|
>
|
||||||
<template v-if="!errorLoadingChat">
|
<template v-if="!errorLoadingChat">
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
<FAIcon icon="chevron-down" />
|
<FAIcon icon="chevron-down" />
|
||||||
<div
|
<div
|
||||||
v-if="newMessageCount"
|
v-if="newMessageCount"
|
||||||
class="badge -notification unread-chat-count unread-message-count"
|
class="badge badge-notification unread-chat-count unread-message-count"
|
||||||
>
|
>
|
||||||
{{ newMessageCount }}
|
{{ newMessageCount }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -95,5 +95,6 @@
|
||||||
|
|
||||||
<script src="./chat.js"></script>
|
<script src="./chat.js"></script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
@import "./chat";
|
@import "./chat";
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -45,6 +45,8 @@
|
||||||
<script src="./chat_list.js"></script>
|
<script src="./chat_list.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.chat-list {
|
.chat-list {
|
||||||
min-height: 25em;
|
min-height: 25em;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -55,7 +57,8 @@
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: var(--textFaint);
|
color: $fallback--text;
|
||||||
|
color: var(--faint, $fallback--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
.chat-list-item {
|
.chat-list-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
padding: 0.75em;
|
||||||
|
height: 5em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -9,6 +11,11 @@
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--selectedPost, $fallback--lightBg);
|
||||||
|
box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
|
||||||
|
}
|
||||||
|
|
||||||
.chat-list-item-left {
|
.chat-list-item-left {
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
@ -22,7 +29,7 @@
|
||||||
|
|
||||||
.heading {
|
.heading {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: inline-flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
}
|
}
|
||||||
|
|
@ -40,17 +47,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-preview {
|
.chat-preview {
|
||||||
display: flex;
|
display: inline-flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
margin: 0.35em 0;
|
margin: 0.35em 0;
|
||||||
color: var(--textFaint);
|
color: $fallback--text;
|
||||||
|
color: var(--faint, $fallback--text);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--linkFaint);
|
color: var(--faintLink, $fallback--link);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -65,6 +73,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Avatar {
|
||||||
|
border-radius: $fallback--avatarAltRadius;
|
||||||
|
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||||
|
}
|
||||||
|
|
||||||
.chat-preview-body {
|
.chat-preview-body {
|
||||||
--emoji-size: 1.4em;
|
--emoji-size: 1.4em;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
v-if="chat.unread > 0"
|
v-if="chat.unread > 0"
|
||||||
class="badge -notification unread-chat-count"
|
class="badge badge-notification unread-chat-count"
|
||||||
>
|
>
|
||||||
{{ chat.unread }}
|
{{ chat.unread }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -48,5 +48,6 @@
|
||||||
<script src="./chat_list_item.js"></script>
|
<script src="./chat_list_item.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
@import "./chat_list_item";
|
@import "./chat_list_item";
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.chat-message-wrapper {
|
.chat-message-wrapper {
|
||||||
&.hovered-message-chain {
|
&.hovered-message-chain {
|
||||||
.animated.Avatar {
|
.animated.Avatar {
|
||||||
|
|
@ -25,6 +27,12 @@
|
||||||
|
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
.extra-button-popover.open & {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover {
|
.popover {
|
||||||
|
|
@ -53,12 +61,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
background-color: var(--background);
|
border-radius: $fallback--chatMessageRadius;
|
||||||
color: var(--text);
|
border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
|
||||||
border-radius: var(--roundness);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0.75em;
|
padding: 0.75em;
|
||||||
border: 1px solid var(--border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.created-at {
|
.created-at {
|
||||||
|
|
@ -91,7 +97,8 @@
|
||||||
.error {
|
.error {
|
||||||
.status-content.media-body,
|
.status-content.media-body,
|
||||||
.created-at {
|
.created-at {
|
||||||
color: var(--badgeNotification);
|
color: $fallback--cRed;
|
||||||
|
color: var(--badgeNotification, $fallback--cRed);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -110,6 +117,16 @@
|
||||||
align-content: end;
|
align-content: end;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--chatMessageOutgoingLink, $fallback--link);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
color: var(--chatMessageOutgoingText, $fallback--text);
|
||||||
|
background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
|
||||||
|
border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
|
||||||
|
}
|
||||||
|
|
||||||
.chat-message-inner {
|
.chat-message-inner {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
@ -120,6 +137,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.incoming {
|
.incoming {
|
||||||
|
a {
|
||||||
|
color: var(--chatMessageIncomingLink, $fallback--link);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
color: var(--chatMessageIncomingText, $fallback--text);
|
||||||
|
background-color: var(--chatMessageIncomingBg, $fallback--bg);
|
||||||
|
border: 1px solid var(--chatMessageIncomingBorder, --border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.created-at {
|
||||||
|
a {
|
||||||
|
color: var(--chatMessageIncomingText, $fallback--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.chat-message-menu {
|
.chat-message-menu {
|
||||||
left: 0.4rem;
|
left: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
@ -143,5 +176,6 @@
|
||||||
margin: 1.4em 0;
|
margin: 1.4em 0;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
color: var(--textFaint);
|
color: $fallback--text;
|
||||||
|
color: var(--faintedText, $fallback--text);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'ChatMessage',
|
|
||||||
selector: '.chat-message',
|
|
||||||
variants: {
|
|
||||||
outgoing: '.outgoing'
|
|
||||||
},
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text',
|
|
||||||
'Icon',
|
|
||||||
'Border',
|
|
||||||
'Button',
|
|
||||||
'RichContent',
|
|
||||||
'Attachment',
|
|
||||||
'PollGraph'
|
|
||||||
],
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
background: '--bg, 2',
|
|
||||||
backgroundNoCssColor: 'yes'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
variant: 'outgoing',
|
|
||||||
directives: {
|
|
||||||
background: '--bg, 5'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
@click="deleteMessage"
|
@click="deleteMessage"
|
||||||
>
|
>
|
||||||
<FAIcon icon="times" /> {{ $t("chats.delete") }}
|
<FAIcon icon="times" /> {{ $t("chats.delete") }}
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,11 @@
|
||||||
padding-bottom: 0.7rem;
|
padding-bottom: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.basic-user-card:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: var(--selectedPost, $fallback--lightBg);
|
||||||
|
}
|
||||||
|
|
||||||
.go-back-button {
|
.go-back-button {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
|
||||||
<div class="input-wrap">
|
<div class="input-wrap">
|
||||||
<div class="input-search">
|
<div class="input-search">
|
||||||
<FAIcon
|
<FAIcon
|
||||||
|
|
@ -27,7 +26,6 @@
|
||||||
<input
|
<input
|
||||||
ref="search"
|
ref="search"
|
||||||
v-model="query"
|
v-model="query"
|
||||||
class="input"
|
|
||||||
placeholder="Search people"
|
placeholder="Search people"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
>
|
>
|
||||||
|
|
@ -36,9 +34,9 @@
|
||||||
<div
|
<div
|
||||||
v-for="user in availableUsers"
|
v-for="user in availableUsers"
|
||||||
:key="user.id"
|
:key="user.id"
|
||||||
class="list-item"
|
class="member"
|
||||||
@click.capture.prevent="goToChat(user)"
|
|
||||||
>
|
>
|
||||||
|
<div @click.capture.prevent="goToChat(user)">
|
||||||
<BasicUserCard :user="user" />
|
<BasicUserCard :user="user" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -48,5 +46,6 @@
|
||||||
|
|
||||||
<script src="./chat_new.js"></script>
|
<script src="./chat_new.js"></script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
@import "./chat_new";
|
@import "./chat_new";
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,8 @@
|
||||||
<script src="./chat_title.js"></script>
|
<script src="./chat_title.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.chat-title {
|
.chat-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -52,7 +54,8 @@
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
border-radius: var(--roundness);
|
border-radius: $fallback--avatarAltRadius;
|
||||||
|
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||||
|
|
||||||
&.animated::before {
|
&.animated::before {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
@change="$emit('update:modelValue', $event.target.checked)"
|
@change="$emit('update:modelValue', $event.target.checked)"
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
class="input -checkbox checkbox-indicator"
|
class="checkbox-indicator"
|
||||||
:aria-hidden="true"
|
:aria-hidden="true"
|
||||||
@transitionend.capture="onTransitionEnd"
|
@transitionend.capture="onTransitionEnd"
|
||||||
/>
|
/>
|
||||||
|
|
@ -54,6 +54,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
@import "../../mixins";
|
@import "../../mixins";
|
||||||
|
|
||||||
.checkbox {
|
.checkbox {
|
||||||
|
|
@ -61,15 +62,9 @@ export default {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-height: 1.2em;
|
min-height: 1.2em;
|
||||||
|
|
||||||
& > &-indicator {
|
&-indicator {
|
||||||
/* Reset .input stuff */
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: inherit;
|
|
||||||
display: inline;
|
|
||||||
padding-left: 1.2em;
|
padding-left: 1.2em;
|
||||||
box-shadow: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-indicator::before {
|
&-indicator::before {
|
||||||
|
|
@ -81,9 +76,12 @@ export default {
|
||||||
transition: color 200ms;
|
transition: color 200ms;
|
||||||
width: 1.1em;
|
width: 1.1em;
|
||||||
height: 1.1em;
|
height: 1.1em;
|
||||||
border-radius: var(--roundness);
|
border-radius: $fallback--checkboxRadius;
|
||||||
box-shadow: var(--shadow);
|
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
|
||||||
background-color: var(--background);
|
box-shadow: 0 0 2px black inset;
|
||||||
|
box-shadow: var(--inputShadow);
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--input, $fallback--fg);
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.1em;
|
line-height: 1.1em;
|
||||||
|
|
@ -100,18 +98,21 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: var(--text);
|
color: $fallback--faint;
|
||||||
|
color: var(--faint, $fallback--faint);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
&:checked + .checkbox-indicator::before {
|
&:checked + .checkbox-indicator::before {
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--inputText, $fallback--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:indeterminate + .checkbox-indicator::before {
|
&:indeterminate + .checkbox-indicator::before {
|
||||||
content: "–";
|
content: "–";
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--inputText, $fallback--text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.color-input {
|
.color-input {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|
||||||
|
|
@ -9,8 +11,9 @@
|
||||||
padding: 0.2em 8px;
|
padding: 0.2em 8px;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
color: var(--text);
|
|
||||||
background: none;
|
background: none;
|
||||||
|
color: $fallback--lightText;
|
||||||
|
color: var(--inputText, $fallback--lightText);
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -20,38 +23,21 @@
|
||||||
min-width: 3em;
|
min-width: 3em;
|
||||||
padding: 0;
|
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,
|
.computedIndicator,
|
||||||
.validIndicator,
|
|
||||||
.invalidIndicator,
|
|
||||||
.transparentIndicator {
|
.transparentIndicator {
|
||||||
flex: 0 0 2em;
|
flex: 0 0 2em;
|
||||||
margin: 0 0.5em;
|
|
||||||
min-width: 2em;
|
min-width: 2em;
|
||||||
align-self: stretch;
|
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 {
|
.transparentIndicator {
|
||||||
|
|
@ -72,13 +58,11 @@
|
||||||
&::after {
|
&::after {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
border-top-left-radius: var(--roundness);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
border-bottom-right-radius: var(--roundness);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,51 +25,30 @@
|
||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
@input="$emit('update:modelValue', $event.target.value)"
|
@input="$emit('update:modelValue', $event.target.value)"
|
||||||
>
|
>
|
||||||
<div
|
|
||||||
v-if="validColor"
|
|
||||||
class="validIndicator"
|
|
||||||
:style="{backgroundColor: modelValue || fallback}"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-else-if="transparentColor"
|
|
||||||
class="transparentIndicator"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-else-if="computedColor"
|
|
||||||
class="computedIndicator"
|
|
||||||
:style="{backgroundColor: fallback}"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="invalidIndicator"
|
|
||||||
/>
|
|
||||||
<label class="nativeColor">
|
|
||||||
<FAIcon icon="eye-dropper" />
|
|
||||||
<input
|
<input
|
||||||
|
v-if="validColor"
|
||||||
:id="name"
|
:id="name"
|
||||||
class="unstyled"
|
class="nativeColor unstyled"
|
||||||
type="color"
|
type="color"
|
||||||
:value="modelValue || fallback"
|
:value="modelValue || fallback"
|
||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
@input="$emit('update:modelValue', $event.target.value)"
|
@input="$emit('update:modelValue', $event.target.value)"
|
||||||
>
|
>
|
||||||
</label>
|
<div
|
||||||
|
v-if="transparentColor"
|
||||||
|
class="transparentIndicator"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-if="computedColor"
|
||||||
|
class="computedIndicator"
|
||||||
|
:style="{backgroundColor: fallback}"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Checkbox from '../checkbox/checkbox.vue'
|
import Checkbox from '../checkbox/checkbox.vue'
|
||||||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
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 {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Checkbox
|
Checkbox
|
||||||
|
|
@ -129,3 +108,12 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" src="./color_input.scss"></style>
|
<style lang="scss" src="./color_input.scss"></style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.color-control {
|
||||||
|
input.text-input {
|
||||||
|
max-width: 7em;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -56,8 +56,7 @@ const conversation = {
|
||||||
expanded: false,
|
expanded: false,
|
||||||
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
|
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
|
||||||
statusContentPropertiesObject: {},
|
statusContentPropertiesObject: {},
|
||||||
inlineDivePosition: null,
|
inlineDivePosition: null
|
||||||
loadStatusError: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: [
|
props: [
|
||||||
|
|
@ -393,15 +392,11 @@ const conversation = {
|
||||||
this.setHighlight(this.originalStatusId)
|
this.setHighlight(this.originalStatusId)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.loadStatusError = null
|
|
||||||
this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
|
this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
|
||||||
.then((status) => {
|
.then((status) => {
|
||||||
this.$store.dispatch('addNewStatuses', { statuses: [status] })
|
this.$store.dispatch('addNewStatuses', { statuses: [status] })
|
||||||
this.fetchConversation()
|
this.fetchConversation()
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
this.loadStatusError = error
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getReplies (id) {
|
getReplies (id) {
|
||||||
|
|
|
||||||
|
|
@ -28,27 +28,7 @@
|
||||||
class="rightside-button"
|
class="rightside-button"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="conversation-body panel-body">
|
||||||
v-if="isPage && !status"
|
|
||||||
class="conversation-body"
|
|
||||||
:class="{ 'panel-body': isExpanded }"
|
|
||||||
>
|
|
||||||
<p v-if="!loadStatusError">
|
|
||||||
<FAIcon
|
|
||||||
spin
|
|
||||||
icon="circle-notch"
|
|
||||||
/>
|
|
||||||
{{ $t('status.loading') }}
|
|
||||||
</p>
|
|
||||||
<p v-else>
|
|
||||||
{{ $t('status.load_error', { error: loadStatusError }) }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="conversation-body"
|
|
||||||
:class="{ 'panel-body': isExpanded }"
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
v-if="isTreeView"
|
v-if="isTreeView"
|
||||||
class="thread-body"
|
class="thread-body"
|
||||||
|
|
@ -223,7 +203,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
class="Conversation -hidden"
|
|
||||||
:style="hiddenStyle"
|
:style="hiddenStyle"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -231,17 +210,14 @@
|
||||||
<script src="./conversation.js"></script>
|
<script src="./conversation.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.Conversation {
|
.Conversation {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
&.-hidden {
|
|
||||||
background: var(--__panel-background);
|
|
||||||
backdrop-filter: var(--__panel-backdrop-filter);
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-dive-to-top-level-box {
|
.conversation-dive-to-top-level-box {
|
||||||
padding: var(--status-margin);
|
padding: var(--status-margin, $status-margin);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border, $fallback--border);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
/* Make the button stretch along the whole row */
|
/* Make the button stretch along the whole row */
|
||||||
|
|
@ -251,22 +227,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-ancestors {
|
.thread-ancestors {
|
||||||
margin-left: var(--status-margin);
|
margin-left: var(--status-margin, $status-margin);
|
||||||
border-left: 2px solid var(--border);
|
border-left: 2px solid var(--border, $fallback--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-ancestor.-faded .RichContent {
|
.thread-ancestor.-faded .StatusContent {
|
||||||
/* stylelint-disable declaration-no-important */
|
--link: var(--faintLink);
|
||||||
--text: var(--textFaint) !important;
|
--text: var(--faint);
|
||||||
--link: var(--linkFaint) !important;
|
|
||||||
--funtextGreentext: var(--funtextGreentextFaint) !important;
|
color: var(--text);
|
||||||
--funtextCyantext: var(--funtextCyantextFaint) !important;
|
|
||||||
/* stylelint-enable declaration-no-important */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-ancestor-dive-box {
|
.thread-ancestor-dive-box {
|
||||||
padding-left: var(--status-margin);
|
padding-left: var(--status-margin, $status-margin);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border, $fallback--border);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
/* Make the button stretch along the whole row */
|
/* Make the button stretch along the whole row */
|
||||||
|
|
@ -279,17 +253,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-ancestor-dive-box-inner {
|
.thread-ancestor-dive-box-inner {
|
||||||
padding: var(--status-margin);
|
padding: var(--status-margin, $status-margin);
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversation-status {
|
.conversation-status {
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border, $fallback--border);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-ancestor-has-other-replies .conversation-status,
|
.thread-ancestor-has-other-replies .conversation-status,
|
||||||
&:last-child:not(.-expanded) .conversation-status,
|
&:last-child .conversation-status,
|
||||||
&.-expanded .conversation-status:last-child,
|
|
||||||
.thread-ancestor:last-child .conversation-status,
|
.thread-ancestor:last-child .conversation-status,
|
||||||
.thread-ancestor:last-child .thread-ancestor-dive-box,
|
.thread-ancestor:last-child .thread-ancestor-dive-box,
|
||||||
&.-expanded .thread-tree .conversation-status {
|
&.-expanded .thread-tree .conversation-status {
|
||||||
|
|
@ -297,36 +270,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-ancestors + .thread-tree > .conversation-status {
|
.thread-ancestors + .thread-tree > .conversation-status {
|
||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border, $fallback--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* expanded conversation in timeline */
|
/* expanded conversation in timeline */
|
||||||
&.status-fadein.-expanded .thread-body {
|
&.status-fadein.-expanded .thread-body {
|
||||||
border-left: 4px solid var(--cRed);
|
border-left: 4px solid $fallback--cRed;
|
||||||
border-radius: var(--roundness);
|
border-left-color: var(--cRed, $fallback--cRed);
|
||||||
border-top-left-radius: 0;
|
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
|
||||||
border-top-right-radius: 0;
|
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border, $fallback--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-expanded.status-fadein {
|
&.-expanded.status-fadein {
|
||||||
--___margin: calc(var(--status-margin) / 2);
|
margin: calc(var(--status-margin, $status-margin) / 2);
|
||||||
|
|
||||||
background: var(--background);
|
|
||||||
margin: var(--___margin);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
z-index: -1;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(var(--___margin) * -1);
|
|
||||||
bottom: calc(var(--___margin) * -1);
|
|
||||||
left: calc(var(--___margin) * -1);
|
|
||||||
right: calc(var(--___margin) * -1);
|
|
||||||
background: var(--background);
|
|
||||||
backdrop-filter: var(--__panel-backdrop-filter);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.DesktopNav {
|
.DesktopNav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: var(--ZI_navbar);
|
z-index: var(--ZI_navbar);
|
||||||
|
|
@ -7,7 +9,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--link);
|
color: var(--topBarLink, $fallback--link);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner-nav {
|
.inner-nav {
|
||||||
|
|
@ -52,7 +54,27 @@
|
||||||
.button-default {
|
.button-default {
|
||||||
&,
|
&,
|
||||||
svg {
|
svg {
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--btnTopBarText, $fallback--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--btnPressedTopBar, $fallback--fg);
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnPressedTopBarText, $fallback--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnDisabledTopBarText, $fallback--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.toggled {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnToggledTopBarText, $fallback--text);
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--btnToggledTopBar, $fallback--fg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -72,7 +94,8 @@
|
||||||
mask-repeat: no-repeat;
|
mask-repeat: no-repeat;
|
||||||
mask-position: center;
|
mask-position: center;
|
||||||
mask-size: contain;
|
mask-size: contain;
|
||||||
background-color: var(--text);
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--topBarText, $fallback--fg);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -93,7 +116,8 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.svg-inline--fa {
|
.svg-inline--fa {
|
||||||
color: var(--link);
|
color: $fallback--link;
|
||||||
|
color: var(--topBarLink, $fallback--link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
<slot name="header" />
|
<slot name="header" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body dialog-modal-content">
|
<div class="dialog-modal-content">
|
||||||
<slot name="default" />
|
<slot name="default" />
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-modal-footer user-interactions panel-footer">
|
<div class="dialog-modal-footer user-interactions panel-footer">
|
||||||
|
|
@ -25,6 +25,8 @@
|
||||||
<script src="./dialog_modal.js"></script>
|
<script src="./dialog_modal.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
// TODO: unify with other modals.
|
// TODO: unify with other modals.
|
||||||
.dark-overlay {
|
.dark-overlay {
|
||||||
&::before {
|
&::before {
|
||||||
|
|
@ -52,6 +54,8 @@
|
||||||
z-index: 2001;
|
z-index: 2001;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
display: block;
|
display: block;
|
||||||
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--bg, $fallback--bg);
|
||||||
|
|
||||||
.dialog-modal-heading {
|
.dialog-modal-heading {
|
||||||
.title {
|
.title {
|
||||||
|
|
@ -62,13 +66,18 @@
|
||||||
.dialog-modal-content {
|
.dialog-modal-content {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--bg, $fallback--bg);
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog-modal-footer {
|
.dialog-modal-footer {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
border-top: 1px solid var(--border);
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--bg, $fallback--bg);
|
||||||
|
border-top: 1px solid $fallback--border;
|
||||||
|
border-top: 1px solid var(--border, $fallback--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
ref="root"
|
ref="root"
|
||||||
class="input emoji-input"
|
class="emoji-input"
|
||||||
:class="{ 'with-picker': !hideEmojiButton }"
|
:class="{ 'with-picker': !hideEmojiButton }"
|
||||||
>
|
>
|
||||||
<slot
|
<slot
|
||||||
|
|
@ -68,9 +68,9 @@
|
||||||
v-for="(suggestion, index) in suggestions"
|
v-for="(suggestion, index) in suggestions"
|
||||||
:id="suggestionItemId(index)"
|
:id="suggestionItemId(index)"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="menu-item autocomplete-item"
|
class="autocomplete-item"
|
||||||
role="option"
|
role="option"
|
||||||
:class="{ '-active': index === highlighted }"
|
:class="{ highlighted: index === highlighted }"
|
||||||
:aria-label="autoCompleteItemLabel(suggestion)"
|
:aria-label="autoCompleteItemLabel(suggestion)"
|
||||||
:aria-selected="index === highlighted"
|
:aria-selected="index === highlighted"
|
||||||
@click.stop.prevent="onClick($event, suggestion)"
|
@click.stop.prevent="onClick($event, suggestion)"
|
||||||
|
|
@ -110,8 +110,9 @@
|
||||||
<script src="./emoji_input.js"></script>
|
<script src="./emoji_input.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.input.emoji-input {
|
@import "../../variables";
|
||||||
padding: 0;
|
|
||||||
|
.emoji-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -126,7 +127,8 @@
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
|
||||||
&:hover i {
|
&:hover i {
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -143,12 +145,6 @@
|
||||||
input,
|
input,
|
||||||
textarea {
|
textarea {
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
color: inherit;
|
|
||||||
/* stylelint-disable-next-line declaration-no-important */
|
|
||||||
background: none !important;
|
|
||||||
box-shadow: none;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.with-picker input {
|
&.with-picker input {
|
||||||
|
|
@ -183,28 +179,26 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-item.menu-item {
|
&-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding-top: 0;
|
cursor: pointer;
|
||||||
padding-bottom: 0;
|
padding: 0.2em 0.4em;
|
||||||
|
border-bottom: 1px solid rgb(0 0 0 / 40%);
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
|
width: 32px;
|
||||||
height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
|
height: 32px;
|
||||||
line-height: var(--__line-height);
|
line-height: 32px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: var(--__horizontal-gap);
|
font-size: 32px;
|
||||||
|
margin-right: 4px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
|
width: 32px;
|
||||||
height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
|
height: 32px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: var(--__line-height);
|
|
||||||
line-height: var(--__line-height);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
|
@ -222,6 +216,17 @@
|
||||||
line-height: 9px;
|
line-height: 9px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.highlighted {
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--selectedMenuPopover, $fallback--fg);
|
||||||
|
color: var(--selectedMenuPopoverText, $fallback--text);
|
||||||
|
|
||||||
|
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
||||||
|
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
||||||
|
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
$emoji-picker-header-height: 36px;
|
$emoji-picker-header-height: 36px;
|
||||||
$emoji-picker-header-picture-width: 32px;
|
$emoji-picker-header-picture-width: 32px;
|
||||||
$emoji-picker-header-picture-height: 32px;
|
$emoji-picker-header-picture-height: 32px;
|
||||||
|
|
@ -8,6 +10,15 @@ $emoji-picker-emoji-size: 32px;
|
||||||
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
|
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--popover, $fallback--bg);
|
||||||
|
color: $fallback--link;
|
||||||
|
color: var(--popoverText, $fallback--link);
|
||||||
|
|
||||||
|
--faint: var(--popoverFaintText, $fallback--faint);
|
||||||
|
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--popoverLightText, $fallback--lightText);
|
||||||
|
--icon: var(--popoverIcon, $fallback--icon);
|
||||||
|
|
||||||
&-header-image {
|
&-header-image {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|
@ -70,7 +81,8 @@ $emoji-picker-emoji-size: 32px;
|
||||||
.additional-tabs {
|
.additional-tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-left: 1px solid;
|
border-left: 1px solid;
|
||||||
border-left-color: var(--border);
|
border-left-color: $fallback--icon;
|
||||||
|
border-left-color: var(--icon, $fallback--icon);
|
||||||
padding-left: 7px;
|
padding-left: 7px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
@ -97,8 +109,13 @@ $emoji-picker-emoji-size: 32px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.toggled {
|
&.active {
|
||||||
border-bottom: 4px solid;
|
border-bottom: 4px solid;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: $fallback--lightText;
|
||||||
|
color: var(--lightText, $fallback--lightText);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,9 +23,9 @@
|
||||||
v-for="group in filteredEmojiGroups"
|
v-for="group in filteredEmojiGroups"
|
||||||
:ref="setGroupRef('group-header-' + group.id)"
|
:ref="setGroupRef('group-header-' + group.id)"
|
||||||
:key="group.id"
|
:key="group.id"
|
||||||
class="button-unstyled emoji-tabs-item"
|
class="emoji-tabs-item"
|
||||||
:class="{
|
:class="{
|
||||||
toggled: activeGroupView === group.id
|
active: activeGroupView === group.id
|
||||||
}"
|
}"
|
||||||
:title="group.text"
|
:title="group.text"
|
||||||
role="button"
|
role="button"
|
||||||
|
|
@ -52,8 +52,8 @@
|
||||||
class="additional-tabs"
|
class="additional-tabs"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="button-unstyled stickers-tab-icon additional-tabs-item"
|
class="stickers-tab-icon additional-tabs-item"
|
||||||
:class="{toggled: showingStickers}"
|
:class="{active: showingStickers}"
|
||||||
:title="$t('emoji.stickers')"
|
:title="$t('emoji.stickers')"
|
||||||
@click.prevent="toggleStickers"
|
@click.prevent="toggleStickers"
|
||||||
>
|
>
|
||||||
|
|
@ -77,7 +77,7 @@
|
||||||
ref="search"
|
ref="search"
|
||||||
v-model="keyword"
|
v-model="keyword"
|
||||||
type="text"
|
type="text"
|
||||||
class="input form-control"
|
class="form-control"
|
||||||
:placeholder="$t('emoji.search_emoji')"
|
:placeholder="$t('emoji.search_emoji')"
|
||||||
@input="$event.target.composing = false"
|
@input="$event.target.composing = false"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -72,6 +72,7 @@
|
||||||
|
|
||||||
<script src="./emoji_reactions.js"></script>
|
<script src="./emoji_reactions.js"></script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
@import "../../mixins";
|
@import "../../mixins";
|
||||||
|
|
||||||
.EmojiReactions {
|
.EmojiReactions {
|
||||||
|
|
@ -91,6 +92,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
.emoji-reaction-count-button {
|
.emoji-reaction-count-button {
|
||||||
|
background-color: var(--btn);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
|
|
@ -100,9 +102,11 @@
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--btnText, $fallback--text);
|
||||||
|
|
||||||
&.-picked-reaction {
|
&.-picked-reaction {
|
||||||
border: 1px solid var(--accent);
|
border: 1px solid var(--accent, $fallback--link);
|
||||||
margin-right: -1px;
|
margin-right: -1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -145,16 +149,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-inline--fa {
|
.svg-inline--fa {
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--btnText, $fallback--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-picked-reaction {
|
&.-picked-reaction {
|
||||||
border: 1px solid var(--accent);
|
border: 1px solid var(--accent, $fallback--link);
|
||||||
margin-left: -1px; // offset the border, can't use inset shadows either
|
margin-left: -1px; // offset the border, can't use inset shadows either
|
||||||
margin-right: -1px;
|
margin-right: -1px;
|
||||||
|
|
||||||
.svg-inline--fa {
|
.svg-inline--fa {
|
||||||
color: var(--accent);
|
color: $fallback--link;
|
||||||
|
color: var(--accent, $fallback--link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -170,7 +176,8 @@
|
||||||
|
|
||||||
@include focused-style {
|
@include focused-style {
|
||||||
.svg-inline--fa {
|
.svg-inline--fa {
|
||||||
color: var(--accent);
|
color: $fallback--link;
|
||||||
|
color: var(--accent, $fallback--link);
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus-marker {
|
.focus-marker {
|
||||||
|
|
|
||||||
|
|
@ -12,13 +12,13 @@
|
||||||
>
|
>
|
||||||
<template #content="{close}">
|
<template #content="{close}">
|
||||||
<div
|
<div
|
||||||
:id="`popup-menu-${randomSeed}`"
|
|
||||||
class="dropdown-menu"
|
class="dropdown-menu"
|
||||||
role="menu"
|
role="menu"
|
||||||
|
:id="`popup-menu-${randomSeed}`"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
v-if="canMute && !status.thread_muted"
|
v-if="canMute && !status.thread_muted"
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="muteConversation"
|
@click.prevent="muteConversation"
|
||||||
>
|
>
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="canMute && status.thread_muted"
|
v-if="canMute && status.thread_muted"
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="unmuteConversation"
|
@click.prevent="unmuteConversation"
|
||||||
>
|
>
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="!status.pinned && canPin"
|
v-if="!status.pinned && canPin"
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="pinStatus"
|
@click.prevent="pinStatus"
|
||||||
@click="close"
|
@click="close"
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="status.pinned && canPin"
|
v-if="status.pinned && canPin"
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="unpinStatus"
|
@click.prevent="unpinStatus"
|
||||||
@click="close"
|
@click="close"
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
<template v-if="canBookmark">
|
<template v-if="canBookmark">
|
||||||
<button
|
<button
|
||||||
v-if="!status.bookmarked"
|
v-if="!status.bookmarked"
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="bookmarkStatus"
|
@click.prevent="bookmarkStatus"
|
||||||
@click="close"
|
@click="close"
|
||||||
|
|
@ -77,7 +77,7 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="status.bookmarked"
|
v-if="status.bookmarked"
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="unbookmarkStatus"
|
@click.prevent="unbookmarkStatus"
|
||||||
@click="close"
|
@click="close"
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
</template>
|
</template>
|
||||||
<button
|
<button
|
||||||
v-if="ownStatus && editingAvailable"
|
v-if="ownStatus && editingAvailable"
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="editStatus"
|
@click.prevent="editStatus"
|
||||||
@click="close"
|
@click="close"
|
||||||
|
|
@ -102,7 +102,7 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="isEdited && editingAvailable"
|
v-if="isEdited && editingAvailable"
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="showStatusHistory"
|
@click.prevent="showStatusHistory"
|
||||||
@click="close"
|
@click="close"
|
||||||
|
|
@ -114,7 +114,7 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="canDelete"
|
v-if="canDelete"
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="deleteStatus"
|
@click.prevent="deleteStatus"
|
||||||
@click="close"
|
@click="close"
|
||||||
|
|
@ -125,7 +125,7 @@
|
||||||
/><span>{{ $t("status.delete") }}</span>
|
/><span>{{ $t("status.delete") }}</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="copyLink"
|
@click.prevent="copyLink"
|
||||||
@click="close"
|
@click="close"
|
||||||
|
|
@ -137,7 +137,7 @@
|
||||||
</button>
|
</button>
|
||||||
<a
|
<a
|
||||||
v-if="!status.is_local"
|
v-if="!status.is_local"
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
title="Source"
|
title="Source"
|
||||||
:href="status.external_url"
|
:href="status.external_url"
|
||||||
|
|
@ -149,7 +149,7 @@
|
||||||
/><span>{{ $t("status.external_source") }}</span>
|
/><span>{{ $t("status.external_source") }}</span>
|
||||||
</a>
|
</a>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item dropdown-item-icon"
|
class="button-default dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="reportStatus"
|
@click.prevent="reportStatus"
|
||||||
@click="close"
|
@click="close"
|
||||||
|
|
@ -201,6 +201,7 @@
|
||||||
<script src="./extra_buttons.js"></script>
|
<script src="./extra_buttons.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
@import "../../mixins";
|
@import "../../mixins";
|
||||||
|
|
||||||
.ExtraButtons {
|
.ExtraButtons {
|
||||||
|
|
@ -210,7 +211,8 @@
|
||||||
margin: -10px;
|
margin: -10px;
|
||||||
|
|
||||||
&:hover .svg-inline--fa {
|
&:hover .svg-inline--fa {
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -80,6 +80,8 @@
|
||||||
<script src="./extra_notifications.js" />
|
<script src="./extra_notifications.js" />
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.ExtraNotifications {
|
.ExtraNotifications {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -89,7 +91,8 @@
|
||||||
.notification {
|
.notification {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
border-color: var(--border);
|
border-color: $fallback--border;
|
||||||
|
border-color: var(--border, $fallback--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|
|
||||||
|
|
@ -65,6 +65,7 @@
|
||||||
<script src="./favorite_button.js"></script>
|
<script src="./favorite_button.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
@import "../../mixins";
|
@import "../../mixins";
|
||||||
|
|
||||||
.FavoriteButton {
|
.FavoriteButton {
|
||||||
|
|
@ -87,7 +88,8 @@
|
||||||
|
|
||||||
&:hover .svg-inline--fa,
|
&:hover .svg-inline--fa,
|
||||||
&.-favorited .svg-inline--fa {
|
&.-favorited .svg-inline--fa {
|
||||||
color: var(--cOrange);
|
color: $fallback--cOrange;
|
||||||
|
color: var(--cOrange, $fallback--cOrange);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include unfocused-style {
|
@include unfocused-style {
|
||||||
|
|
|
||||||
|
|
@ -42,6 +42,8 @@
|
||||||
<script src="./flash.js"></script>
|
<script src="./flash.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.Flash {
|
.Flash {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
v-if="typeof fallback !== 'undefined'"
|
v-if="typeof fallback !== 'undefined'"
|
||||||
:id="name + '-o'"
|
:id="name + '-o'"
|
||||||
:aria-labelledby="name + '-label'"
|
:aria-labelledby="name + '-label'"
|
||||||
class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
|
class="opt exlcude-disabled visible-for-screenreader-only"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
:checked="present"
|
:checked="present"
|
||||||
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
|
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
v-if="isCustom"
|
v-if="isCustom"
|
||||||
:id="name"
|
:id="name"
|
||||||
v-model="family"
|
v-model="family"
|
||||||
class="input custom-font"
|
class="custom-font"
|
||||||
type="text"
|
type="text"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -53,6 +53,8 @@
|
||||||
<script src="./font_control.js"></script>
|
<script src="./font_control.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.font-control {
|
.font-control {
|
||||||
input.custom-font {
|
input.custom-font {
|
||||||
min-width: 10em;
|
min-width: 10em;
|
||||||
|
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'FunText',
|
|
||||||
selector: '/*fun-text*/',
|
|
||||||
virtual: true,
|
|
||||||
variants: {
|
|
||||||
greentext: '.greentext',
|
|
||||||
cyantext: '.cyantext'
|
|
||||||
},
|
|
||||||
states: {
|
|
||||||
faint: '.faint'
|
|
||||||
},
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
textColor: '--text',
|
|
||||||
textAuto: 'preserve'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['faint'],
|
|
||||||
directives: {
|
|
||||||
textOpacity: 0.5
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
variant: 'greentext',
|
|
||||||
directives: {
|
|
||||||
textColor: '--cGreen',
|
|
||||||
textAuto: 'preserve'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
variant: 'cyantext',
|
|
||||||
directives: {
|
|
||||||
textColor: '--cBlue',
|
|
||||||
textAuto: 'preserve'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -87,6 +87,8 @@
|
||||||
<script src='./gallery.js'></script>
|
<script src='./gallery.js'></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.Gallery {
|
.Gallery {
|
||||||
.gallery-rows {
|
.gallery-rows {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
v-for="(notice, index) in notices"
|
v-for="(notice, index) in notices"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="alert global-notice"
|
class="alert global-notice"
|
||||||
:class="{ [notice.level]: true }"
|
:class="{ ['global-' + notice.level]: true }"
|
||||||
>
|
>
|
||||||
<div class="notice-message">
|
<div class="notice-message">
|
||||||
{{ $t(notice.messageKey, notice.messageArgs) }}
|
{{ $t(notice.messageKey, notice.messageArgs) }}
|
||||||
|
|
@ -25,6 +25,8 @@
|
||||||
<script src="./global_notice_list.js"></script>
|
<script src="./global_notice_list.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.global-notice-list {
|
.global-notice-list {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: calc(var(--navbar-height) + 0.5em);
|
top: calc(var(--navbar-height) + 0.5em);
|
||||||
|
|
@ -50,8 +52,48 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.global-error {
|
||||||
|
background-color: var(--alertPopupError, $fallback--cRed);
|
||||||
|
color: var(--alertPopupErrorText, $fallback--text);
|
||||||
|
|
||||||
|
.svg-inline--fa {
|
||||||
|
color: var(--alertPopupErrorText, $fallback--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-warning {
|
||||||
|
background-color: var(--alertPopupWarning, $fallback--cOrange);
|
||||||
|
color: var(--alertPopupWarningText, $fallback--text);
|
||||||
|
|
||||||
|
.svg-inline--fa {
|
||||||
|
color: var(--alertPopupWarningText, $fallback--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-success {
|
||||||
|
background-color: var(--alertPopupSuccess, $fallback--cGreen);
|
||||||
|
color: var(--alertPopupSuccessText, $fallback--text);
|
||||||
|
|
||||||
|
.svg-inline--fa {
|
||||||
|
color: var(--alertPopupSuccessText, $fallback--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-info {
|
||||||
|
background-color: var(--alertPopupNeutral, $fallback--fg);
|
||||||
|
color: var(--alertPopupNeutralText, $fallback--text);
|
||||||
|
|
||||||
|
.svg-inline--fa {
|
||||||
|
color: var(--alertPopupNeutralText, $fallback--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.close-notice {
|
.close-notice {
|
||||||
padding-right: 0.2em;
|
padding-right: 0.2em;
|
||||||
|
|
||||||
|
.svg-inline--fa:hover {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'Icon',
|
|
||||||
virtual: true,
|
|
||||||
selector: '.svg-inline--fa',
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
component: 'Icon',
|
|
||||||
directives: {
|
|
||||||
textColor: '$blend(--stack, 0.5, --parent--text)',
|
|
||||||
textAuto: 'no-auto'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
<input
|
<input
|
||||||
ref="input"
|
ref="input"
|
||||||
type="file"
|
type="file"
|
||||||
class="input image-cropper-img-input"
|
class="image-cropper-img-input"
|
||||||
:accept="mimes"
|
:accept="mimes"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
<form>
|
<form>
|
||||||
<input
|
<input
|
||||||
ref="input"
|
ref="input"
|
||||||
class="input"
|
|
||||||
type="file"
|
type="file"
|
||||||
@change="change"
|
@change="change"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
const hoverGlow = {
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
blur: 4,
|
|
||||||
spread: 0,
|
|
||||||
color: '--text',
|
|
||||||
alpha: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Input',
|
|
||||||
selector: '.input',
|
|
||||||
variant: {
|
|
||||||
checkbox: '.-checkbox',
|
|
||||||
radio: '.-radio'
|
|
||||||
},
|
|
||||||
states: {
|
|
||||||
disabled: ':disabled',
|
|
||||||
hover: ':hover:not(:disabled)',
|
|
||||||
focused: ':focus-within'
|
|
||||||
},
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text'
|
|
||||||
],
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
component: 'Root',
|
|
||||||
directives: {
|
|
||||||
'--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
variant: 'checkbox',
|
|
||||||
directives: {
|
|
||||||
roundness: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
'--font': 'generic | inherit',
|
|
||||||
background: '--fg, -5',
|
|
||||||
roundness: 3,
|
|
||||||
shadow: [{
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
blur: 2,
|
|
||||||
spread: 0,
|
|
||||||
color: '#000000',
|
|
||||||
alpha: 1
|
|
||||||
}, '--defaultInputBevel']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['hover'],
|
|
||||||
directives: {
|
|
||||||
shadow: [hoverGlow, '--defaultInputBevel']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -104,6 +104,8 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.interface-language-switcher {
|
.interface-language-switcher {
|
||||||
.language-select {
|
.language-select {
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,8 @@
|
||||||
<script src="./link-preview.js"></script>
|
<script src="./link-preview.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.link-preview-card {
|
.link-preview-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
@ -49,7 +51,8 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: var(--roundness);
|
border-radius: $fallback--attachmentRadius;
|
||||||
|
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -79,10 +82,13 @@
|
||||||
margin: 2em 0;
|
margin: 2em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-radius: var(--roundness);
|
border-radius: $fallback--attachmentRadius;
|
||||||
border-color: var(--border);
|
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||||
|
border-color: $fallback--border;
|
||||||
|
border-color: var(--border, $fallback--border);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'Link',
|
|
||||||
selector: 'a',
|
|
||||||
virtual: true,
|
|
||||||
states: {
|
|
||||||
faint: '.faint'
|
|
||||||
},
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
component: 'Link',
|
|
||||||
directives: {
|
|
||||||
textColor: '--link'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Link',
|
|
||||||
state: ['faint'],
|
|
||||||
directives: {
|
|
||||||
textOpacity: 0.5,
|
|
||||||
textOpacityMode: 'fake'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -7,7 +7,6 @@
|
||||||
v-for="item in items"
|
v-for="item in items"
|
||||||
:key="getKey(item)"
|
:key="getKey(item)"
|
||||||
class="list-item"
|
class="list-item"
|
||||||
:class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
|
|
||||||
role="listitem"
|
role="listitem"
|
||||||
>
|
>
|
||||||
<slot
|
<slot
|
||||||
|
|
@ -34,15 +33,24 @@ export default {
|
||||||
getKey: {
|
getKey: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: item => item.id
|
default: item => item.id
|
||||||
},
|
|
||||||
getClass: {
|
|
||||||
type: Function,
|
|
||||||
default: item => ''
|
|
||||||
},
|
|
||||||
nonInteractive: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
|
.list {
|
||||||
|
&-item:not(:last-child) {
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
border-bottom-color: $fallback--border;
|
||||||
|
border-bottom-color: var(--border, $fallback--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-empty-content {
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'ListItem',
|
|
||||||
selector: '.list-item',
|
|
||||||
states: {
|
|
||||||
active: '.-active',
|
|
||||||
hover: ':hover:not(.-non-interactive)'
|
|
||||||
},
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text',
|
|
||||||
'Link',
|
|
||||||
'Icon',
|
|
||||||
'Border',
|
|
||||||
'Button',
|
|
||||||
'ButtonUnstyled',
|
|
||||||
'RichContent',
|
|
||||||
'Input',
|
|
||||||
'Avatar'
|
|
||||||
],
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
background: '--bg',
|
|
||||||
opacity: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['active'],
|
|
||||||
directives: {
|
|
||||||
background: '--inheritedBackground, 10',
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['hover'],
|
|
||||||
directives: {
|
|
||||||
background: '--inheritedBackground, 10',
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['hover', 'active'],
|
|
||||||
directives: {
|
|
||||||
background: '--inheritedBackground, 20',
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -21,6 +21,8 @@
|
||||||
<script src="./lists_card.js"></script>
|
<script src="./lists_card.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.list-card {
|
.list-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
@ -33,6 +35,18 @@
|
||||||
.button-list-edit {
|
.button-list-edit {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
color: var(--link);
|
color: $fallback--link;
|
||||||
|
color: var(--link, $fallback--link);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $fallback--lightBg;
|
||||||
|
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||||
|
color: $fallback--link;
|
||||||
|
color: var(--selectedMenuText, $fallback--link);
|
||||||
|
|
||||||
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||||
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,6 @@
|
||||||
id="list-edit-title"
|
id="list-edit-title"
|
||||||
ref="title"
|
ref="title"
|
||||||
v-model="titleDraft"
|
v-model="titleDraft"
|
||||||
class="input"
|
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
v-if="id"
|
v-if="id"
|
||||||
|
|
@ -165,6 +164,8 @@
|
||||||
<script src="./lists_edit.js"></script>
|
<script src="./lists_edit.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.ListEdit {
|
.ListEdit {
|
||||||
--panel-body-padding: 0.5em;
|
--panel-body-padding: 0.5em;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@
|
||||||
<input
|
<input
|
||||||
ref="search"
|
ref="search"
|
||||||
v-model="query"
|
v-model="query"
|
||||||
class="input"
|
|
||||||
:placeholder="$t('lists.search')"
|
:placeholder="$t('lists.search')"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
>
|
>
|
||||||
|
|
@ -28,6 +27,8 @@
|
||||||
|
|
||||||
<script src="./lists_user_search.js"></script>
|
<script src="./lists_user_search.js"></script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.ListsUserSearch {
|
.ListsUserSearch {
|
||||||
.input-wrap {
|
.input-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
id="username"
|
id="username"
|
||||||
v-model="user.username"
|
v-model="user.username"
|
||||||
:disabled="loggingIn"
|
:disabled="loggingIn"
|
||||||
class="input form-control"
|
class="form-control"
|
||||||
:placeholder="$t('login.placeholder')"
|
:placeholder="$t('login.placeholder')"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
ref="passwordInput"
|
ref="passwordInput"
|
||||||
v-model="user.password"
|
v-model="user.password"
|
||||||
:disabled="loggingIn"
|
:disabled="loggingIn"
|
||||||
class="input form-control"
|
class="form-control"
|
||||||
type="password"
|
type="password"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -93,6 +93,8 @@
|
||||||
<script src="./login_form.js"></script>
|
<script src="./login_form.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.login-form {
|
.login-form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,8 @@
|
||||||
<script src="./media_upload.js"></script>
|
<script src="./media_upload.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.media-upload {
|
.media-upload {
|
||||||
.hidden-input-file {
|
.hidden-input-file {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,10 @@
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.MentionLink {
|
.MentionLink {
|
||||||
position: relative;
|
position: relative;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
display: inline;
|
display: inline;
|
||||||
|
color: var(--link);
|
||||||
word-break: normal;
|
word-break: normal;
|
||||||
|
|
||||||
& .new,
|
& .new,
|
||||||
|
|
@ -11,7 +14,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mention-avatar {
|
.mention-avatar {
|
||||||
border-radius: var(--roundness);
|
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
@ -58,10 +61,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-has-selection {
|
&.-has-selection {
|
||||||
--color: var(--selectionText);
|
color: var(--alertNeutralText, $fallback--text);
|
||||||
--link: var(--selectionText);
|
background-color: var(--alertNeutral, $fallback--fg);
|
||||||
|
|
||||||
background-color: var(--selectionBackground);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.at {
|
.at {
|
||||||
|
|
@ -101,7 +102,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.serverName.-faded {
|
.serverName.-faded {
|
||||||
color: var(--linkFaint);
|
color: var(--faintLink, $fallback--link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
:class="classnames"
|
:class="classnames"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
class="short"
|
class="short button-unstyled"
|
||||||
:class="{ '-with-tooltip': shouldShowTooltip }"
|
:class="{ '-with-tooltip': shouldShowTooltip }"
|
||||||
:href="url"
|
:href="url"
|
||||||
@click.prevent="onClick"
|
@click.prevent="onClick"
|
||||||
|
|
|
||||||
|
|
@ -22,13 +22,13 @@
|
||||||
/>
|
/>
|
||||||
</span><button
|
</span><button
|
||||||
v-if="!expanded"
|
v-if="!expanded"
|
||||||
class="button-unstyled -link showMoreLess"
|
class="button-unstyled showMoreLess"
|
||||||
@click="toggleShowMore"
|
@click="toggleShowMore"
|
||||||
>
|
>
|
||||||
{{ $t('status.plus_more', { number: extraMentions.length }) }}
|
{{ $t('status.plus_more', { number: extraMentions.length }) }}
|
||||||
</button><button
|
</button><button
|
||||||
v-if="expanded"
|
v-if="expanded"
|
||||||
class="button-unstyled -link showMoreLess"
|
class="button-unstyled showMoreLess"
|
||||||
@click="toggleShowMore"
|
@click="toggleShowMore"
|
||||||
>
|
>
|
||||||
{{ $t('general.show_less') }}
|
{{ $t('general.show_less') }}
|
||||||
|
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'MenuItem',
|
|
||||||
selector: '.menu-item',
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text',
|
|
||||||
'Icon',
|
|
||||||
'Input',
|
|
||||||
'Border',
|
|
||||||
'ButtonUnstyled',
|
|
||||||
'Badge',
|
|
||||||
'Avatar'
|
|
||||||
],
|
|
||||||
states: {
|
|
||||||
hover: ':hover',
|
|
||||||
active: '.-active'
|
|
||||||
},
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
background: '--bg',
|
|
||||||
opacity: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['hover'],
|
|
||||||
directives: {
|
|
||||||
background: '$mod(--bg, 5)',
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['active'],
|
|
||||||
directives: {
|
|
||||||
background: '$mod(--bg, 10)',
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
state: ['active', 'hover'],
|
|
||||||
directives: {
|
|
||||||
background: '$mod(--bg, 15)',
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Text',
|
|
||||||
parent: {
|
|
||||||
component: 'MenuItem',
|
|
||||||
state: ['hover']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textColor: '--link',
|
|
||||||
textAuto: 'no-preserve'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Text',
|
|
||||||
parent: {
|
|
||||||
component: 'MenuItem',
|
|
||||||
state: ['active']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textColor: '--link',
|
|
||||||
textAuto: 'no-preserve'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Icon',
|
|
||||||
parent: {
|
|
||||||
component: 'MenuItem',
|
|
||||||
state: ['active']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textColor: '--link',
|
|
||||||
textAuto: 'no-preserve'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'Icon',
|
|
||||||
parent: {
|
|
||||||
component: 'MenuItem',
|
|
||||||
state: ['hover']
|
|
||||||
},
|
|
||||||
directives: {
|
|
||||||
textColor: '--link',
|
|
||||||
textAuto: 'no-preserve'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
<input
|
<input
|
||||||
id="code"
|
id="code"
|
||||||
v-model="code"
|
v-model="code"
|
||||||
class="input form-control"
|
class="form-control"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<input
|
<input
|
||||||
id="code"
|
id="code"
|
||||||
v-model="code"
|
v-model="code"
|
||||||
class="input form-control"
|
class="form-control"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'MobileDrawer',
|
|
||||||
selector: '.mobile-drawer',
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text',
|
|
||||||
'Link',
|
|
||||||
'Icon',
|
|
||||||
'Border',
|
|
||||||
'Button',
|
|
||||||
'ButtonUnstyled',
|
|
||||||
'Input',
|
|
||||||
'PanelHeader',
|
|
||||||
'MenuItem',
|
|
||||||
'Notification',
|
|
||||||
'Alert',
|
|
||||||
'UserCard'
|
|
||||||
],
|
|
||||||
defaultRules: [
|
|
||||||
{
|
|
||||||
directives: {
|
|
||||||
background: '--bg',
|
|
||||||
backgroundNoCssColor: 'yes'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
component: 'PanelHeader',
|
|
||||||
parent: { component: 'MobileDrawer' },
|
|
||||||
directives: {
|
|
||||||
background: '--fg',
|
|
||||||
shadow: [{
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
blur: 4,
|
|
||||||
spread: 0,
|
|
||||||
color: '#000000',
|
|
||||||
alpha: 0.6
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
|
v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
|
||||||
class="badge -dot -notification"
|
class="alert-dot"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<NavigationPins class="pins" />
|
<NavigationPins class="pins" />
|
||||||
|
|
@ -37,24 +37,24 @@
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
v-if="unseenNotificationsCount"
|
v-if="unseenNotificationsCount"
|
||||||
class="badge -dot -notification"
|
class="alert-dot"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<aside
|
<aside
|
||||||
v-if="currentUser"
|
v-if="currentUser"
|
||||||
class="mobile-notifications-drawer mobile-drawer"
|
class="mobile-notifications-drawer"
|
||||||
:class="{ '-closed': !notificationsOpen }"
|
:class="{ '-closed': !notificationsOpen }"
|
||||||
@touchstart.stop="notificationsTouchStart"
|
@touchstart.stop="notificationsTouchStart"
|
||||||
@touchmove.stop="notificationsTouchMove"
|
@touchmove.stop="notificationsTouchMove"
|
||||||
>
|
>
|
||||||
<div class="panel-heading mobile-notifications-header">
|
<div class="mobile-notifications-header">
|
||||||
<span class="title">
|
<span class="title">
|
||||||
{{ $t('notifications.notifications') }}
|
{{ $t('notifications.notifications') }}
|
||||||
<span
|
<span
|
||||||
v-if="unseenCountBadgeText"
|
v-if="unseenCountBadgeText"
|
||||||
class="badge -notification unseen-count"
|
class="badge badge-notification unseen-count"
|
||||||
>{{ unseenCountBadgeText }}</span>
|
>{{ unseenCountBadgeText }}</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="spacer" />
|
<span class="spacer" />
|
||||||
|
|
@ -123,6 +123,8 @@
|
||||||
<script src="./mobile_nav.js"></script>
|
<script src="./mobile_nav.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.MobileNav {
|
.MobileNav {
|
||||||
z-index: var(--ZI_navbar);
|
z-index: var(--ZI_navbar);
|
||||||
|
|
||||||
|
|
@ -135,7 +137,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--link);
|
color: var(--topBarLink, $fallback--link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -163,6 +165,19 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.alert-dot {
|
||||||
|
border-radius: 100%;
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
position: absolute;
|
||||||
|
left: calc(50% - 4px);
|
||||||
|
top: calc(50% - 4px);
|
||||||
|
margin-left: 6px;
|
||||||
|
margin-top: -6px;
|
||||||
|
background-color: $fallback--cRed;
|
||||||
|
background-color: var(--badgeNotification, $fallback--cRed);
|
||||||
|
}
|
||||||
|
|
||||||
.mobile-notifications-drawer {
|
.mobile-notifications-drawer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
@ -170,13 +185,13 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
|
||||||
|
box-shadow: var(--panelShadow);
|
||||||
transition-property: transform;
|
transition-property: transform;
|
||||||
transition-duration: 0.25s;
|
transition-duration: 0.25s;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
z-index: var(--ZI_navbar);
|
z-index: var(--ZI_navbar);
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
background: var(--background);
|
|
||||||
|
|
||||||
&.-closed {
|
&.-closed {
|
||||||
transform: translateX(100%);
|
transform: translateX(100%);
|
||||||
|
|
@ -193,7 +208,11 @@
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
box-shadow: var(--shadow);
|
color: var(--topBarText);
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--topBar, $fallback--fg);
|
||||||
|
box-shadow: 0 0 4px rgb(0 0 0 / 60%);
|
||||||
|
box-shadow: var(--topBarShadow);
|
||||||
|
|
||||||
.spacer {
|
.spacer {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
@ -219,6 +238,10 @@
|
||||||
height: calc(100vh - var(--navbar-height));
|
height: calc(100vh - var(--navbar-height));
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--bg, $fallback--bg);
|
||||||
|
|
||||||
.notifications {
|
.notifications {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,8 @@
|
||||||
<script src="./mobile_post_status_button.js"></script>
|
<script src="./mobile_post_status_button.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.MobilePostButton {
|
.MobilePostButton {
|
||||||
&.button-default {
|
&.button-default {
|
||||||
width: 5em;
|
width: 5em;
|
||||||
|
|
@ -23,6 +25,8 @@
|
||||||
right: 1.5em;
|
right: 1.5em;
|
||||||
// TODO: this needs its own color, it has to stand out enough and link color
|
// TODO: this needs its own color, it has to stand out enough and link color
|
||||||
// is not very optimal for this particular use.
|
// is not very optimal for this particular use.
|
||||||
|
background-color: $fallback--fg;
|
||||||
|
background-color: var(--btn, $fallback--fg);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -38,7 +42,8 @@
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'Modals',
|
|
||||||
selector: '.modal-view',
|
|
||||||
lazy: true,
|
|
||||||
validInnerComponents: [
|
|
||||||
'Panel'
|
|
||||||
],
|
|
||||||
defaultRules: []
|
|
||||||
}
|
|
||||||
|
|
@ -12,13 +12,13 @@
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<span v-if="canGrantRole">
|
<span v-if="canGrantRole">
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item menu-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleRight("admin")"
|
@click="toggleRight("admin")"
|
||||||
>
|
>
|
||||||
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
|
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item menu-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleRight("moderator")"
|
@click="toggleRight("moderator")"
|
||||||
>
|
>
|
||||||
{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
|
{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
|
||||||
|
|
@ -31,14 +31,14 @@
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
v-if="canChangeActivationState"
|
v-if="canChangeActivationState"
|
||||||
class="menu-item dropdown-item menu-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleActivationStatus()"
|
@click="toggleActivationStatus()"
|
||||||
>
|
>
|
||||||
{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
|
{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="canDeleteAccount"
|
v-if="canDeleteAccount"
|
||||||
class="menu-item dropdown-item menu-item"
|
class="button-default dropdown-item"
|
||||||
@click="deleteUserDialog(true)"
|
@click="deleteUserDialog(true)"
|
||||||
>
|
>
|
||||||
{{ $t('user_card.admin_menu.delete_account') }}
|
{{ $t('user_card.admin_menu.delete_account') }}
|
||||||
|
|
@ -50,74 +50,74 @@
|
||||||
/>
|
/>
|
||||||
<span v-if="canUseTagPolicy">
|
<span v-if="canUseTagPolicy">
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item menu-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleTag(tags.FORCE_NSFW)"
|
@click="toggleTag(tags.FORCE_NSFW)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
|
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
|
||||||
/>
|
/>
|
||||||
{{ $t('user_card.admin_menu.force_nsfw') }}
|
{{ $t('user_card.admin_menu.force_nsfw') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item menu-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleTag(tags.STRIP_MEDIA)"
|
@click="toggleTag(tags.STRIP_MEDIA)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
|
:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
|
||||||
/>
|
/>
|
||||||
{{ $t('user_card.admin_menu.strip_media') }}
|
{{ $t('user_card.admin_menu.strip_media') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item menu-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleTag(tags.FORCE_UNLISTED)"
|
@click="toggleTag(tags.FORCE_UNLISTED)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
|
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
|
||||||
/>
|
/>
|
||||||
{{ $t('user_card.admin_menu.force_unlisted') }}
|
{{ $t('user_card.admin_menu.force_unlisted') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item menu-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleTag(tags.SANDBOX)"
|
@click="toggleTag(tags.SANDBOX)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
|
:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
|
||||||
/>
|
/>
|
||||||
{{ $t('user_card.admin_menu.sandbox') }}
|
{{ $t('user_card.admin_menu.sandbox') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="user.is_local"
|
v-if="user.is_local"
|
||||||
class="menu-item dropdown-item menu-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
|
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
|
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
|
||||||
/>
|
/>
|
||||||
{{ $t('user_card.admin_menu.disable_remote_subscription') }}
|
{{ $t('user_card.admin_menu.disable_remote_subscription') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="user.is_local"
|
v-if="user.is_local"
|
||||||
class="menu-item dropdown-item menu-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
|
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
|
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
|
||||||
/>
|
/>
|
||||||
{{ $t('user_card.admin_menu.disable_any_subscription') }}
|
{{ $t('user_card.admin_menu.disable_any_subscription') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="user.is_local"
|
v-if="user.is_local"
|
||||||
class="menu-item dropdown-item menu-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleTag(tags.QUARANTINE)"
|
@click="toggleTag(tags.QUARANTINE)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
|
:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
|
||||||
/>
|
/>
|
||||||
{{ $t('user_card.admin_menu.quarantine') }}
|
{{ $t('user_card.admin_menu.quarantine') }}
|
||||||
|
|
@ -166,6 +166,8 @@
|
||||||
<script src="./moderation_tools.js"></script>
|
<script src="./moderation_tools.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.moderation-tools-popover {
|
.moderation-tools-popover {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -227,5 +227,6 @@
|
||||||
<script src="./mrf_transparency_panel.js"></script>
|
<script src="./mrf_transparency_panel.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
@import "./mrf_transparency_panel";
|
@import "./mrf_transparency_panel";
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -37,8 +37,7 @@
|
||||||
</NavigationEntry>
|
</NavigationEntry>
|
||||||
<div
|
<div
|
||||||
v-show="showTimelines"
|
v-show="showTimelines"
|
||||||
class="timelines-background menu-item-collapsible"
|
class="timelines-background"
|
||||||
:class="{ '-expanded': showTimelines }"
|
|
||||||
>
|
>
|
||||||
<div class="timelines">
|
<div class="timelines">
|
||||||
<NavigationEntry
|
<NavigationEntry
|
||||||
|
|
@ -58,11 +57,12 @@
|
||||||
>
|
>
|
||||||
<router-link
|
<router-link
|
||||||
:title="$t('lists.manage_lists')"
|
:title="$t('lists.manage_lists')"
|
||||||
class="button-unstyled extra-button"
|
class="extra-button"
|
||||||
:to="{ name: 'lists' }"
|
:to="{ name: 'lists' }"
|
||||||
@click.stop
|
@click.stop
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
|
class="extra-button"
|
||||||
fixed-width
|
fixed-width
|
||||||
icon="wrench"
|
icon="wrench"
|
||||||
/>
|
/>
|
||||||
|
|
@ -75,8 +75,7 @@
|
||||||
</NavigationEntry>
|
</NavigationEntry>
|
||||||
<div
|
<div
|
||||||
v-show="showLists"
|
v-show="showLists"
|
||||||
class="timelines-background menu-item-collapsible"
|
class="timelines-background"
|
||||||
:class="{ '-expanded': showLists }"
|
|
||||||
>
|
>
|
||||||
<ListsMenuContent
|
<ListsMenuContent
|
||||||
:show-pin="editMode || forceEditMode"
|
:show-pin="editMode || forceEditMode"
|
||||||
|
|
@ -103,10 +102,12 @@
|
||||||
<script src="./nav_panel.js"></script>
|
<script src="./nav_panel.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.NavPanel {
|
.NavPanel {
|
||||||
.panel {
|
.panel {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--panelShadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
|
@ -115,6 +116,33 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
border-color: $fallback--border;
|
||||||
|
border-color: var(--border, $fallback--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
> li {
|
||||||
|
&:first-child .menu-item {
|
||||||
|
border-top-right-radius: $fallback--panelRadius;
|
||||||
|
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||||
|
border-top-left-radius: $fallback--panelRadius;
|
||||||
|
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child .menu-item {
|
||||||
|
border-bottom-right-radius: $fallback--panelRadius;
|
||||||
|
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||||
|
border-bottom-left-radius: $fallback--panelRadius;
|
||||||
|
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li:last-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
.navigation-chevron {
|
.navigation-chevron {
|
||||||
margin-left: 0.8em;
|
margin-left: 0.8em;
|
||||||
margin-right: 0.8em;
|
margin-right: 0.8em;
|
||||||
|
|
@ -128,6 +156,16 @@
|
||||||
|
|
||||||
.timelines-background {
|
.timelines-background {
|
||||||
padding: 0 0 0 0.6em;
|
padding: 0 0 0 0.6em;
|
||||||
|
background-color: $fallback--lightBg;
|
||||||
|
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
border-color: $fallback--border;
|
||||||
|
border-color: var(--border, $fallback--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timelines {
|
||||||
|
background-color: $fallback--bg;
|
||||||
|
background-color: var(--bg, $fallback--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-panel-heading {
|
.nav-panel-heading {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<OptionalRouterLink
|
<OptionalRouterLink
|
||||||
v-slot="{ isActive, href, navigate } = {}"
|
v-slot="{ isActive, href, navigate } = {}"
|
||||||
|
ass="ass"
|
||||||
:to="routeTo"
|
:to="routeTo"
|
||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
|
|
@ -10,7 +11,7 @@
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
:is="routeTo ? 'a' : 'button'"
|
:is="routeTo ? 'a' : 'button'"
|
||||||
class="main-link"
|
class="main-link button-unstyled"
|
||||||
:href="href"
|
:href="href"
|
||||||
@click="navigate"
|
@click="navigate"
|
||||||
>
|
>
|
||||||
|
|
@ -34,7 +35,7 @@
|
||||||
<slot />
|
<slot />
|
||||||
<div
|
<div
|
||||||
v-if="item.badgeGetter && getters[item.badgeGetter]"
|
v-if="item.badgeGetter && getters[item.badgeGetter]"
|
||||||
class="badge -notification"
|
class="badge badge-notification"
|
||||||
>
|
>
|
||||||
{{ getters[item.badgeGetter] }}
|
{{ getters[item.badgeGetter] }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -62,53 +63,73 @@
|
||||||
<script src="./navigation_entry.js"></script>
|
<script src="./navigation_entry.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.NavigationEntry.menu-item {
|
@import "../../variables";
|
||||||
--__line-height: 2.5em;
|
|
||||||
--__horizontal-gap: 0.5em;
|
|
||||||
--__vertical-gap: 0.4em;
|
|
||||||
|
|
||||||
padding: 0;
|
.NavigationEntry {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
|
||||||
|
|
||||||
&[aria-expanded] {
|
|
||||||
padding-right: var(--__horizontal-gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-link {
|
|
||||||
line-height: var(--__line-height);
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 1;
|
align-items: baseline;
|
||||||
padding: var(--__vertical-gap) var(--__horizontal-gap);
|
height: 3.5em;
|
||||||
}
|
line-height: 3.5em;
|
||||||
|
padding: 0 1em;
|
||||||
.menu-icon {
|
width: 100%;
|
||||||
line-height: var(--__line-height);
|
color: $fallback--link;
|
||||||
padding: 0;
|
color: var(--link, $fallback--link);
|
||||||
width: var(--__line-height);
|
|
||||||
margin-right: var(--__horizontal-gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timelines-chevron {
|
.timelines-chevron {
|
||||||
line-height: var(--__line-height);
|
|
||||||
padding: 0;
|
|
||||||
width: var(--__line-height);
|
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-link {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
margin-right: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
.extra-button {
|
.extra-button {
|
||||||
line-height: var(--__line-height);
|
width: 3em;
|
||||||
padding: 0;
|
|
||||||
width: var(--__line-height);
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: calc(-1 * var(--__horizontal-gap));
|
margin-right: -0.8em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
&:hover {
|
||||||
margin: 0 var(--__horizontal-gap);
|
background-color: $fallback--lightBg;
|
||||||
|
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||||
|
color: $fallback--link;
|
||||||
|
color: var(--selectedMenuText, $fallback--link);
|
||||||
|
|
||||||
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||||
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
--icon: var(--text, $fallback--icon);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.-active {
|
||||||
|
font-weight: bolder;
|
||||||
|
background-color: $fallback--lightBg;
|
||||||
|
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--selectedMenuText, $fallback--text);
|
||||||
|
|
||||||
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||||
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||||
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
--icon: var(--text, $fallback--icon);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,7 @@
|
||||||
<router-link
|
<router-link
|
||||||
v-for="item in pinnedList"
|
v-for="item in pinnedList"
|
||||||
:key="item.name"
|
:key="item.name"
|
||||||
class="button-unstyled pinned-item"
|
class="pinned-item"
|
||||||
active-class="toggled"
|
|
||||||
:to="getRouteTo(item)"
|
:to="getRouteTo(item)"
|
||||||
:title="item.labelRaw || $t(item.label)"
|
:title="item.labelRaw || $t(item.label)"
|
||||||
>
|
>
|
||||||
|
|
@ -19,7 +18,7 @@
|
||||||
>{{ item.iconLetter }}</span>
|
>{{ item.iconLetter }}</span>
|
||||||
<div
|
<div
|
||||||
v-if="item.badgeGetter && getters[item.badgeGetter]"
|
v-if="item.badgeGetter && getters[item.badgeGetter]"
|
||||||
class="badge -dot -notification"
|
class="alert-dot"
|
||||||
/>
|
/>
|
||||||
</router-link>
|
</router-link>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -28,12 +27,25 @@
|
||||||
<script src="./navigation_pins.js"></script>
|
<script src="./navigation_pins.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.NavigationPins {
|
.NavigationPins {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
.alert-dot {
|
||||||
|
border-radius: 100%;
|
||||||
|
height: 0.5em;
|
||||||
|
width: 0.5em;
|
||||||
|
position: absolute;
|
||||||
|
right: calc(50% - 0.75em);
|
||||||
|
top: calc(50% - 0.5em);
|
||||||
|
background-color: $fallback--cRed;
|
||||||
|
background-color: var(--badgeNotification, $fallback--cRed);
|
||||||
|
}
|
||||||
|
|
||||||
.pinned-item {
|
.pinned-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1 0 3em;
|
flex: 1 0 3em;
|
||||||
|
|
@ -48,8 +60,15 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.toggled {
|
&.router-link-active {
|
||||||
|
color: $fallback--text;
|
||||||
|
color: var(--panelText, $fallback--text);
|
||||||
border-bottom: 4px solid;
|
border-bottom: 4px solid;
|
||||||
|
|
||||||
|
& .svg-inline--fa,
|
||||||
|
& .iconLetter {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,13 @@
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
// TODO Copypaste from Status, should unify it somehow
|
// TODO Copypaste from Status, should unify it somehow
|
||||||
.Notification {
|
.Notification {
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
border-color: var(--border);
|
border-color: $fallback--border;
|
||||||
|
border-color: var(--border, $fallback--border);
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
|
||||||
&.Status {
|
|
||||||
/* stylelint-disable-next-line declaration-no-important */
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
--emoji-size: 14px;
|
--emoji-size: 14px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -73,22 +71,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-type--repeat .type-icon {
|
&.-type--repeat .type-icon {
|
||||||
color: var(--cGreen);
|
color: $fallback--cGreen;
|
||||||
|
color: var(--cGreen, $fallback--cGreen);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-type--follow .type-icon {
|
&.-type--follow .type-icon {
|
||||||
color: var(--cBlue);
|
color: $fallback--cBlue;
|
||||||
|
color: var(--cBlue, $fallback--cBlue);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-type--follow-request .type-icon {
|
&.-type--follow-request .type-icon {
|
||||||
color: var(--cBlue);
|
color: $fallback--cBlue;
|
||||||
|
color: var(--cBlue, $fallback--cBlue);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-type--like .type-icon {
|
&.-type--like .type-icon {
|
||||||
color: var(--cOrange);
|
color: orange;
|
||||||
|
color: $fallback--cOrange;
|
||||||
|
color: var(--cOrange, $fallback--cOrange);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-type--move .type-icon {
|
&.-type--move .type-icon {
|
||||||
color: var(--cBlue);
|
color: $fallback--cBlue;
|
||||||
|
color: var(--cBlue, $fallback--cBlue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
export default {
|
|
||||||
name: 'Notification',
|
|
||||||
selector: '.Notification',
|
|
||||||
validInnerComponents: [
|
|
||||||
'Text',
|
|
||||||
'Link',
|
|
||||||
'Icon',
|
|
||||||
'Border',
|
|
||||||
'Button',
|
|
||||||
'ButtonUnstyled',
|
|
||||||
'RichContent',
|
|
||||||
'Input',
|
|
||||||
'Avatar',
|
|
||||||
'Attachment'
|
|
||||||
],
|
|
||||||
defaultRules: []
|
|
||||||
}
|
|
||||||
|
|
@ -155,7 +155,7 @@
|
||||||
<router-link
|
<router-link
|
||||||
v-if="notification.status"
|
v-if="notification.status"
|
||||||
:to="{ name: 'conversation', params: { id: notification.status.id } }"
|
:to="{ name: 'conversation', params: { id: notification.status.id } }"
|
||||||
class="timeago-link faint"
|
class="timeago-link faint-link"
|
||||||
>
|
>
|
||||||
<Timeago
|
<Timeago
|
||||||
:time="notification.created_at"
|
:time="notification.created_at"
|
||||||
|
|
@ -247,6 +247,7 @@
|
||||||
/>
|
/>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<StatusContent
|
<StatusContent
|
||||||
|
:class="{ faint: !statusExpanded }"
|
||||||
:compact="!statusExpanded"
|
:compact="!statusExpanded"
|
||||||
:status="notification.status"
|
:status="notification.status"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -8,65 +8,65 @@
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleNotificationFilter('likes')"
|
@click="toggleNotificationFilter('likes')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': filters.likes }"
|
:class="{ 'menu-checkbox-checked': filters.likes }"
|
||||||
/>{{ $t('settings.notification_visibility_likes') }}
|
/>{{ $t('settings.notification_visibility_likes') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleNotificationFilter('repeats')"
|
@click="toggleNotificationFilter('repeats')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': filters.repeats }"
|
:class="{ 'menu-checkbox-checked': filters.repeats }"
|
||||||
/>{{ $t('settings.notification_visibility_repeats') }}
|
/>{{ $t('settings.notification_visibility_repeats') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleNotificationFilter('follows')"
|
@click="toggleNotificationFilter('follows')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': filters.follows }"
|
:class="{ 'menu-checkbox-checked': filters.follows }"
|
||||||
/>{{ $t('settings.notification_visibility_follows') }}
|
/>{{ $t('settings.notification_visibility_follows') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleNotificationFilter('mentions')"
|
@click="toggleNotificationFilter('mentions')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': filters.mentions }"
|
:class="{ 'menu-checkbox-checked': filters.mentions }"
|
||||||
/>{{ $t('settings.notification_visibility_mentions') }}
|
/>{{ $t('settings.notification_visibility_mentions') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleNotificationFilter('emojiReactions')"
|
@click="toggleNotificationFilter('emojiReactions')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': filters.emojiReactions }"
|
:class="{ 'menu-checkbox-checked': filters.emojiReactions }"
|
||||||
/>{{ $t('settings.notification_visibility_emoji_reactions') }}
|
/>{{ $t('settings.notification_visibility_emoji_reactions') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleNotificationFilter('moves')"
|
@click="toggleNotificationFilter('moves')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': filters.moves }"
|
:class="{ 'menu-checkbox-checked': filters.moves }"
|
||||||
/>{{ $t('settings.notification_visibility_moves') }}
|
/>{{ $t('settings.notification_visibility_moves') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="menu-item dropdown-item"
|
class="button-default dropdown-item"
|
||||||
@click="toggleNotificationFilter('polls')"
|
@click="toggleNotificationFilter('polls')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="input menu-checkbox"
|
class="menu-checkbox"
|
||||||
:class="{ 'menu-checkbox-checked': filters.polls }"
|
:class="{ 'menu-checkbox-checked': filters.polls }"
|
||||||
/>{{ $t('settings.notification_visibility_polls') }}
|
/>{{ $t('settings.notification_visibility_polls') }}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "../../variables";
|
||||||
|
|
||||||
.Notifications {
|
.Notifications {
|
||||||
&:not(.minimal) {
|
&:not(.minimal) {
|
||||||
// a bit of a hack to allow scrolling below notifications
|
// a bit of a hack to allow scrolling below notifications
|
||||||
|
|
@ -5,7 +7,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadmore-error {
|
.loadmore-error {
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification {
|
.notification {
|
||||||
|
|
@ -22,7 +25,7 @@
|
||||||
|
|
||||||
&.unseen {
|
&.unseen {
|
||||||
.notification-overlay {
|
.notification-overlay {
|
||||||
background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
|
background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -32,11 +35,6 @@
|
||||||
.notification {
|
.notification {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
/* TODO cleanup this */
|
|
||||||
.Status {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .animated.Avatar {
|
&:hover .animated.Avatar {
|
||||||
canvas {
|
canvas {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -62,17 +60,24 @@
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.faint {
|
||||||
|
--link: var(--faintLink);
|
||||||
|
--text: var(--faint);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.follow-request-accept {
|
.follow-request-accept {
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--text);
|
color: $fallback--text;
|
||||||
|
color: var(--text, $fallback--text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.follow-request-reject {
|
.follow-request-reject {
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--cRed);
|
color: $fallback--cRed;
|
||||||
|
color: var(--cRed, $fallback--cRed);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -92,6 +97,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* TODO cleanup this */
|
||||||
|
.Status {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
time {
|
time {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
{{ $t('notifications.notifications') }}
|
{{ $t('notifications.notifications') }}
|
||||||
<span
|
<span
|
||||||
v-if="unseenCountBadgeText"
|
v-if="unseenCountBadgeText"
|
||||||
class="badge -notification unseen-count"
|
class="badge badge-notification unseen-count"
|
||||||
>{{ unseenCountBadgeText }}</span>
|
>{{ unseenCountBadgeText }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
@ -85,7 +85,7 @@
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
v-else-if="!loading"
|
v-else-if="!loading"
|
||||||
class="button-unstyled -link text-center"
|
class="button-unstyled -link -fullwidth"
|
||||||
@click.prevent="fetchOlderNotifications()"
|
@click.prevent="fetchOlderNotifications()"
|
||||||
>
|
>
|
||||||
<div class="new-status-notification text-center">
|
<div class="new-status-notification text-center">
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue