github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 19:03:48 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: update appropriate btn-flat instances to btn-transparent (#25945)

Browse Source 
With the adjustments of `btn-transparent` in https://github.com/discourse/discourse/pull/24666, there are more buttons that could use this class instead of `btn-flat`. This mostly relates to `x` close buttons, but also includes composer and chat toggles.

The primary difference between these styles is that `btn-transparent` never has a background, where `btn-flat` may have a hover or focus background.
This commit is contained in:
Kris 2024-02-29 05:47:07 -05:00 committed by GitHub
parent 88f833418f
commit 8c22831672
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
29 changed files with 36 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/admin/addon/components/theme-upload-add.hbs
View File

@ -41,7 +41,7 @@
<DButton
@action={{@closeModal}}
@label="cancel"
class="btn-flat d-modal-cancel"
class="btn-transparent d-modal-cancel"
/>
</:footer>
</DModal>

2
app/assets/javascripts/admin/addon/components/themes-list.hbs
View File

@ -65,7 +65,7 @@
/>
{{else}}
<DButton
class="btn-flat select-inactive-mode"
class="btn-transparent select-inactive-mode"
@action={{this.toggleInactiveMode}}
>
{{d-icon "list"}}

2
app/assets/javascripts/discourse/app/components/composer-container.hbs
View File

@ -401,7 +401,7 @@
@translatedTitle={{this.composer.toggleText}}
@icon="angle-double-left"
class={{concat-class
"btn-flat btn-mini-toggle toggle-preview"
"btn-transparent btn-mini-toggle toggle-preview"
(unless this.composer.showPreview "active")
}}
/>

2
app/assets/javascripts/discourse/app/components/composer-tip-close-button.hbs
View File

@ -3,5 +3,5 @@
@icon="times"
@label="composer.esc"
@ariaLabel="composer.esc_label"
class="btn-flat close"
class="btn-transparent close"
/>

4
app/assets/javascripts/discourse/app/components/composer-toggles.hbs
View File

@ -18,7 +18,7 @@
@icon={{this.fullscreenIcon}}
@action={{this.toggleFullscreen}}
@title={{this.fullscreenTitle}}
class="btn-flat toggle-fullscreen btn-mini-toggle"
class="btn-transparent toggle-fullscreen btn-mini-toggle"
/>
{{/if}}
@ -26,6 +26,6 @@
@icon={{this.toggleIcon}}
@action={{this.toggleComposer}}
@title={{this.toggleTitle}}
class="btn-flat toggler toggle-minimize btn-mini-toggle"
class="btn-transparent toggler toggle-minimize btn-mini-toggle"
/>
</div>

2
app/assets/javascripts/discourse/app/components/d-lightbox/body.hbs
View File

@ -11,7 +11,7 @@
@title="experimental_lightbox.buttons.previous"
@icon={{@previousButtonIcon}}
@ariaHidden="true"
class="d-lightbox__previous-button btn-flat"
class="d-lightbox__previous-button btn-transparent"
/>
{{/if}}
{{#if @isLoading}}

2
app/assets/javascripts/discourse/app/components/d-modal.hbs
View File

@ -57,7 +57,7 @@
@icon="times"
@action={{this.handleCloseButton}}
@title="modal.close"
class="btn-flat modal-close"
class="btn-transparent modal-close"
/>
{{/if}}
</div>

2
app/assets/javascripts/discourse/app/components/global-notice.hbs
View File

@ -16,7 +16,7 @@
<DButton
@icon="times"
@action={{fn this.dismissNotice notice}}
class="btn-flat close"
class="btn-transparent close"
/>
{{/if}}
</div>

2
app/assets/javascripts/discourse/app/components/notification-consent-banner.gjs
View File

@ -70,7 +70,7 @@ export default class NotificationConsentBanner extends Component {
@icon="times"
@action={{this.dismiss}}
@title="banner.close"
class="btn-flat close"
class="btn-transparent close"
/>
</div>
</div>

2
app/assets/javascripts/discourse/app/components/pwa-install-banner.hbs
View File

@ -12,7 +12,7 @@
@icon="times"
@action={{action "dismiss"}}
@title="banner.close"
class="btn-flat close"
class="btn-transparent close"
/>
</div>
</div>

2
app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs
View File

@ -4,7 +4,7 @@
@action={{@toggleSectionDisplay}}
aria-controls={{@sidebarSectionContentID}}
aria-expanded={{if @isExpanded "true" "false"}}
class="sidebar-section-header sidebar-section-header-collapsable btn-flat"
class="sidebar-section-header sidebar-section-header-collapsable btn-transparent"
>
{{yield}}
</DButton>

2
app/assets/javascripts/discourse/app/components/user-status-picker.hbs
View File

@ -5,7 +5,7 @@
>
<button
type="button"
class="btn-emoji btn-flat"
class="btn-emoji btn-transparent"
onclick={{this.toggleEmojiPicker}}
{{on "focus" this.focus}}
{{on "blur" this.blur}}

2
app/assets/javascripts/discourse/app/raw-templates/flat-button.hbr
View File

@ -1,3 +1,3 @@
<button class='btn-flat {{class}}' title='{{i18n "topics.bulk.toggle"}}'>
<button class='btn-transparent {{class}}' title='{{i18n "topics.bulk.toggle"}}'>
{{d-icon icon}}
</button>

2
app/assets/javascripts/float-kit/addon/components/d-default-toast.gjs
View File

@ -48,7 +48,7 @@ const DDefaultToast = <template>
{{/if}}
</div>
<div class="fk-d-default-toast__close-container">
<DButton class="btn-flat" @icon="times" @action={{@close}} />
<DButton class="btn-transparent" @icon="times" @action={{@close}} />
</div>
</div>
</template>;

4
app/assets/stylesheets/common/base/compose.scss
View File

@ -176,10 +176,6 @@ html.composer-open {
display: flex;
gap: 8px;
margin-left: 8px;
.d-icon {
color: var(--primary-medium);
}
}
}

4
app/assets/stylesheets/common/base/sidebar-section.scss
View File

@ -82,6 +82,10 @@
&.sidebar-section-header-collapsable {
justify-content: flex-start;
&:hover {
color: var(--primary);
}
&:focus {
background: transparent;
}

9
app/assets/stylesheets/common/components/buttons.scss
View File

@ -452,16 +452,9 @@
border-radius: var(--d-border-radius);
padding: 0.4em 0.467em;
.d-icon {
color: var(--primary-high);
color: var(--primary-medium);
}
@include hover {
background: transparent;
.d-icon {
color: var(--primary);
}
}
&:focus {
background: var(--primary-low);
.d-icon {
color: var(--primary);
}

4
app/assets/stylesheets/common/components/user-status-picker.scss
View File

@ -12,10 +12,6 @@
margin: 3px;
width: 2.3em;
text-align: center;
.svg-icon {
color: var(--primary-high);
}
}
.user-status-description {

2
plugins/chat/assets/javascripts/discourse/components/chat-notice.gjs
View File

@ -38,7 +38,7 @@ export default class ChatNotices extends Component {
<DButton
@icon="times"
@action={{this.clearNotice}}
class="btn-flat chat-notices__notice__clear"
class="btn-transparent chat-notices__notice__clear"
/>
</div>
</template>

2
plugins/chat/assets/javascripts/discourse/components/chat-retention-reminder.gjs
View File

@ -41,7 +41,7 @@ export default class ChatRetentionReminder extends Component {
<DButton
@action={{this.dismiss}}
@icon="times"
class="btn no-text btn-icon btn-flat no-text dismiss-btn"
class="no-text btn-icon btn-transparent dismiss-btn"
/>
</div>
{{/if}}

2
plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-drawer-button.gjs
View File

@ -18,7 +18,7 @@ export default class ChatNavbarCloseDrawerButton extends Component {
@icon="times"
@action={{this.closeDrawer}}
@title="chat.close"
class="btn-flat no-text c-navbar__close-drawer-button"
class="btn-transparent no-text c-navbar__close-drawer-button"
/>
</template>
}

2
plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-thread-button.gjs
View File

@ -10,7 +10,7 @@ export default class ChatNavbarCloseThreadButton extends Component {
<template>
{{#if this.site.desktopView}}
<LinkTo
class="c-navbar__close-thread-button btn-flat btn btn-icon no-text"
class="c-navbar__close-thread-button btn-transparent btn btn-icon no-text"
@route="chat.channel"
@models={{@thread.channel.routeModels}}
title={{i18n "chat.thread.close"}}

2
plugins/chat/assets/javascripts/discourse/components/chat/navbar/close-threads-button.gjs
View File

@ -12,7 +12,7 @@ export default class ChatNavbarCloseThreadsButton extends Component {
<template>
{{#if this.site.desktopView}}
<LinkTo
class="c-navbar__close-threads-button btn-flat btn btn-icon no-text"
class="c-navbar__close-threads-button btn-transparent btn btn-icon no-text"
@route="chat.channel"
@models={{@channel.routeModels}}
title={{this.closeButtonTitle}}

2
plugins/chat/assets/javascripts/discourse/components/chat/navbar/full-page-button.gjs
View File

@ -24,7 +24,7 @@ export default class ChatNavbarFullPageButton extends Component {
{{#if this.chatStateManager.isDrawerExpanded}}
<DButton
@icon="discourse-expand"
class="btn-flat no-text c-navbar__full-page-button"
class="btn-transparent no-text c-navbar__full-page-button"
@title="chat.open_full_page"
@action={{this.openInFullPage}}
/>

2
plugins/chat/assets/javascripts/discourse/components/chat/navbar/open-drawer-button.gjs
View File

@ -22,7 +22,7 @@ export default class ChatNavbarOpenDrawerButton extends Component {
<DButton
@icon="discourse-compress"
@title="chat.close_full_page"
class="c-navbar__open-drawer-button btn-flat"
class="c-navbar__open-drawer-button btn-transparent"
@action={{this.openDrawer}}
/>
{{/if}}

2
plugins/chat/assets/javascripts/discourse/components/chat/navbar/thread-settings-button.gjs
View File

@ -30,7 +30,7 @@ export default class ChatNavbarThreadSettingsButton extends Component {
@action={{this.openThreadSettings}}
@icon="cog"
@title="chat.thread.settings"
class="btn-flat c-navbar__thread-settings-button"
class="btn-transparent c-navbar__thread-settings-button"
/>
{{/if}}
</template>

2
plugins/chat/assets/javascripts/discourse/components/chat/navbar/toggle-drawer-button.gjs
View File

@ -19,7 +19,7 @@ export default class ChatNavbarToggleDrawerButton extends Component {
"chat.collapse"
"chat.expand"
}}
class="btn-flat no-text c-navbar__toggle-drawer-button"
class="btn-transparent no-text c-navbar__toggle-drawer-button"
/>
</template>
}

8
plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs
View File

@ -537,7 +537,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
@action={{this.onArchiveChannel}}
@label="chat.channel_settings.archive_channel"
@icon="archive"
class="archive-btn chat-form__btn btn-flat"
class="archive-btn chat-form__btn btn-transparent"
/>
</:action>
</section.row>
@ -550,14 +550,14 @@ export default class ChatRouteChannelInfoSettings extends Component {
@action={{this.onToggleChannelState}}
@label="chat.channel_settings.close_channel"
@icon="lock"
class="close-btn chat-form__btn btn-flat"
class="close-btn chat-form__btn btn-transparent"
/>
{{else}}
<DButton
@action={{this.onToggleChannelState}}
@label="chat.channel_settings.open_channel"
@icon="unlock"
class="open-btn chat-form__btn btn-flat"
class="open-btn chat-form__btn btn-transparent"
/>
{{/if}}
</:action>
@ -569,7 +569,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
@action={{this.onDeleteChannel}}
@label="chat.channel_settings.delete_channel"
@icon="trash-alt"
class="delete-btn chat-form__btn btn-flat"
class="delete-btn chat-form__btn btn-transparent"
/>
</:action>
</section.row>

3
plugins/chat/assets/stylesheets/common/chat-navbar.scss
View File

@ -99,6 +99,9 @@
display: flex;
align-items: center;
height: var(--chat-header-offset);
.d-icon {
color: var(--primary-low-mid);
}
}
.c-navbar__back-button ~ .c-navbar__title {