commit: ae345d2c458bd0952d9b85c2e03060b2d286d320 parent 1c5f156af04b6df4cbce8fcf999d752e2500089c Author: Henry Jameson <me@hjkos.com> Date: Mon, 12 Feb 2024 17:26:08 +0200 buttons look great now, including unstyled ones menu items work tooDiffstat:
33 files changed, 224 insertions(+), 249 deletions(-)diff --git a/src/App.scss b/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 { - background: none; border: none; outline: none; display: inline; text-align: initial; font-size: 100%; font-family: inherit; + box-shadow: var(--shadow); padding: 0; line-height: unset; cursor: pointer; @@ -393,13 +403,6 @@ nav { &.-fullwidth { width: 100%; } - - &.-hover-highlight { - &:hover svg { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - } - } } input,diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue@@ -130,11 +130,6 @@ margin: -0.5em 0; padding: 0.5em 0; text-align: center; - - &:not(:hover) .icon { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - } } } </style>diff --git a/src/components/button.style.js b/src/components/button.style.js@@ -10,6 +10,14 @@ const border = (top, shadow) => ({ const buttonInsetFakeBorders = [border(true, false), border(false, true)] const inputInsetFakeBorders = [border(true, true), border(false, false)] +const buttonOuterShadow = { + x: 0, + y: 0, + blur: 2, + spread: 0, + color: '#000000', + alpha: 1 +} const hoverGlow = { x: 0, @@ -22,7 +30,7 @@ const hoverGlow = { export default { 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 // States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state 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: { // 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 - danger: '-default.danger' + // 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. }, @@ -56,21 +64,7 @@ export default { // like within it directives: { background: '--fg', - shadow: [{ - x: 0, - y: 0, - blur: 2, - spread: 0, - color: '#000000', - alpha: 1 - }, ...buttonInsetFakeBorders] - } - }, - { - variant: 'unstyled', - directives: { - background: '--fg', - opacity: 0 + shadow: [buttonOuterShadow, ...buttonInsetFakeBorders] } }, { @@ -82,7 +76,7 @@ export default { { state: ['pressed'], directives: { - shadow: [...inputInsetFakeBorders] + shadow: [buttonOuterShadow, ...inputInsetFakeBorders] } }, { @@ -95,7 +89,7 @@ export default { state: ['toggled'], directives: { background: '--accent,-24.2', - shadow: [...inputInsetFakeBorders] + shadow: [buttonOuterShadow, ...inputInsetFakeBorders] } }, { @@ -113,6 +107,13 @@ export default { } }, { + state: ['disabled', 'hover'], + directives: { + background: '$blend(--background, 0.25, --parent)', + shadow: [...buttonInsetFakeBorders] + } + }, + { component: 'Text', parent: { component: 'Button', @@ -122,6 +123,17 @@ export default { textOpacity: 0.25, textOpacityMode: 'blend' } + }, + { + component: 'Text', + parent: { + component: 'Button', + state: ['disabled', 'hover'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } } ] }diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js@@ -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' + } + } + ] +}diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue@@ -53,7 +53,7 @@ <template #content> <div class="dropdown-menu"> <button - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" @click="deleteMessage" > <FAIcon icon="times" /> {{ $t("chats.delete") }}diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue@@ -227,7 +227,6 @@ --faint: var(--selectedMenuPopoverFaintText, $fallback--faint); --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint); - --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText); --icon: var(--selectedMenuPopoverIcon, $fallback--icon); } }diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss@@ -10,15 +10,6 @@ $emoji-picker-emoji-size: 32px; max-width: calc(100vw - 20px); // popover gives 10px margin from window edge display: flex; 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 { display: inline-flex; @@ -104,13 +95,8 @@ $emoji-picker-emoji-size: 32px; pointer-events: none; } - &.active { + &.toggled { border-bottom: 4px solid; - - svg { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - } } } }diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue@@ -23,9 +23,9 @@ v-for="group in filteredEmojiGroups" :ref="setGroupRef('group-header-' + group.id)" :key="group.id" - class="emoji-tabs-item" + class="button-unstyled emoji-tabs-item" :class="{ - active: activeGroupView === group.id + toggled: activeGroupView === group.id }" :title="group.text" role="button" @@ -52,8 +52,8 @@ class="additional-tabs" > <span - class="stickers-tab-icon additional-tabs-item" - :class="{active: showingStickers}" + class="button-unstyled stickers-tab-icon additional-tabs-item" + :class="{toggled: showingStickers}" :title="$t('emoji.stickers')" @click.prevent="toggleStickers" >diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue@@ -18,7 +18,7 @@ > <button v-if="canMute && !status.thread_muted" - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click.prevent="muteConversation" > @@ -29,7 +29,7 @@ </button> <button v-if="canMute && status.thread_muted" - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click.prevent="unmuteConversation" > @@ -40,7 +40,7 @@ </button> <button v-if="!status.pinned && canPin" - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click.prevent="pinStatus" @click="close" @@ -52,7 +52,7 @@ </button> <button v-if="status.pinned && canPin" - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click.prevent="unpinStatus" @click="close" @@ -65,7 +65,7 @@ <template v-if="canBookmark"> <button v-if="!status.bookmarked" - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click.prevent="bookmarkStatus" @click="close" @@ -77,7 +77,7 @@ </button> <button v-if="status.bookmarked" - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click.prevent="unbookmarkStatus" @click="close" @@ -90,7 +90,7 @@ </template> <button v-if="ownStatus && editingAvailable" - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click.prevent="editStatus" @click="close" @@ -102,7 +102,7 @@ </button> <button v-if="isEdited && editingAvailable" - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click.prevent="showStatusHistory" @click="close" @@ -114,7 +114,7 @@ </button> <button v-if="canDelete" - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click.prevent="deleteStatus" @click="close" @@ -125,7 +125,7 @@ /><span>{{ $t("status.delete") }}</span> </button> <button - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click.prevent="copyLink" @click="close" @@ -137,7 +137,7 @@ </button> <a v-if="!status.is_local" - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" title="Source" :href="status.external_url" @@ -149,7 +149,7 @@ /><span>{{ $t("status.external_source") }}</span> </a> <button - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click.prevent="reportStatus" @click="close"diff --git a/src/components/input.style.js b/src/components/input.style.js@@ -24,19 +24,16 @@ export default { selector: '.input', states: { disabled: ':disabled', - pressed: ':active', hover: ':hover', focused: ':focus-within' }, - // variants: { - // }, validInnerComponents: [ 'Text' ], defaultRules: [ { directives: { - background: '--fg', + background: '--fg, -5', shadow: [{ x: 0, y: 0,diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js@@ -14,7 +14,15 @@ export default { defaultRules: [ { directives: { - background: '--fg' + background: '--bg', + opacity: 0 + } + }, + { + state: ['hover'], + directives: { + background: '$mod(--bg, 5)', + opacity: 1 } }, {diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue@@ -25,8 +25,6 @@ right: 1.5em; // TODO: this needs its own color, it has to stand out enough and link color // is not very optimal for this particular use. - background-color: $fallback--fg; - background-color: var(--btn, $fallback--fg); display: flex; justify-content: center; align-items: center;diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue@@ -12,13 +12,13 @@ <div class="dropdown-menu"> <span v-if="canGrantRole"> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleRight("admin")" > {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleRight("moderator")" > {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }} @@ -31,14 +31,14 @@ </span> <button v-if="canChangeActivationState" - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleActivationStatus()" > {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }} </button> <button v-if="canDeleteAccount" - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="deleteUserDialog(true)" > {{ $t('user_card.admin_menu.delete_account') }} @@ -50,7 +50,7 @@ /> <span v-if="canUseTagPolicy"> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleTag(tags.FORCE_NSFW)" > <span @@ -60,7 +60,7 @@ {{ $t('user_card.admin_menu.force_nsfw') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleTag(tags.STRIP_MEDIA)" > <span @@ -70,7 +70,7 @@ {{ $t('user_card.admin_menu.strip_media') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleTag(tags.FORCE_UNLISTED)" > <span @@ -80,7 +80,7 @@ {{ $t('user_card.admin_menu.force_unlisted') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleTag(tags.SANDBOX)" > <span @@ -91,7 +91,7 @@ </button> <button v-if="user.is_local" - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)" > <span @@ -102,7 +102,7 @@ </button> <button v-if="user.is_local" - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)" > <span @@ -113,7 +113,7 @@ </button> <button v-if="user.is_local" - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleTag(tags.QUARANTINE)" > <spandiff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue@@ -38,6 +38,7 @@ <div v-show="showTimelines" class="timelines-background" + :class="{ expanded: showTimelines }" > <div class="timelines"> <NavigationEntry @@ -57,12 +58,11 @@ > <router-link :title="$t('lists.manage_lists')" - class="extra-button" + class="button-unstyled extra-button" :to="{ name: 'lists' }" @click.stop > <FAIcon - class="extra-button" fixed-width icon="wrench" /> @@ -76,6 +76,7 @@ <div v-show="showLists" class="timelines-background" + :class="{ expanded: showTimelines }" > <ListsMenuContent :show-pin="editMode || forceEditMode" @@ -156,16 +157,11 @@ .timelines-background { 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); + .timelines-background.expanded + .NavigationEntry { + border-top: 1px solid; + border-color: var(--border); } .nav-panel-heading {diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue@@ -70,17 +70,22 @@ align-items: baseline; height: 3.5em; line-height: 3.5em; - padding: 0 1em; + padding: 0; width: 100%; color: $fallback--link; color: var(--link, $fallback--link); + &[aria-expanded] { + padding-right: 1em; + } + .timelines-chevron { margin-right: 0; } .main-link { flex: 1; + padding: 0 1em; } .menu-icon {diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue@@ -3,7 +3,8 @@ <router-link v-for="item in pinnedList" :key="item.name" - class="pinned-item" + class="button-unstyled pinned-item" + activeClass="toggled" :to="getRouteTo(item)" :title="item.labelRaw || $t(item.label)" > @@ -60,15 +61,8 @@ margin: 0; } - &.router-link-active { - color: $fallback--text; - color: var(--panelText, $fallback--text); + &.toggled { border-bottom: 4px solid; - - & .svg-inline--fa, - & .iconLetter { - color: inherit; - } } } }diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue@@ -8,7 +8,7 @@ <template #content> <div class="dropdown-menu"> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleNotificationFilter('likes')" > <span @@ -17,7 +17,7 @@ />{{ $t('settings.notification_visibility_likes') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleNotificationFilter('repeats')" > <span @@ -26,7 +26,7 @@ />{{ $t('settings.notification_visibility_repeats') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleNotificationFilter('follows')" > <span @@ -35,7 +35,7 @@ />{{ $t('settings.notification_visibility_follows') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleNotificationFilter('mentions')" > <span @@ -44,7 +44,7 @@ />{{ $t('settings.notification_visibility_mentions') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleNotificationFilter('emojiReactions')" > <span @@ -53,7 +53,7 @@ />{{ $t('settings.notification_visibility_emoji_reactions') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleNotificationFilter('moves')" > <span @@ -62,7 +62,7 @@ />{{ $t('settings.notification_visibility_moves') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleNotificationFilter('polls')" > <spandiff --git a/src/components/panel.style.js b/src/components/panel.style.js@@ -6,6 +6,7 @@ export default { 'Link', 'Icon', 'Button', + 'ButtonUnstyled', 'Input', 'PanelHeader', 'MenuItem'diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js@@ -5,7 +5,8 @@ export default { 'Text', 'Link', 'Icon', - 'Button' + 'Button', + 'ButtonUnstyled' ], defaultRules: [ {diff --git a/src/components/popover.style.js b/src/components/popover.style.js@@ -10,6 +10,7 @@ export default { 'Link', 'Icon', 'Button', + 'ButtonUnstyled', 'Input', 'PanelHeader', 'MenuItem'diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue@@ -53,8 +53,7 @@ position: fixed; min-width: 0; max-width: calc(100vw - 20px); - box-shadow: 2px 2px 3px rgb(0 0 0 / 50%); - box-shadow: var(--popupShadow); + box-shadow: var(--shadow); } .popover-default { @@ -66,24 +65,12 @@ left: 0; right: 0; z-index: 3; - box-shadow: 1px 1px 4px rgb(0 0 0 / 60%); - box-shadow: var(--panelShadow); + box-shadow: var(--shadow); pointer-events: none; } border-radius: $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 { @@ -127,7 +114,6 @@ svg { width: 22px; 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 { display: inline-block; 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>diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue@@ -503,31 +503,6 @@ padding: 0 0.1em; display: flex; 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 {diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue@@ -16,7 +16,7 @@ > <button v-if="!conversation" - class="button-default dropdown-item" + class="menu-item dropdown-item" :aria-checked="replyVisibilityAll" role="menuitemradio" @click="replyVisibilityAll = true" @@ -29,7 +29,7 @@ </button> <button v-if="!conversation" - class="button-default dropdown-item" + class="menu-item dropdown-item" :aria-checked="replyVisibilityFollowing" role="menuitemradio" @click="replyVisibilityFollowing = true" @@ -42,7 +42,7 @@ </button> <button v-if="!conversation" - class="button-default dropdown-item" + class="menu-item dropdown-item" :aria-checked="replyVisibilitySelf" role="menuitemradio" @click="replyVisibilitySelf = true" @@ -60,7 +60,7 @@ /> </div> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" role="menuitemcheckbox" :aria-checked="muteBotStatuses" @click="muteBotStatuses = !muteBotStatuses" @@ -72,7 +72,7 @@ />{{ $t('settings.mute_bot_posts') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" role="menuitemcheckbox" :aria-checked="hideMedia" @click="hideMedia = !hideMedia" @@ -84,7 +84,7 @@ />{{ $t('settings.hide_media_previews') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" role="menuitemcheckbox" :aria-checked="hideMutedPosts" @click="hideMutedPosts = !hideMutedPosts" @@ -96,7 +96,7 @@ />{{ $t('settings.hide_all_muted_posts') }} </button> <button - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click="openTab('filtering')" >diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue@@ -12,7 +12,7 @@ > <div role="group"> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" :aria-checked="conversationDisplay === 'tree'" role="menuitemradio" @click="conversationDisplay = 'tree'" @@ -27,7 +27,7 @@ /> {{ $t('settings.conversation_display_tree_quick') }} </button> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" :aria-checked="conversationDisplay === 'linear'" role="menuitemradio" @click="conversationDisplay = 'linear'" @@ -47,7 +47,7 @@ class="dropdown-divider" /> <button - class="button-default dropdown-item" + class="menu-item dropdown-item" role="menuitemcheckbox" :aria-checked="showUserAvatars" @click="showUserAvatars = !showUserAvatars" @@ -60,7 +60,7 @@ </button> <button v-if="!conversation" - class="button-default dropdown-item" + class="menu-item dropdown-item" role="menuitemcheckbox" :aria-checked="autoUpdate" @click="autoUpdate = !autoUpdate" @@ -73,7 +73,7 @@ </button> <button v-if="!conversation" - class="button-default dropdown-item" + class="menu-item dropdown-item" role="menuitemcheckbox" :aria-checked="collapseWithSubjects" @click="collapseWithSubjects = !collapseWithSubjects" @@ -85,7 +85,7 @@ />{{ $t('settings.collapse_subject') }} </button> <button - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" role="menuitem" @click="openTab('general')" >diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js@@ -44,10 +44,10 @@ const ScopeSelector = { }, css () { return { - public: { selected: this.currentScope === 'public' }, - unlisted: { selected: this.currentScope === 'unlisted' }, - private: { selected: this.currentScope === 'private' }, - direct: { selected: this.currentScope === 'direct' } + public: { toggled: this.currentScope === 'public' }, + unlisted: { toggled: this.currentScope === 'unlisted' }, + private: { toggled: this.currentScope === 'private' }, + direct: { toggled: this.currentScope === 'direct' } } } },diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue@@ -73,11 +73,6 @@ min-width: 1.3em; min-height: 1.3em; text-align: center; - - &.selected svg { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - } } } </style>diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue@@ -103,7 +103,7 @@ <button v-for="ref in frontend.refs" :key="ref" - class="button-default dropdown-item" + class="menu-item dropdown-item" @click.prevent="update(frontend, ref)" @click="close" > @@ -160,7 +160,7 @@ <button v-for="ref in frontend.installedRefs || frontend.refs" :key="ref" - class="button-default dropdown-item" + class="menu-item dropdown-item" @click.prevent="setDefault(frontend, ref)" @click="close" >diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue@@ -70,7 +70,7 @@ <template #content="{close}"> <div class="dropdown-menu"> <button - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" @click.prevent="backup" @click="close" > @@ -80,7 +80,7 @@ /><span>{{ $t("settings.file_export_import.backup_settings") }}</span> </button> <button - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" @click.prevent="backupWithTheme" @click="close" > @@ -90,7 +90,7 @@ /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span> </button> <button - class="button-default dropdown-item dropdown-item-icon" + class="menu-item dropdown-item dropdown-item-icon" @click.prevent="restore" @click="close" >diff --git a/src/components/status/status.scss b/src/components/status/status.scss@@ -135,11 +135,6 @@ .button-unstyled { padding: 5px; margin: -5px; - - &:hover svg { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - } } .svg-inline--fa {diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js@@ -6,6 +6,7 @@ export default { 'Text', 'Icon', 'Button', + 'ButtonUnstyled', 'Input' ], defaultRules: [diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss@@ -110,19 +110,8 @@ } .user-info { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); padding: 0 26px; - a { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - - &:hover { - color: var(--icon); - } - } - .container { min-width: 0; padding: 16px 0 6px; @@ -334,8 +323,6 @@ padding: 0.5em 1.5em 0; text-align: center; justify-content: space-between; - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); flex-wrap: wrap; }diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue@@ -10,7 +10,7 @@ <button v-for="list in lists" :key="list.id" - class="button-default dropdown-item" + class="menu-item dropdown-item" @click="toggleList(list.id)" > <spandiff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js@@ -16,6 +16,7 @@ import MenuItem from 'src/components/menu_item.style.js' import Panel from 'src/components/panel.style.js' import PanelHeader from 'src/components/panel_header.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 Text from 'src/components/text.style.js' import Link from 'src/components/link.style.js' @@ -49,6 +50,7 @@ const components = { PanelHeader, TopBar, Button, + ButtonUnstyled, Input } @@ -208,7 +210,6 @@ export const init = (extraRuleset, palette) => { }) .map(({ data }) => data) - console.log(ruleset) const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name)) 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 // TODO properly provide "parent" text color?