Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: improve btn-transparent styling (#24666)

This commit is contained in:
Kris 2023-12-01 22:21:22 -05:00 committed by GitHub
parent aba3acf4cc
commit 56795f5c07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 63 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/assets/javascripts/discourse/app/components/admin-post-menu.gjs
View File

@ -54,7 +54,7 @@ export default class AdminPostMenu extends Component {
<DButton
@label="review.moderation_history"
@icon="list"
class="btn btn-transparent moderation-history"
class="btn popup-menu-btn moderation-history"
@href={{this.reviewUrl}}
/>
</li>
@ -70,7 +70,7 @@ export default class AdminPostMenu extends Component {
}}
@icon="shield-alt"
class={{concatClass
"btn btn-transparent toggle-post-type"
"btn popup-menu-btn toggle-post-type"
(if @data.transformedPost.isModeratorAction "btn-success")
}}
@action={{fn this.topicAction "togglePostType"}}
@ -89,7 +89,7 @@ export default class AdminPostMenu extends Component {
}}
title="post.controls.unhide"
class={{concatClass
"btn btn-transparent"
"btn popup-menu-btn"
(if @data.transformedPost.notice "change-notice" "add-notice")
(if @data.transformedPost.notice "btn-success")
}}
@ -103,7 +103,7 @@ export default class AdminPostMenu extends Component {
<DButton
@label="post.controls.unhide"
@icon="far-eye"
class="btn btn-transparent unhide-post"
class="btn popup-menu-btn unhide-post"
@action={{fn this.topicAction "unhidePost"}}
/>
</li>
@ -123,7 +123,7 @@ export default class AdminPostMenu extends Component {
@label="post.controls.change_owner"
@icon="user"
title="post.controls.lock_post_description"
class="btn btn-transparent change-owner"
class="btn popup-menu-btn change-owner"
@action={{fn this.topicAction "changePostOwner"}}
/>
</li>
@ -135,7 +135,7 @@ export default class AdminPostMenu extends Component {
<DButton
@label="post.controls.grant_badge"
@icon="certificate"
class="btn btn-transparent grant-badge"
class="btn popup-menu-btn grant-badge"
@action={{fn this.topicAction "grantBadge"}}
/>
</li>
@ -148,7 +148,7 @@ export default class AdminPostMenu extends Component {
@icon="unlock"
title="post.controls.unlock_post_description"
class={{concatClass
"btn btn-transparent unlock-post"
"btn popup-menu-btn unlock-post"
(if @data.post.locked "btn-success")
}}
@action={{fn this.topicAction "unlockPost"}}
@ -160,7 +160,7 @@ export default class AdminPostMenu extends Component {
@label="post.controls.lock_post"
@icon="lock"
title="post.controls.lock_post_description"
class="btn btn-transparent lock-post"
class="btn popup-menu-btn lock-post"
@action={{fn this.topicAction "lockPost"}}
/>
</li>
@ -172,7 +172,7 @@ export default class AdminPostMenu extends Component {
<DButton
@label="post.controls.permanently_delete"
@icon="trash-alt"
class="btn btn-transparent permanently-delete"
class="btn popup-menu-btn permanently-delete"
@action={{fn this.topicAction "permanentlyDeletePost"}}
/>
</li>
@ -185,7 +185,7 @@ export default class AdminPostMenu extends Component {
@label="post.controls.unwiki"
@icon="far-edit"
class={{concatClass
"btn btn-transparent wiki wikied"
"btn popup-menu-btn wiki wikied"
(if @data.transformedPost.wiki "btn-success")
}}
@action={{fn this.topicAction "toggleWiki"}}
@ -196,7 +196,7 @@ export default class AdminPostMenu extends Component {
<DButton
@label="post.controls.wiki"
@icon="far-edit"
class="btn btn-transparent wiki"
class="btn popup-menu-btn wiki"
@action={{fn this.topicAction "toggleWiki"}}
/>
</li>
@ -208,7 +208,7 @@ export default class AdminPostMenu extends Component {
<DButton
@label="post.controls.publish_page"
@icon="file"
class="btn btn-transparent publish-page"
class="btn popup-menu-btn publish-page"
@action={{fn this.topicAction "showPagePublish"}}
/>
</li>
@ -219,7 +219,7 @@ export default class AdminPostMenu extends Component {
<DButton
@label="post.controls.rebake"
@icon="sync-alt"
class="btn btn-transparent rebuild-html"
class="btn popup-menu-btn rebuild-html"
@action={{fn this.topicAction "rebakePost"}}
/>
</li>
@ -231,7 +231,7 @@ export default class AdminPostMenu extends Component {
@label={{button.label}}
@translatedLabel={{button.translatedLabel}}
@icon={{button.icon}}
class={{concatClass "btn btn-transparent" button.className}}
class={{concatClass "btn popup-menu-btn" button.className}}
@action={{fn this.extraAction button}}
/>
</li>

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

@ -3,7 +3,7 @@
<div id="banner" class={{this.overlay}}>
<div class="floated-buttons">
{{#if this.currentUser.staff}}
<a href={{this.banner.url}} class="btn btn-flat edit-banner">
<a href={{this.banner.url}} class="btn btn-transparent edit-banner">
{{d-icon "pencil-alt"}}
{{#unless this.site.mobileView}}
{{html-safe (i18n "banner.edit")}}
@ -15,7 +15,7 @@
@icon="times"
@action={{this.dismiss}}
@title="banner.close"
class="btn-flat close"
class="btn-transparent close"
/>
</div>
<div id="banner-content">

1
app/assets/javascripts/float-kit/addon/components/d-float-body.gjs
View File

@ -55,6 +55,7 @@ export default class DFloatBody extends Component {
@mainClass
(if this.options.animated "-animated")
(if @instance.expanded "-expanded")
this.options.extraClassName
}}
data-identifier={{this.options.identifier}}
data-content

1
app/assets/javascripts/float-kit/addon/lib/constants.js
View File

@ -61,6 +61,7 @@ export const MENU = {
fallbackPlacements: FLOAT_UI_PLACEMENTS,
autoUpdate: true,
trapTab: true,
extraClassName: "popup-menu",
},
portalOutletId: "d-menu-portal-outlet",
};

4
app/assets/stylesheets/common/base/popup-menu.scss
View File

@ -23,13 +23,15 @@
text-align: left;
background: none;
width: 100%;
padding: 0.75em;
padding: 0.5em;
border-radius: 0;
margin: 0;
.d-icon {
color: var(--primary-medium);
align-self: flex-start;
margin-right: 0.75em;
margin-top: 0.1em; // vertical alignment
}
&:focus,

2
app/assets/stylesheets/common/base/topic-admin-menu.scss
View File

@ -32,7 +32,7 @@
.d-icon {
font-size: var(--font-down-1);
margin-top: 2px; // vertical alignment
margin-right: 1rem;
margin-right: 0.75em;
}
}

1
app/assets/stylesheets/common/components/admin-post-menu.scss
View File

@ -11,6 +11,7 @@
li {
margin-bottom: 2px;
border: none;
&:last-child {
margin-bottom: 0;

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

@ -397,57 +397,55 @@
}
}
.btn-transparent {
background: none;
border: 0;
color: var(--primary);
&.btn-primary,
&.btn-primary:focus,
&.btn-primary:hover {
.d-icon {
color: var(--tertiary) !important;
}
@mixin btn-colors($btn-color) {
color: var(--#{$btn-color});
.d-icon {
color: currentColor;
}
&.btn-danger,
&.btn-danger:focus,
&.btn-danger:hover {
.d-icon {
color: var(--danger) !important;
}
&:focus,
&:focus-visible {
color: var(--#{$btn-color}-hover);
}
&.btn-success,
&.btn-success:focus,
&.btn-success:hover {
.d-icon {
color: var(--success) !important;
}
}
.discourse-no-touch & {
&:hover {
color: var(--primary);
background: var(--d-hover);
color: var(--#{$btn-color}-hover);
}
}
}
.btn-transparent {
&,
&.btn-default {
background: transparent !important;
border: 0;
color: var(--primary);
.d-icon {
color: var(--primary-high);
}
&:focus,
&:focus-visible {
color: var(--tertiary-hover);
.d-icon {
color: var(--primary);
color: currentColor;
}
}
.discourse-no-touch & {
&:hover {
color: var(--tertiary-hover);
.d-icon {
color: currentColor;
}
}
}
}
&:focus {
color: var(--primary);
background: var(--d-hover);
.d-icon {
color: var(--primary);
}
&.btn-primary {
@include btn-colors("tertiary");
}
&:focus-visible {
color: var(--primary);
background: var(--d-hover);
.d-icon {
color: var(--primary);
}
&.btn-danger {
@include btn-colors("danger");
}
&.btn-success {
@include btn-colors("success");
}
}