buttons look great now, including unstyled ones menu items work too
This commit is contained in:
parent
1c5f156af0
commit
ae345d2c45
19
src/App.scss
19
src/App.scss
@ -372,14 +372,24 @@ nav {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
text-align: initial;
|
||||||
|
font-size: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
.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);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
line-height: unset;
|
line-height: unset;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -393,13 +403,6 @@ nav {
|
|||||||
&.-fullwidth {
|
&.-fullwidth {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-hover-highlight {
|
|
||||||
&:hover svg {
|
|
||||||
color: $fallback--lightText;
|
|
||||||
color: var(--lightText, $fallback--lightText);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
|
@ -130,11 +130,6 @@
|
|||||||
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>
|
||||||
|
@ -10,6 +10,14 @@ const border = (top, shadow) => ({
|
|||||||
|
|
||||||
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
|
const buttonInsetFakeBorders = [border(true, false), border(false, true)]
|
||||||
const inputInsetFakeBorders = [border(true, true), border(false, false)]
|
const inputInsetFakeBorders = [border(true, true), border(false, false)]
|
||||||
|
const buttonOuterShadow = {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
blur: 2,
|
||||||
|
spread: 0,
|
||||||
|
color: '#000000',
|
||||||
|
alpha: 1
|
||||||
|
}
|
||||||
|
|
||||||
const hoverGlow = {
|
const hoverGlow = {
|
||||||
x: 0,
|
x: 0,
|
||||||
@ -22,7 +30,7 @@ const hoverGlow = {
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Button', // Name of the component
|
name: 'Button', // Name of the component
|
||||||
selector: '.button', // CSS selector/prefix
|
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
|
// 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, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
|
||||||
states: {
|
states: {
|
||||||
@ -39,8 +47,8 @@ export default {
|
|||||||
// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
|
// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
|
||||||
variants: {
|
variants: {
|
||||||
// Variants save on computation time since adding new variant just adds one more "set".
|
// Variants save on computation time since adding new variant just adds one more "set".
|
||||||
normal: '-default', // you can override normal variant, it will be appenended to the main class
|
// normal: '', // you can override normal variant, it will be appenended to the main class
|
||||||
danger: '-default.danger'
|
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.
|
// 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 (currently) is further multipled by number of places where component can exist.
|
||||||
},
|
},
|
||||||
@ -56,21 +64,7 @@ export default {
|
|||||||
// like within it
|
// like within it
|
||||||
directives: {
|
directives: {
|
||||||
background: '--fg',
|
background: '--fg',
|
||||||
shadow: [{
|
shadow: [buttonOuterShadow, ...buttonInsetFakeBorders]
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
blur: 2,
|
|
||||||
spread: 0,
|
|
||||||
color: '#000000',
|
|
||||||
alpha: 1
|
|
||||||
}, ...buttonInsetFakeBorders]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
variant: 'unstyled',
|
|
||||||
directives: {
|
|
||||||
background: '--fg',
|
|
||||||
opacity: 0
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -82,7 +76,7 @@ export default {
|
|||||||
{
|
{
|
||||||
state: ['pressed'],
|
state: ['pressed'],
|
||||||
directives: {
|
directives: {
|
||||||
shadow: [...inputInsetFakeBorders]
|
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -95,7 +89,7 @@ export default {
|
|||||||
state: ['toggled'],
|
state: ['toggled'],
|
||||||
directives: {
|
directives: {
|
||||||
background: '--accent,-24.2',
|
background: '--accent,-24.2',
|
||||||
shadow: [...inputInsetFakeBorders]
|
shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -112,6 +106,13 @@ export default {
|
|||||||
shadow: [...buttonInsetFakeBorders]
|
shadow: [...buttonInsetFakeBorders]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
state: ['disabled', 'hover'],
|
||||||
|
directives: {
|
||||||
|
background: '$blend(--background, 0.25, --parent)',
|
||||||
|
shadow: [...buttonInsetFakeBorders]
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
component: 'Text',
|
component: 'Text',
|
||||||
parent: {
|
parent: {
|
||||||
@ -122,6 +123,17 @@ export default {
|
|||||||
textOpacity: 0.25,
|
textOpacity: 0.25,
|
||||||
textOpacityMode: 'blend'
|
textOpacityMode: 'blend'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Text',
|
||||||
|
parent: {
|
||||||
|
component: 'Button',
|
||||||
|
state: ['disabled', 'hover']
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
textOpacity: 0.25,
|
||||||
|
textOpacityMode: 'blend'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
88
src/components/button_unstyled.style.js
Normal file
88
src/components/button_unstyled.style.js
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
export default {
|
||||||
|
name: 'ButtonUnstyled',
|
||||||
|
selector: '.button-unstyled',
|
||||||
|
states: {
|
||||||
|
disabled: ':disabled',
|
||||||
|
toggled: '.toggled',
|
||||||
|
pressed: ':active',
|
||||||
|
hover: ':hover',
|
||||||
|
focused: ':focus-within'
|
||||||
|
},
|
||||||
|
validInnerComponents: [
|
||||||
|
'Text',
|
||||||
|
'Icon'
|
||||||
|
],
|
||||||
|
defaultRules: [
|
||||||
|
{
|
||||||
|
directives: {
|
||||||
|
background: '--fg',
|
||||||
|
shadow: [],
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Icon',
|
||||||
|
parent: {
|
||||||
|
component: 'ButtonUnstyled',
|
||||||
|
state: ['hover']
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
textColor: '--parent--text'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Icon',
|
||||||
|
parent: {
|
||||||
|
component: 'ButtonUnstyled',
|
||||||
|
state: ['toggled']
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
textColor: '--parent--text'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Text',
|
||||||
|
parent: {
|
||||||
|
component: 'ButtonUnstyled',
|
||||||
|
state: ['disabled']
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
textOpacity: 0.25,
|
||||||
|
textOpacityMode: 'blend'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Text',
|
||||||
|
parent: {
|
||||||
|
component: 'ButtonUnstyled',
|
||||||
|
state: ['disabled', 'hover']
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
textOpacity: 0.25,
|
||||||
|
textOpacityMode: 'blend'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Icon',
|
||||||
|
parent: {
|
||||||
|
component: 'ButtonUnstyled',
|
||||||
|
state: ['disabled']
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
textOpacity: 0.25,
|
||||||
|
textOpacityMode: 'blend'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Icon',
|
||||||
|
parent: {
|
||||||
|
component: 'ButtonUnstyled',
|
||||||
|
state: ['disabled', 'hover']
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
textOpacity: 0.25,
|
||||||
|
textOpacityMode: 'blend'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
@ -53,7 +53,7 @@
|
|||||||
<template #content>
|
<template #content>
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item dropdown-item-icon"
|
class="menu-item dropdown-item dropdown-item-icon"
|
||||||
@click="deleteMessage"
|
@click="deleteMessage"
|
||||||
>
|
>
|
||||||
<FAIcon icon="times" /> {{ $t("chats.delete") }}
|
<FAIcon icon="times" /> {{ $t("chats.delete") }}
|
||||||
|
@ -227,7 +227,6 @@
|
|||||||
|
|
||||||
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
||||||
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
||||||
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
|
||||||
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,15 +10,6 @@ $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;
|
||||||
@ -104,13 +95,8 @@ $emoji-picker-emoji-size: 32px;
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.toggled {
|
||||||
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="emoji-tabs-item"
|
class="button-unstyled emoji-tabs-item"
|
||||||
:class="{
|
:class="{
|
||||||
active: activeGroupView === group.id
|
toggled: 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="stickers-tab-icon additional-tabs-item"
|
class="button-unstyled stickers-tab-icon additional-tabs-item"
|
||||||
:class="{active: showingStickers}"
|
:class="{toggled: showingStickers}"
|
||||||
:title="$t('emoji.stickers')"
|
:title="$t('emoji.stickers')"
|
||||||
@click.prevent="toggleStickers"
|
@click.prevent="toggleStickers"
|
||||||
>
|
>
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
v-if="canMute && !status.thread_muted"
|
v-if="canMute && !status.thread_muted"
|
||||||
class="button-default dropdown-item dropdown-item-icon"
|
class="menu-item 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="button-default dropdown-item dropdown-item-icon"
|
class="menu-item 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="button-default dropdown-item dropdown-item-icon"
|
class="menu-item 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="button-default dropdown-item dropdown-item-icon"
|
class="menu-item 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="button-default dropdown-item dropdown-item-icon"
|
class="menu-item 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="button-default dropdown-item dropdown-item-icon"
|
class="menu-item 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="button-default dropdown-item dropdown-item-icon"
|
class="menu-item 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="button-default dropdown-item dropdown-item-icon"
|
class="menu-item 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="button-default dropdown-item dropdown-item-icon"
|
class="menu-item 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="button-default dropdown-item dropdown-item-icon"
|
class="menu-item 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="button-default dropdown-item dropdown-item-icon"
|
class="menu-item 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="button-default dropdown-item dropdown-item-icon"
|
class="menu-item dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click.prevent="reportStatus"
|
@click.prevent="reportStatus"
|
||||||
@click="close"
|
@click="close"
|
||||||
|
@ -24,19 +24,16 @@ export default {
|
|||||||
selector: '.input',
|
selector: '.input',
|
||||||
states: {
|
states: {
|
||||||
disabled: ':disabled',
|
disabled: ':disabled',
|
||||||
pressed: ':active',
|
|
||||||
hover: ':hover',
|
hover: ':hover',
|
||||||
focused: ':focus-within'
|
focused: ':focus-within'
|
||||||
},
|
},
|
||||||
// variants: {
|
|
||||||
// },
|
|
||||||
validInnerComponents: [
|
validInnerComponents: [
|
||||||
'Text'
|
'Text'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
directives: {
|
directives: {
|
||||||
background: '--fg',
|
background: '--fg, -5',
|
||||||
shadow: [{
|
shadow: [{
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
|
@ -14,7 +14,15 @@ export default {
|
|||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
directives: {
|
directives: {
|
||||||
background: '--fg'
|
background: '--bg',
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
state: ['hover'],
|
||||||
|
directives: {
|
||||||
|
background: '$mod(--bg, 5)',
|
||||||
|
opacity: 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -25,8 +25,6 @@
|
|||||||
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;
|
||||||
|
@ -12,13 +12,13 @@
|
|||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<span v-if="canGrantRole">
|
<span v-if="canGrantRole">
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item 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="button-default dropdown-item"
|
class="menu-item 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="button-default dropdown-item"
|
class="menu-item 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="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="deleteUserDialog(true)"
|
@click="deleteUserDialog(true)"
|
||||||
>
|
>
|
||||||
{{ $t('user_card.admin_menu.delete_account') }}
|
{{ $t('user_card.admin_menu.delete_account') }}
|
||||||
@ -50,7 +50,7 @@
|
|||||||
/>
|
/>
|
||||||
<span v-if="canUseTagPolicy">
|
<span v-if="canUseTagPolicy">
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleTag(tags.FORCE_NSFW)"
|
@click="toggleTag(tags.FORCE_NSFW)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -60,7 +60,7 @@
|
|||||||
{{ $t('user_card.admin_menu.force_nsfw') }}
|
{{ $t('user_card.admin_menu.force_nsfw') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleTag(tags.STRIP_MEDIA)"
|
@click="toggleTag(tags.STRIP_MEDIA)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -70,7 +70,7 @@
|
|||||||
{{ $t('user_card.admin_menu.strip_media') }}
|
{{ $t('user_card.admin_menu.strip_media') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleTag(tags.FORCE_UNLISTED)"
|
@click="toggleTag(tags.FORCE_UNLISTED)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -80,7 +80,7 @@
|
|||||||
{{ $t('user_card.admin_menu.force_unlisted') }}
|
{{ $t('user_card.admin_menu.force_unlisted') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleTag(tags.SANDBOX)"
|
@click="toggleTag(tags.SANDBOX)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -91,7 +91,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="user.is_local"
|
v-if="user.is_local"
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
|
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -102,7 +102,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="user.is_local"
|
v-if="user.is_local"
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
|
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -113,7 +113,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="user.is_local"
|
v-if="user.is_local"
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleTag(tags.QUARANTINE)"
|
@click="toggleTag(tags.QUARANTINE)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
|
@ -38,6 +38,7 @@
|
|||||||
<div
|
<div
|
||||||
v-show="showTimelines"
|
v-show="showTimelines"
|
||||||
class="timelines-background"
|
class="timelines-background"
|
||||||
|
:class="{ expanded: showTimelines }"
|
||||||
>
|
>
|
||||||
<div class="timelines">
|
<div class="timelines">
|
||||||
<NavigationEntry
|
<NavigationEntry
|
||||||
@ -57,12 +58,11 @@
|
|||||||
>
|
>
|
||||||
<router-link
|
<router-link
|
||||||
:title="$t('lists.manage_lists')"
|
:title="$t('lists.manage_lists')"
|
||||||
class="extra-button"
|
class="button-unstyled 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"
|
||||||
/>
|
/>
|
||||||
@ -76,6 +76,7 @@
|
|||||||
<div
|
<div
|
||||||
v-show="showLists"
|
v-show="showLists"
|
||||||
class="timelines-background"
|
class="timelines-background"
|
||||||
|
:class="{ expanded: showTimelines }"
|
||||||
>
|
>
|
||||||
<ListsMenuContent
|
<ListsMenuContent
|
||||||
:show-pin="editMode || forceEditMode"
|
:show-pin="editMode || forceEditMode"
|
||||||
@ -156,16 +157,11 @@
|
|||||||
|
|
||||||
.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 {
|
.timelines-background.expanded + .NavigationEntry {
|
||||||
background-color: $fallback--bg;
|
border-top: 1px solid;
|
||||||
background-color: var(--bg, $fallback--bg);
|
border-color: var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-panel-heading {
|
.nav-panel-heading {
|
||||||
|
@ -70,17 +70,22 @@
|
|||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
height: 3.5em;
|
height: 3.5em;
|
||||||
line-height: 3.5em;
|
line-height: 3.5em;
|
||||||
padding: 0 1em;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: $fallback--link;
|
color: $fallback--link;
|
||||||
color: var(--link, $fallback--link);
|
color: var(--link, $fallback--link);
|
||||||
|
|
||||||
|
&[aria-expanded] {
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
.timelines-chevron {
|
.timelines-chevron {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-link {
|
.main-link {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
padding: 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
|
@ -3,7 +3,8 @@
|
|||||||
<router-link
|
<router-link
|
||||||
v-for="item in pinnedList"
|
v-for="item in pinnedList"
|
||||||
:key="item.name"
|
:key="item.name"
|
||||||
class="pinned-item"
|
class="button-unstyled pinned-item"
|
||||||
|
activeClass="toggled"
|
||||||
:to="getRouteTo(item)"
|
:to="getRouteTo(item)"
|
||||||
:title="item.labelRaw || $t(item.label)"
|
:title="item.labelRaw || $t(item.label)"
|
||||||
>
|
>
|
||||||
@ -60,15 +61,8 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.router-link-active {
|
&.toggled {
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--panelText, $fallback--text);
|
|
||||||
border-bottom: 4px solid;
|
border-bottom: 4px solid;
|
||||||
|
|
||||||
& .svg-inline--fa,
|
|
||||||
& .iconLetter {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
<template #content>
|
<template #content>
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleNotificationFilter('likes')"
|
@click="toggleNotificationFilter('likes')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -17,7 +17,7 @@
|
|||||||
/>{{ $t('settings.notification_visibility_likes') }}
|
/>{{ $t('settings.notification_visibility_likes') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleNotificationFilter('repeats')"
|
@click="toggleNotificationFilter('repeats')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -26,7 +26,7 @@
|
|||||||
/>{{ $t('settings.notification_visibility_repeats') }}
|
/>{{ $t('settings.notification_visibility_repeats') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleNotificationFilter('follows')"
|
@click="toggleNotificationFilter('follows')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -35,7 +35,7 @@
|
|||||||
/>{{ $t('settings.notification_visibility_follows') }}
|
/>{{ $t('settings.notification_visibility_follows') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleNotificationFilter('mentions')"
|
@click="toggleNotificationFilter('mentions')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -44,7 +44,7 @@
|
|||||||
/>{{ $t('settings.notification_visibility_mentions') }}
|
/>{{ $t('settings.notification_visibility_mentions') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleNotificationFilter('emojiReactions')"
|
@click="toggleNotificationFilter('emojiReactions')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -53,7 +53,7 @@
|
|||||||
/>{{ $t('settings.notification_visibility_emoji_reactions') }}
|
/>{{ $t('settings.notification_visibility_emoji_reactions') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleNotificationFilter('moves')"
|
@click="toggleNotificationFilter('moves')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -62,7 +62,7 @@
|
|||||||
/>{{ $t('settings.notification_visibility_moves') }}
|
/>{{ $t('settings.notification_visibility_moves') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleNotificationFilter('polls')"
|
@click="toggleNotificationFilter('polls')"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
|
@ -6,6 +6,7 @@ export default {
|
|||||||
'Link',
|
'Link',
|
||||||
'Icon',
|
'Icon',
|
||||||
'Button',
|
'Button',
|
||||||
|
'ButtonUnstyled',
|
||||||
'Input',
|
'Input',
|
||||||
'PanelHeader',
|
'PanelHeader',
|
||||||
'MenuItem'
|
'MenuItem'
|
||||||
|
@ -5,7 +5,8 @@ export default {
|
|||||||
'Text',
|
'Text',
|
||||||
'Link',
|
'Link',
|
||||||
'Icon',
|
'Icon',
|
||||||
'Button'
|
'Button',
|
||||||
|
'ButtonUnstyled'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
|
@ -10,6 +10,7 @@ export default {
|
|||||||
'Link',
|
'Link',
|
||||||
'Icon',
|
'Icon',
|
||||||
'Button',
|
'Button',
|
||||||
|
'ButtonUnstyled',
|
||||||
'Input',
|
'Input',
|
||||||
'PanelHeader',
|
'PanelHeader',
|
||||||
'MenuItem'
|
'MenuItem'
|
||||||
|
@ -53,8 +53,7 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
max-width: calc(100vw - 20px);
|
max-width: calc(100vw - 20px);
|
||||||
box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
|
box-shadow: var(--shadow);
|
||||||
box-shadow: var(--popupShadow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover-default {
|
.popover-default {
|
||||||
@ -66,24 +65,12 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
|
box-shadow: var(--shadow);
|
||||||
box-shadow: var(--panelShadow);
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
border-radius: $fallback--btnRadius;
|
border-radius: $fallback--btnRadius;
|
||||||
border-radius: var(--btnRadius, $fallback--btnRadius);
|
border-radius: var(--btnRadius, $fallback--btnRadius);
|
||||||
background-color: $fallback--bg;
|
|
||||||
background-color: var(--popover, $fallback--bg);
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--popoverText, $fallback--text);
|
|
||||||
|
|
||||||
--faint: var(--popoverFaintText, $fallback--faint);
|
|
||||||
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
|
||||||
--lightText: var(--popoverLightText, $fallback--lightText);
|
|
||||||
--postLink: var(--popoverPostLink, $fallback--link);
|
|
||||||
--postFaintLink: var(--popoverPostFaintLink, $fallback--link);
|
|
||||||
--icon: var(--popoverIcon, $fallback--icon);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
@ -127,7 +114,6 @@
|
|||||||
svg {
|
svg {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.75rem;
|
||||||
color: var(--menuPopoverIcon, $fallback--icon);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -138,25 +124,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:hover {
|
|
||||||
background-color: $fallback--lightBg;
|
|
||||||
background-color: var(--selectedMenuPopover, $fallback--lightBg);
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
--btnText: var(--selectedMenuPopoverText, $fallback--link);
|
|
||||||
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
|
||||||
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
|
||||||
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
|
||||||
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
color: var(--selectedMenuPopoverIcon, $fallback--icon);
|
|
||||||
|
|
||||||
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-checkbox {
|
.menu-checkbox {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
@ -188,30 +155,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-default.dropdown-item {
|
|
||||||
&,
|
|
||||||
i[class*="icon-"] {
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnText, $fallback--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: $fallback--lightBg;
|
|
||||||
background-color: var(--selectedMenuPopover, $fallback--lightBg);
|
|
||||||
color: $fallback--link;
|
|
||||||
color: var(--selectedMenuPopoverText, $fallback--link);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnDisabledText, $fallback--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.toggled {
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--btnToggledText, $fallback--text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -503,31 +503,6 @@
|
|||||||
padding: 0 0.1em;
|
padding: 0 0.1em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&.selected,
|
|
||||||
&:hover {
|
|
||||||
// needs to be specific to override icon default color
|
|
||||||
svg,
|
|
||||||
i,
|
|
||||||
label {
|
|
||||||
color: $fallback--lightText;
|
|
||||||
color: var(--lightText, $fallback--lightText);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
svg,
|
|
||||||
i {
|
|
||||||
cursor: not-allowed;
|
|
||||||
color: $fallback--icon;
|
|
||||||
color: var(--btnDisabledText, $fallback--icon);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $fallback--icon;
|
|
||||||
color: var(--btnDisabledText, $fallback--icon);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
v-if="!conversation"
|
v-if="!conversation"
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
:aria-checked="replyVisibilityAll"
|
:aria-checked="replyVisibilityAll"
|
||||||
role="menuitemradio"
|
role="menuitemradio"
|
||||||
@click="replyVisibilityAll = true"
|
@click="replyVisibilityAll = true"
|
||||||
@ -29,7 +29,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="!conversation"
|
v-if="!conversation"
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
:aria-checked="replyVisibilityFollowing"
|
:aria-checked="replyVisibilityFollowing"
|
||||||
role="menuitemradio"
|
role="menuitemradio"
|
||||||
@click="replyVisibilityFollowing = true"
|
@click="replyVisibilityFollowing = true"
|
||||||
@ -42,7 +42,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="!conversation"
|
v-if="!conversation"
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
:aria-checked="replyVisibilitySelf"
|
:aria-checked="replyVisibilitySelf"
|
||||||
role="menuitemradio"
|
role="menuitemradio"
|
||||||
@click="replyVisibilitySelf = true"
|
@click="replyVisibilitySelf = true"
|
||||||
@ -60,7 +60,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
role="menuitemcheckbox"
|
role="menuitemcheckbox"
|
||||||
:aria-checked="muteBotStatuses"
|
:aria-checked="muteBotStatuses"
|
||||||
@click="muteBotStatuses = !muteBotStatuses"
|
@click="muteBotStatuses = !muteBotStatuses"
|
||||||
@ -72,7 +72,7 @@
|
|||||||
/>{{ $t('settings.mute_bot_posts') }}
|
/>{{ $t('settings.mute_bot_posts') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
role="menuitemcheckbox"
|
role="menuitemcheckbox"
|
||||||
:aria-checked="hideMedia"
|
:aria-checked="hideMedia"
|
||||||
@click="hideMedia = !hideMedia"
|
@click="hideMedia = !hideMedia"
|
||||||
@ -84,7 +84,7 @@
|
|||||||
/>{{ $t('settings.hide_media_previews') }}
|
/>{{ $t('settings.hide_media_previews') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
role="menuitemcheckbox"
|
role="menuitemcheckbox"
|
||||||
:aria-checked="hideMutedPosts"
|
:aria-checked="hideMutedPosts"
|
||||||
@click="hideMutedPosts = !hideMutedPosts"
|
@click="hideMutedPosts = !hideMutedPosts"
|
||||||
@ -96,7 +96,7 @@
|
|||||||
/>{{ $t('settings.hide_all_muted_posts') }}
|
/>{{ $t('settings.hide_all_muted_posts') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item dropdown-item-icon"
|
class="menu-item dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click="openTab('filtering')"
|
@click="openTab('filtering')"
|
||||||
>
|
>
|
||||||
|
@ -12,7 +12,7 @@
|
|||||||
>
|
>
|
||||||
<div role="group">
|
<div role="group">
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
:aria-checked="conversationDisplay === 'tree'"
|
:aria-checked="conversationDisplay === 'tree'"
|
||||||
role="menuitemradio"
|
role="menuitemradio"
|
||||||
@click="conversationDisplay = 'tree'"
|
@click="conversationDisplay = 'tree'"
|
||||||
@ -27,7 +27,7 @@
|
|||||||
/> {{ $t('settings.conversation_display_tree_quick') }}
|
/> {{ $t('settings.conversation_display_tree_quick') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
:aria-checked="conversationDisplay === 'linear'"
|
:aria-checked="conversationDisplay === 'linear'"
|
||||||
role="menuitemradio"
|
role="menuitemradio"
|
||||||
@click="conversationDisplay = 'linear'"
|
@click="conversationDisplay = 'linear'"
|
||||||
@ -47,7 +47,7 @@
|
|||||||
class="dropdown-divider"
|
class="dropdown-divider"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
role="menuitemcheckbox"
|
role="menuitemcheckbox"
|
||||||
:aria-checked="showUserAvatars"
|
:aria-checked="showUserAvatars"
|
||||||
@click="showUserAvatars = !showUserAvatars"
|
@click="showUserAvatars = !showUserAvatars"
|
||||||
@ -60,7 +60,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="!conversation"
|
v-if="!conversation"
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
role="menuitemcheckbox"
|
role="menuitemcheckbox"
|
||||||
:aria-checked="autoUpdate"
|
:aria-checked="autoUpdate"
|
||||||
@click="autoUpdate = !autoUpdate"
|
@click="autoUpdate = !autoUpdate"
|
||||||
@ -73,7 +73,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="!conversation"
|
v-if="!conversation"
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
role="menuitemcheckbox"
|
role="menuitemcheckbox"
|
||||||
:aria-checked="collapseWithSubjects"
|
:aria-checked="collapseWithSubjects"
|
||||||
@click="collapseWithSubjects = !collapseWithSubjects"
|
@click="collapseWithSubjects = !collapseWithSubjects"
|
||||||
@ -85,7 +85,7 @@
|
|||||||
/>{{ $t('settings.collapse_subject') }}
|
/>{{ $t('settings.collapse_subject') }}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item dropdown-item-icon"
|
class="menu-item dropdown-item dropdown-item-icon"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
@click="openTab('general')"
|
@click="openTab('general')"
|
||||||
>
|
>
|
||||||
|
@ -44,10 +44,10 @@ const ScopeSelector = {
|
|||||||
},
|
},
|
||||||
css () {
|
css () {
|
||||||
return {
|
return {
|
||||||
public: { selected: this.currentScope === 'public' },
|
public: { toggled: this.currentScope === 'public' },
|
||||||
unlisted: { selected: this.currentScope === 'unlisted' },
|
unlisted: { toggled: this.currentScope === 'unlisted' },
|
||||||
private: { selected: this.currentScope === 'private' },
|
private: { toggled: this.currentScope === 'private' },
|
||||||
direct: { selected: this.currentScope === 'direct' }
|
direct: { toggled: this.currentScope === 'direct' }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -73,11 +73,6 @@
|
|||||||
min-width: 1.3em;
|
min-width: 1.3em;
|
||||||
min-height: 1.3em;
|
min-height: 1.3em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
&.selected svg {
|
|
||||||
color: $fallback--lightText;
|
|
||||||
color: var(--lightText, $fallback--lightText);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -103,7 +103,7 @@
|
|||||||
<button
|
<button
|
||||||
v-for="ref in frontend.refs"
|
v-for="ref in frontend.refs"
|
||||||
:key="ref"
|
:key="ref"
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click.prevent="update(frontend, ref)"
|
@click.prevent="update(frontend, ref)"
|
||||||
@click="close"
|
@click="close"
|
||||||
>
|
>
|
||||||
@ -160,7 +160,7 @@
|
|||||||
<button
|
<button
|
||||||
v-for="ref in frontend.installedRefs || frontend.refs"
|
v-for="ref in frontend.installedRefs || frontend.refs"
|
||||||
:key="ref"
|
:key="ref"
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click.prevent="setDefault(frontend, ref)"
|
@click.prevent="setDefault(frontend, ref)"
|
||||||
@click="close"
|
@click="close"
|
||||||
>
|
>
|
||||||
|
@ -70,7 +70,7 @@
|
|||||||
<template #content="{close}">
|
<template #content="{close}">
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item dropdown-item-icon"
|
class="menu-item dropdown-item dropdown-item-icon"
|
||||||
@click.prevent="backup"
|
@click.prevent="backup"
|
||||||
@click="close"
|
@click="close"
|
||||||
>
|
>
|
||||||
@ -80,7 +80,7 @@
|
|||||||
/><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
|
/><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item dropdown-item-icon"
|
class="menu-item dropdown-item dropdown-item-icon"
|
||||||
@click.prevent="backupWithTheme"
|
@click.prevent="backupWithTheme"
|
||||||
@click="close"
|
@click="close"
|
||||||
>
|
>
|
||||||
@ -90,7 +90,7 @@
|
|||||||
/><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
|
/><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="button-default dropdown-item dropdown-item-icon"
|
class="menu-item dropdown-item dropdown-item-icon"
|
||||||
@click.prevent="restore"
|
@click.prevent="restore"
|
||||||
@click="close"
|
@click="close"
|
||||||
>
|
>
|
||||||
|
@ -135,11 +135,6 @@
|
|||||||
.button-unstyled {
|
.button-unstyled {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin: -5px;
|
margin: -5px;
|
||||||
|
|
||||||
&:hover svg {
|
|
||||||
color: $fallback--lightText;
|
|
||||||
color: var(--lightText, $fallback--lightText);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-inline--fa {
|
.svg-inline--fa {
|
||||||
|
@ -6,6 +6,7 @@ export default {
|
|||||||
'Text',
|
'Text',
|
||||||
'Icon',
|
'Icon',
|
||||||
'Button',
|
'Button',
|
||||||
|
'ButtonUnstyled',
|
||||||
'Input'
|
'Input'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
|
@ -110,19 +110,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.user-info {
|
.user-info {
|
||||||
color: $fallback--lightText;
|
|
||||||
color: var(--lightText, $fallback--lightText);
|
|
||||||
padding: 0 26px;
|
padding: 0 26px;
|
||||||
|
|
||||||
a {
|
|
||||||
color: $fallback--lightText;
|
|
||||||
color: var(--lightText, $fallback--lightText);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--icon);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 16px 0 6px;
|
padding: 16px 0 6px;
|
||||||
@ -334,8 +323,6 @@
|
|||||||
padding: 0.5em 1.5em 0;
|
padding: 0.5em 1.5em 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
color: $fallback--lightText;
|
|
||||||
color: var(--lightText, $fallback--lightText);
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
<button
|
<button
|
||||||
v-for="list in lists"
|
v-for="list in lists"
|
||||||
:key="list.id"
|
:key="list.id"
|
||||||
class="button-default dropdown-item"
|
class="menu-item dropdown-item"
|
||||||
@click="toggleList(list.id)"
|
@click="toggleList(list.id)"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
|
@ -16,6 +16,7 @@ import MenuItem from 'src/components/menu_item.style.js'
|
|||||||
import Panel from 'src/components/panel.style.js'
|
import Panel from 'src/components/panel.style.js'
|
||||||
import PanelHeader from 'src/components/panel_header.style.js'
|
import PanelHeader from 'src/components/panel_header.style.js'
|
||||||
import Button from 'src/components/button.style.js'
|
import Button from 'src/components/button.style.js'
|
||||||
|
import ButtonUnstyled from 'src/components/button_unstyled.style.js'
|
||||||
import Input from 'src/components/input.style.js'
|
import Input from 'src/components/input.style.js'
|
||||||
import Text from 'src/components/text.style.js'
|
import Text from 'src/components/text.style.js'
|
||||||
import Link from 'src/components/link.style.js'
|
import Link from 'src/components/link.style.js'
|
||||||
@ -49,6 +50,7 @@ const components = {
|
|||||||
PanelHeader,
|
PanelHeader,
|
||||||
TopBar,
|
TopBar,
|
||||||
Button,
|
Button,
|
||||||
|
ButtonUnstyled,
|
||||||
Input
|
Input
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -208,7 +210,6 @@ export const init = (extraRuleset, palette) => {
|
|||||||
})
|
})
|
||||||
.map(({ data }) => data)
|
.map(({ data }) => data)
|
||||||
|
|
||||||
console.log(ruleset)
|
|
||||||
const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
|
const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
|
||||||
|
|
||||||
const addRule = (rule) => {
|
const addRule = (rule) => {
|
||||||
@ -437,11 +438,6 @@ export const init = (extraRuleset, palette) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (component.name === 'Text' && combination.variant === 'normal' && computedRule.parent.component === 'MenuItem' && computedRule.parent.state.indexOf('hover') >= 0) {
|
|
||||||
console.log(existingRules)
|
|
||||||
console.log(computedRule, newTextRule)
|
|
||||||
}
|
|
||||||
|
|
||||||
dynamicVars.inheritedBackground = lowerLevelBackground
|
dynamicVars.inheritedBackground = lowerLevelBackground
|
||||||
|
|
||||||
// TODO properly provide "parent" text color?
|
// TODO properly provide "parent" text color?
|
||||||
|
Loading…
Reference in New Issue
Block a user