diff --git a/app/assets/javascripts/discourse/app/components/sidebar/anonymous/tags-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/anonymous/tags-section.hbs index 8308209e7f0..b8b339f7e2a 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/anonymous/tags-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/anonymous/tags-section.hbs @@ -8,6 +8,8 @@ @route={{sectionLink.route}} @content={{sectionLink.text}} @currentWhen={{sectionLink.currentWhen}} + @prefixType={{sectionLink.prefixType}} + @prefixValue={{sectionLink.prefixValue}} @models={{sectionLink.models}} > {{/each}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/common/all-categories-section-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/common/all-categories-section-link.hbs index dcefd158145..9eb404a3e4d 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/common/all-categories-section-link.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/common/all-categories-section-link.hbs @@ -2,4 +2,6 @@ @linkName="all-categories" @content={{i18n "sidebar.all_categories"}} @route="discovery.categories" + @prefixType="icon" + @prefixValue="list" /> diff --git a/app/assets/javascripts/discourse/app/components/sidebar/common/all-tags-section-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/common/all-tags-section-link.hbs index e209482cc74..ae342f9d508 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/common/all-tags-section-link.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/common/all-tags-section-link.hbs @@ -2,4 +2,6 @@ @linkName="all-tags" @content={{i18n "sidebar.all_tags"}} @route="tags" + @prefixType="icon" + @prefixValue="list" /> diff --git a/app/assets/javascripts/discourse/app/components/sidebar/common/community-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/common/community-section.hbs index bba033a255d..b7b54e31734 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/common/community-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/common/community-section.hbs @@ -22,7 +22,9 @@ @currentWhen={{sectionLink.currentWhen}} @badgeText={{sectionLink.badgeText}} @model={{sectionLink.model}} - @models={{sectionLink.models}} /> + @models={{sectionLink.models}} + @prefixType={{sectionLink.prefixType}} + @prefixValue={{sectionLink.prefixValue}} /> {{/each}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs index b12a03c0270..5262f58f6f7 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs @@ -3,7 +3,7 @@
- +
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/more-section-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/more-section-link.hbs index 2958b613652..321beab314c 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/more-section-link.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/more-section-link.hbs @@ -8,4 +8,6 @@ @currentWhen={{@sectionLink.currentWhen}} @badgeText={{@sectionLink.badgeText}} @model={{@sectionLink.model}} - @models={{@sectionLink.models}} /> + @models={{@sectionLink.models}} + @prefixType={{@sectionLink.prefixType}} + @prefixValue={{@sectionLink.prefixValue}} /> diff --git a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs index 432b7701ee5..154f08b9063 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs @@ -4,6 +4,10 @@
+ + {{d-icon "ellipsis-v"}} + + {{i18n "sidebar.more"}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs new file mode 100644 index 00000000000..0e4d9600d35 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs @@ -0,0 +1,21 @@ +{{#if @prefixValue}} + + {{#if (eq @prefixType "image")}} + + {{/if}} + + {{#if (eq @prefixType "text")}} + + {{@prefixValue}} + + {{/if}} + + {{#if (eq @prefixType "icon")}} + {{d-icon @prefixValue class="prefix-icon"}} + {{/if}} + + {{#if @prefixBadge}} + {{d-icon @prefixBadge class="prefix-badge"}} + {{/if}} + +{{/if}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.js b/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.js new file mode 100644 index 00000000000..742bb3c18ef --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.js @@ -0,0 +1,3 @@ +import templateOnly from "@ember/component/template-only"; + +export default templateOnly(); diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs index d1978f91641..570e57590fe 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs @@ -1,6 +1,14 @@
{{#if @href}} + + {{@content}} @@ -14,25 +22,14 @@ @current-when={{@currentWhen}} @title={{@title}} > - {{#if @prefixValue}} - - {{#if (eq @prefixType "image")}} - - {{/if}} - {{#if (eq @prefixType "text")}} - {{@prefixValue}} - {{/if}} - - {{#if (eq @prefixType "icon")}} - {{d-icon @prefixValue class="prefix-icon"}} - {{/if}} - - {{#if @prefixBadge}} - {{d-icon @prefixBadge class="prefix-badge"}} - {{/if}} - - {{/if}} + {{@content}} @@ -45,7 +42,7 @@ {{/if}} {{#if @suffixValue}} - + {{#if (eq @suffixType "icon")}} {{d-icon @suffixValue}} {{/if}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs index 619d9e13d0a..1a2381edb83 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs @@ -1,11 +1,12 @@
- - {{#if @collapsable}} + {{#if @collapsable}} + {{d-icon this.headerCaretIcon}} - {{/if}} - + + {{/if}} + {{@headerLinkText}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/messages-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/messages-section.hbs index 35d77d15f93..bb3d2e86447 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/messages-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/messages-section.hbs @@ -13,6 +13,8 @@ @class={{personalMessageSectionLink.class}} @route={{personalMessageSectionLink.route}} @model={{personalMessageSectionLink.model}} + @prefixType={{personalMessageSectionLink.prefixType}} + @prefixValue={{personalMessageSectionLink.prefixValue}} @currentWhen={{personalMessageSectionLink.currentWhen}} @content={{personalMessageSectionLink.text}} /> {{/if}} @@ -25,6 +27,8 @@ @linkName={{groupMessageSectionLink.name}} @class={{groupMessageSectionLink.class}} @route={{groupMessageSectionLink.route}} + @prefixType={{groupMessageSectionLink.prefixType}} + @prefixValue={{groupMessageSectionLink.prefixValue}} @models={{groupMessageSectionLink.models}} @currentWhen={{groupMessageSectionLink.currentWhen}} @content={{groupMessageSectionLink.text}} /> diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs index 9ecdf84345d..3edfa60b727 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs @@ -13,6 +13,8 @@ @title={{sectionLink.title}} @content={{sectionLink.text}} @currentWhen={{sectionLink.currentWhen}} + @prefixType={{sectionLink.prefixType}} + @prefixValue={{sectionLink.prefixValue}} @badgeText={{sectionLink.badgeText}} @models={{sectionLink.models}} > diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/base-community-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/base-community-section-link.js index f3f5b2d891f..0ed22c73902 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/base-community-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/base-community-section-link.js @@ -93,6 +93,20 @@ export default class BaseCommunitySectionLink { */ get badgeText() {} + /** + * @private + */ + get prefixType() { + return "icon"; + } + + /** + * @returns {string} The name of the fontawesome icon to be displayed before the link. Defaults to "link". + */ + get prefixValue() { + return "link"; + } + _notImplemented() { throw "not implemented"; } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/about-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/about-section-link.js index 3dc533ed5fa..0369e8356bf 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/about-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/about-section-link.js @@ -18,4 +18,7 @@ export default class AboutSectionLink extends BaseSectionLink { get text() { return I18n.t("sidebar.sections.community.links.about.content"); } + get prefixValue() { + return "info-circle"; + } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/badges-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/badges-section-link.js index 8c6f19f5d05..82956977da1 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/badges-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/badges-section-link.js @@ -22,4 +22,8 @@ export default class BadgesSectionLink extends BaseSectionLink { get shouldDisplay() { return this.siteSettings.enable_badges; } + + get prefixValue() { + return "certificate"; + } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/everything-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/everything-section-link.js index 8cba16fe4f0..ac440559e53 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/everything-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/everything-section-link.js @@ -71,4 +71,8 @@ export default class EverythingSectionLink extends BaseSectionLink { return "discovery.latest"; } } + + get prefixValue() { + return "layer-group"; + } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/faq-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/faq-section-link.js index 05a20130666..d682250e612 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/faq-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/faq-section-link.js @@ -22,4 +22,8 @@ export default class FAQSectionLink extends BaseSectionLink { get text() { return I18n.t("sidebar.sections.community.links.faq.content"); } + + get prefixValue() { + return "question-circle"; + } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/groups-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/groups-section-link.js index 6305865ea83..f2d6fe78e8f 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/groups-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/groups-section-link.js @@ -22,4 +22,8 @@ export default class GroupsSectionLink extends BaseSectionLink { get shouldDisplay() { return this.siteSettings.enable_group_directory; } + + get prefixValue() { + return "user-friends"; + } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/users-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/users-section-link.js index 8b6015f69f5..fafbf071245 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/users-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/users-section-link.js @@ -25,4 +25,8 @@ export default class UsersSectionLink extends BaseSectionLink { (this.currentUser || !this.siteSettings.hide_user_profiles_from_public) ); } + + get prefixValue() { + return "users"; + } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/admin-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/admin-section-link.js index addbdd862d2..850a7c48d6b 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/admin-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/admin-section-link.js @@ -22,4 +22,8 @@ export default class AdminSectionLink extends BaseSectionLink { get shouldDisplay() { return this.currentUser?.staff; } + + get prefixValue() { + return "wrench"; + } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/my-posts-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/my-posts-section-link.js index 3f59055c405..9c11a9722b3 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/my-posts-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/my-posts-section-link.js @@ -62,4 +62,8 @@ export default class MyPostsSectionLink extends BaseSectionLink { get _hasDraft() { return this.draftCount > 0; } + + get prefixValue() { + return "user"; + } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/tracked-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/tracked-section-link.js index 1898b6f6802..110f4265252 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/tracked-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/tracked-section-link.js @@ -72,4 +72,8 @@ export default class TrackedSectionLink extends BaseSectionLink { return "discovery.latest"; } } + + get prefixValue() { + return "bell"; + } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/user/messages-section/message-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/user/messages-section/message-section-link.js index 41f70271369..a28cebdeb7b 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/user/messages-section/message-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/user/messages-section/message-section-link.js @@ -71,4 +71,16 @@ export default class MessageSectionLink { get _shouldTrack() { return this.type === NEW || this.type === UNREAD; } + + get prefixType() { + if (this._isInbox) { + return "icon"; + } + } + + get prefixValue() { + if (this._isInbox) { + return "inbox"; + } + } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/user/tags-section/tag-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/user/tags-section/tag-section-link.js index 48f55a317ec..85ee3ae9567 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/user/tags-section/tag-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/user/tags-section/tag-section-link.js @@ -64,4 +64,12 @@ export default class TagSectionLink { }); } } + + get prefixType() { + return "icon"; + } + + get prefixValue() { + return "tag"; + } } diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index 40a63f4c279..fe536833e50 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/app/assets/stylesheets/common/base/discourse.scss @@ -683,7 +683,7 @@ table { } #main-outlet { - padding-top: 2.5em; + padding-top: 1.5em; } #main { diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss index 2415121fda1..41b698786d0 100644 --- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss +++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss @@ -12,9 +12,18 @@ list-style: none; box-sizing: border-box; - .d-icon { - margin-left: auto; - color: var(--primary-medium); + .sidebar-more-section-links-icon-wrapper { + display: flex; + align-items: center; + justify-content: center; + width: var(--d-sidebar-section-link-prefix-width); + height: var(--d-sidebar-section-link-prefix-width); + margin-right: var(--d-sidebar-section-link-prefix-margin-right); + + .d-icon { + color: var(--primary-medium); + font-size: var(--font-down-1); + } } &::before { @@ -35,7 +44,7 @@ margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3); .sidebar-row { - padding: calc(var(--d-sidebar-row-horizontal-padding) / 3); + padding: 0.33rem calc(var(--d-sidebar-row-horizontal-padding) / 3); } } diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index 0dc58c56c8f..0b27b80828e 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -1,10 +1,14 @@ +:root { + --d-sidebar-section-link-prefix-margin-right: 0.4rem; + --d-sidebar-section-link-prefix-width: 20px; +} + .sidebar-section-link-wrapper { display: flex; align-items: center; position: relative; .sidebar-section-link { - box-sizing: border-box; display: inline-flex; width: 100%; align-items: center; @@ -19,8 +23,13 @@ &.active { color: var(--primary); - font-weight: bold; background: var(--d-sidebar-highlight-color); + + .sidebar-section-link-prefix { + &.icon { + color: var(--primary-high); + } + } } .sidebar-section-link-content-badge { @@ -67,7 +76,10 @@ .sidebar-section-link-group-messages-unread, .sidebar-section-link-group-messages-archive { .sidebar-section-link-content-text { - margin-left: 0.5em; + margin-left: calc( + var(--d-sidebar-section-link-prefix-margin-right) + + var(--d-sidebar-section-link-prefix-width) + ); } } @@ -78,45 +90,46 @@ } .sidebar-section-link-prefix { + display: flex; + align-items: center; + justify-content: center; flex-shrink: 0; + width: var(--d-sidebar-section-link-prefix-width); + height: var(--d-sidebar-section-link-prefix-width); + margin-right: var(--d-sidebar-section-link-prefix-margin-right); &.image { - position: absolute; img { - border-radius: 50%; - width: 20px; + border-radius: 100%; aspect-ratio: auto 20 / 20; - height: 20px; - margin-right: 0.5em; - } - - + .sidebar-section-link-content-text { - margin-left: calc(20px + 0.5em); + width: calc(var(--d-sidebar-section-link-prefix-width) - 2px); + height: calc(var(--d-sidebar-section-link-prefix-width) - 2px); } } &.text { - border-radius: 100%; - background: rgba(var(--primary-rgb), 0.1); text-align: center; - font-size: var(--font-down-1); - padding: 0.27em 0.47em; - margin-right: 0.25em; - position: absolute; - + .sidebar-section-link-content-text { - margin-left: calc(20px + 0.5em); + + .prefix-text { + display: flex; + align-items: center; + justify-content: center; + border-radius: 100%; + background: rgba(var(--primary-rgb), 0.1); + width: calc(var(--d-sidebar-section-link-prefix-width) - 2px); + height: calc(var(--d-sidebar-section-link-prefix-width) - 2px); } } &.icon { position: relative; - margin-right: 0.5em; + color: var(--primary-medium); svg { font-size: var(--font-down-1); } - svg.prefix-badge { + .prefix-badge { position: absolute; background-color: transparent; border-radius: 50%; @@ -126,7 +139,7 @@ width: 0.5rem; top: -0.2em; right: 0; - margin-right: -0.6em; + margin-right: -0.2em; } } } diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss index 48b75f39bd1..2bc64090299 100644 --- a/app/assets/stylesheets/common/base/sidebar-section.scss +++ b/app/assets/stylesheets/common/base/sidebar-section.scss @@ -1,29 +1,51 @@ +:root { + --d-sidebar-section-header-text-font-size: var(--font-up-1); +} + .sidebar-section-wrapper { + .discourse-no-touch & { + &:hover { + .sidebar-section-header-wrapper { + .btn.dropdown-select-box-header, + .sidebar-section-header-button { + opacity: 1; + } + } + } + } + .sidebar-section-header-wrapper { display: flex; - box-sizing: border-box; - padding: 0; + .discourse-no-touch & { &:hover { background: var(--d-sidebar-highlight-color); } } + &:focus-within { background: var(--d-sidebar-highlight-color); } .btn.dropdown-select-box-header, .sidebar-section-header-button { + .discourse-no-touch & { + transition: all 0.25s; + opacity: 0; + } + background: transparent; border: none; + margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 3 * -1); padding: calc(var(--d-sidebar-row-horizontal-padding) / 5) calc(var(--d-sidebar-row-horizontal-padding) / 3); - margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 1.5); + .d-icon { font-size: var(--font-down-1); color: var(--primary-medium); margin: 0; } + &:focus { outline: none; background: var(--primary-medium); @@ -31,6 +53,7 @@ color: var(--primary-very-low); } } + .discourse-no-touch & { &:hover { background: var(--primary-medium); @@ -44,16 +67,10 @@ .sidebar-section-header { flex: 1 1 auto; - text-transform: uppercase; - font-weight: bold; - font-size: var(--font-1); color: var(--primary); align-items: center; - padding: calc(var(--d-sidebar-row-horizontal-padding) / 2) - calc(var(--d-sidebar-row-horizontal-padding) / 2) - calc(var(--d-sidebar-row-horizontal-padding) / 2) - var(--d-sidebar-row-horizontal-padding); min-width: 0; + padding: 0; &.sidebar-section-header-collapsable { justify-content: flex-start; @@ -61,18 +78,25 @@ } .sidebar-section-header-text { - font-weight: bold; line-height: normal; margin-right: 0.25em; + font-size: var(--d-sidebar-section-header-text-font-size); @include ellipsis; } .sidebar-section-header-caret { - display: block; - width: 1.5em; - margin-left: -1.5em; - font-size: var(--font-down-2); + display: flex; flex: 0 0 auto; + width: var(--d-sidebar-section-link-prefix-width); + height: var(--d-sidebar-section-link-prefix-width); + margin-right: var(--d-sidebar-section-link-prefix-margin-right); + align-items: center; + justify-content: center; + + svg { + font-size: var(--font-down-1); + color: var(--primary-medium); + } } .select-kit-collection { @@ -93,9 +117,12 @@ .sidebar-section-message { color: var(--primary); + padding-left: 1.4em; } .sidebar-section-content { + padding-bottom: 1em; + hr { margin: 0em 1.5em; } diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index d3c9c2cae1e..cc2d5906f28 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -2,14 +2,26 @@ --d-sidebar-width: #{$d-sidebar-width}; --d-sidebar-animation-time: 0.25s; --d-sidebar-animation-ease: ease-in-out; + --d-sidebar-row-height: 30px; + // 1.25rem gets text left-aligned with the hamburger icon + --d-sidebar-row-horizontal-padding: 1.25rem; + --d-sidebar-row-vertical-padding: 0.33rem; + --d-sidebar-row-font-size: var(--font-down-1); +} + +.sidebar-row { + box-sizing: border-box; + height: var(--d-sidebar-row-height); + padding: var(--d-sidebar-row-vertical-padding) + var(--d-sidebar-row-horizontal-padding); + align-items: center; + font-size: var(--d-sidebar-row-font-size); } .sidebar-wrapper { display: flex; --d-sidebar-highlight-color: var(--primary-low); - // 1.25rem gets text left-aligned with the hamburger icon - --d-sidebar-row-horizontal-padding: 1.25rem; - background-color: var(--primary-very-low); + background-color: var(--primary-50); grid-area: sidebar; position: sticky; top: var(--header-offset); @@ -21,12 +33,6 @@ align-self: start; overflow-y: auto; - .sidebar-row { - padding: 0.33rem var(--d-sidebar-row-horizontal-padding); - align-items: center; - font-size: var(--font-down-1); - } - .sidebar-container { display: flex; flex-direction: column; @@ -44,7 +50,7 @@ flex-direction: column; box-sizing: border-box; flex: 1; - padding: 1em 0; + padding: 1.5em 0 1em; overflow-x: hidden; overflow-y: overlay; @@ -83,17 +89,6 @@ } .sidebar-hamburger-dropdown { - // note that these apply to mobile and desktop dropdowns - .sidebar-section-wrapper { - .sidebar-section-header-wrapper.sidebar-row { - padding-right: 0; - } - - .sidebar-section-header { - padding: 0; - } - } - .discourse-no-touch & { .sidebar-section-wrapper .sidebar-section-header-wrapper:hover, .sidebar-section-wrapper .sidebar-section-header-wrapper:focus-within { diff --git a/app/assets/stylesheets/desktop/_index.scss b/app/assets/stylesheets/desktop/_index.scss index 87b39b9893d..5dbba18c245 100644 --- a/app/assets/stylesheets/desktop/_index.scss +++ b/app/assets/stylesheets/desktop/_index.scss @@ -12,7 +12,6 @@ @import "menu-panel"; @import "modal"; @import "new-user"; -@import "sidebar-section"; @import "topic-list"; @import "topic-post"; @import "topic"; diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss index 780aa903ef5..40d0ead26f4 100644 --- a/app/assets/stylesheets/desktop/discourse.scss +++ b/app/assets/stylesheets/desktop/discourse.scss @@ -195,7 +195,7 @@ body.has-sidebar-page { #main-outlet-wrapper { grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr); - gap: 0 1em; + gap: 0 2em; padding-left: 0; } } diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss index 31ffa095ab3..7e1e4d245a1 100644 --- a/app/assets/stylesheets/desktop/menu-panel.scss +++ b/app/assets/stylesheets/desktop/menu-panel.scss @@ -13,14 +13,10 @@ .hamburger-panel .revamped { --d-sidebar-highlight-color: var(--highlight-medium); --d-sidebar-row-horizontal-padding: 0.5rem; - width: var(--d-sidebar-width); - - .sidebar-row { - padding: 0.25rem var(--d-sidebar-row-horizontal-padding); - height: 27px; - align-items: center; - font-size: var(--font-down-1); - } + --d-sidebar-row-height: 30px; + // 1.25rem gets text left-aligned with the hamburger icon + --d-sidebar-row-horizontal-padding: 0.66rem; + --d-sidebar-row-vertical-padding: 0.33rem; .panel-body-content { width: 100%; diff --git a/app/assets/stylesheets/desktop/sidebar-section.scss b/app/assets/stylesheets/desktop/sidebar-section.scss deleted file mode 100644 index 77891afe882..00000000000 --- a/app/assets/stylesheets/desktop/sidebar-section.scss +++ /dev/null @@ -1,25 +0,0 @@ -#main-outlet-wrapper { - .sidebar-section-wrapper { - .sidebar-section-header-button, - .sidebar-section-header-caret, - .sidebar-section-header-dropdown { - .discourse-no-touch & { - opacity: 0; - transition: opacity 0.25s; - transition-delay: 0.25s; - } - } - - .discourse-no-touch & { - &:focus-within, - &:hover { - .sidebar-section-header-button, - .sidebar-section-header-caret, - .sidebar-section-header-dropdown { - opacity: 1; - transition-delay: 0s; - } - } - } - } -} diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss index 7d836bd4c05..1a5f9aeefba 100644 --- a/app/assets/stylesheets/mobile/menu-panel.scss +++ b/app/assets/stylesheets/mobile/menu-panel.scss @@ -72,6 +72,9 @@ .hamburger-panel .revamped { --d-sidebar-row-horizontal-padding: 1rem; --d-sidebar-highlight-color: var(--primary-low); + --d-sidebar-row-font-size: var(--font-0); + --d-sidebar-row-height: 32px; + --d-sidebar-section-header-text-font-size: var(--font-0); box-sizing: border-box; padding: 0; @@ -79,18 +82,23 @@ .sidebar-hamburger-dropdown { display: flex; flex-direction: column; + padding-top: 0.5em; } } .sidebar-row { - padding: 1.2rem var(--d-sidebar-row-horizontal-padding); - height: 27px; - align-items: center; - font-size: var(--font-0); + &.sidebar-section-message-wrapper { + padding-top: 0; + padding-bottom: 0.25em; + } + + .sidebar-section-message { + padding: 0; + } } .sidebar-section-wrapper { - margin-bottom: 0.5em; + margin-bottom: 1.2em; } .sidebar-footer-wrapper { @@ -112,4 +120,8 @@ flex-direction: column; box-sizing: border-box; } + + .sidebar-section-content { + padding-bottom: 0; + } } diff --git a/lib/svg_sprite.rb b/lib/svg_sprite.rb index 84ad20aca4b..3fd725dc747 100644 --- a/lib/svg_sprite.rb +++ b/lib/svg_sprite.rb @@ -139,6 +139,7 @@ module SvgSprite "hourglass-start", "id-card", "image", + "inbox", "info-circle", "italic", "key",