Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 awesomerobot
|
b292befd1d | ||
|
awesomerobot
|
f0834f197c |
+42
-58
@@ -1,9 +1,8 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (8.0.2)
|
||||
activesupport (7.2.1.1)
|
||||
base64
|
||||
benchmark (>= 0.3)
|
||||
bigdecimal
|
||||
concurrent-ruby (~> 1.0, >= 1.3.1)
|
||||
connection_pool (>= 2.2.5)
|
||||
@@ -13,83 +12,68 @@ GEM
|
||||
minitest (>= 5.1)
|
||||
securerandom (>= 0.3)
|
||||
tzinfo (~> 2.0, >= 2.0.5)
|
||||
uri (>= 0.13.1)
|
||||
ast (2.4.3)
|
||||
ast (2.4.2)
|
||||
base64 (0.2.0)
|
||||
benchmark (0.4.0)
|
||||
bigdecimal (3.1.9)
|
||||
concurrent-ruby (1.3.5)
|
||||
connection_pool (2.5.3)
|
||||
bigdecimal (3.1.8)
|
||||
concurrent-ruby (1.3.4)
|
||||
connection_pool (2.4.1)
|
||||
drb (2.2.1)
|
||||
i18n (1.14.7)
|
||||
i18n (1.14.6)
|
||||
concurrent-ruby (~> 1.0)
|
||||
json (2.11.3)
|
||||
language_server-protocol (3.17.0.4)
|
||||
lint_roller (1.1.0)
|
||||
logger (1.7.0)
|
||||
minitest (5.25.5)
|
||||
parallel (1.27.0)
|
||||
parser (3.3.8.0)
|
||||
json (2.7.2)
|
||||
language_server-protocol (3.17.0.3)
|
||||
logger (1.6.1)
|
||||
minitest (5.25.1)
|
||||
parallel (1.26.3)
|
||||
parser (3.3.5.0)
|
||||
ast (~> 2.4.1)
|
||||
racc
|
||||
prettier_print (1.2.1)
|
||||
prism (1.4.0)
|
||||
racc (1.8.1)
|
||||
rack (3.1.13)
|
||||
rack (3.1.10)
|
||||
rainbow (3.1.1)
|
||||
regexp_parser (2.10.0)
|
||||
rubocop (1.75.4)
|
||||
regexp_parser (2.9.2)
|
||||
rubocop (1.67.0)
|
||||
json (~> 2.3)
|
||||
language_server-protocol (~> 3.17.0.2)
|
||||
lint_roller (~> 1.1.0)
|
||||
language_server-protocol (>= 3.17.0)
|
||||
parallel (~> 1.10)
|
||||
parser (>= 3.3.0.2)
|
||||
rainbow (>= 2.2.2, < 4.0)
|
||||
regexp_parser (>= 2.9.3, < 3.0)
|
||||
rubocop-ast (>= 1.44.0, < 2.0)
|
||||
regexp_parser (>= 2.4, < 3.0)
|
||||
rubocop-ast (>= 1.32.2, < 2.0)
|
||||
ruby-progressbar (~> 1.7)
|
||||
unicode-display_width (>= 2.4.0, < 4.0)
|
||||
rubocop-ast (1.44.1)
|
||||
parser (>= 3.3.7.2)
|
||||
prism (~> 1.4)
|
||||
rubocop-capybara (2.22.1)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-discourse (3.12.1)
|
||||
unicode-display_width (>= 2.4.0, < 3.0)
|
||||
rubocop-ast (1.32.3)
|
||||
parser (>= 3.3.1.0)
|
||||
rubocop-capybara (2.21.0)
|
||||
rubocop (~> 1.41)
|
||||
rubocop-discourse (3.8.2)
|
||||
activesupport (>= 6.1)
|
||||
lint_roller (>= 1.1.0)
|
||||
rubocop (>= 1.73.2)
|
||||
rubocop-capybara (>= 2.22.0)
|
||||
rubocop-factory_bot (>= 2.27.0)
|
||||
rubocop-rails (>= 2.30.3)
|
||||
rubocop (>= 1.59.0)
|
||||
rubocop-capybara (>= 2.0.0)
|
||||
rubocop-factory_bot (>= 2.0.0)
|
||||
rubocop-rails (>= 2.25.0)
|
||||
rubocop-rspec (>= 3.0.1)
|
||||
rubocop-rspec_rails (>= 2.31.0)
|
||||
rubocop-factory_bot (2.27.1)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-rails (2.31.0)
|
||||
rubocop-rspec_rails (>= 2.30.0)
|
||||
rubocop-factory_bot (2.26.1)
|
||||
rubocop (~> 1.61)
|
||||
rubocop-rails (2.26.2)
|
||||
activesupport (>= 4.2.0)
|
||||
lint_roller (~> 1.1)
|
||||
rack (>= 1.1)
|
||||
rubocop (>= 1.75.0, < 2.0)
|
||||
rubocop-ast (>= 1.38.0, < 2.0)
|
||||
rubocop-rspec (3.6.0)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-rspec_rails (2.31.0)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-rspec (~> 3.5)
|
||||
rubocop (>= 1.52.0, < 2.0)
|
||||
rubocop-ast (>= 1.31.1, < 2.0)
|
||||
rubocop-rspec (3.1.0)
|
||||
rubocop (~> 1.61)
|
||||
rubocop-rspec_rails (2.30.0)
|
||||
rubocop (~> 1.61)
|
||||
rubocop-rspec (~> 3, >= 3.0.1)
|
||||
ruby-progressbar (1.13.0)
|
||||
securerandom (0.4.1)
|
||||
securerandom (0.3.1)
|
||||
syntax_tree (6.2.0)
|
||||
prettier_print (>= 1.2.0)
|
||||
tzinfo (2.0.6)
|
||||
concurrent-ruby (~> 1.0)
|
||||
unicode-display_width (3.1.4)
|
||||
unicode-emoji (~> 4.0, >= 4.0.4)
|
||||
unicode-emoji (4.0.4)
|
||||
uri (1.0.3)
|
||||
unicode-display_width (2.6.0)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
@@ -99,4 +83,4 @@ DEPENDENCIES
|
||||
syntax_tree
|
||||
|
||||
BUNDLED WITH
|
||||
2.6.8
|
||||
2.5.21
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
Horizon is a simple, beautiful theme that improves the out-of-the-box experience for Discourse sites.
|
||||
# next-gen
|
||||
|
||||
https://meta.discourse.org/t/horizon-theme/360486
|
||||
**Theme Summary**
|
||||
|
||||
For more information, please see: **url to meta topic**
|
||||
|
||||
+25
-121
@@ -1,136 +1,40 @@
|
||||
{
|
||||
"name": "Horizon",
|
||||
"name": "Horizon Theme",
|
||||
"authors": "Design Team",
|
||||
"about_url": "https://meta.discourse.org/t/horizon-theme/360486",
|
||||
"license_url": "https://github.com/discourse/horizon/blob/main/LICENSE",
|
||||
"learn_more": "https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682",
|
||||
"about_url": "TODO: Put your theme's public repo or Meta topic URL here",
|
||||
"license_url": "TODO: Put your theme's LICENSE URL here",
|
||||
"learn_more": "TODO",
|
||||
"theme_version": "0.0.1",
|
||||
"minimum_discourse_version": null,
|
||||
"maximum_discourse_version": null,
|
||||
"assets": {},
|
||||
"modifiers": {
|
||||
"svg_icons": [
|
||||
"fire"
|
||||
],
|
||||
"serialize_topic_is_hot": true
|
||||
"svg_icons": ["fire"]
|
||||
},
|
||||
"components": [
|
||||
"https://github.com/discourse/discourse-sidebar-new-topic-button.git",
|
||||
"https://github.com/discourse/discourse-full-width-component.git"
|
||||
],
|
||||
"color_schemes": {
|
||||
"Horizon": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"header_background": "f5f8ff",
|
||||
"tertiary": "595bca",
|
||||
"tertiary-med-or-tertiary": "595bca",
|
||||
"selected": "d7dfff",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "E1E8FF"
|
||||
"tertiary-low": "d8d9f3",
|
||||
"tertiary-50": "f5f8ff",
|
||||
"selected": "d8d9f3",
|
||||
"hover": "ebebf9"
|
||||
},
|
||||
"Horizon Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "595bca",
|
||||
"tertiary-med-or-tertiary": "595bca",
|
||||
"selected": "3b3e56",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "333548"
|
||||
},
|
||||
"Royal": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "1F7BC1",
|
||||
"tertiary-med-or-tertiary": "1F7BC1",
|
||||
"selected": "c7e3ff",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "D6EBFF"
|
||||
},
|
||||
"Royal Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "1F7BC1",
|
||||
"tertiary-med-or-tertiary": "1F7BC1",
|
||||
"selected": "3a455f",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "323B4E"
|
||||
},
|
||||
"Clover": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "39845B",
|
||||
"tertiary-med-or-tertiary": "39845B",
|
||||
"selected": "c6f1d5",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "D5F5E0"
|
||||
},
|
||||
"Clover Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "39845B",
|
||||
"tertiary-med-or-tertiary": "39845B",
|
||||
"selected": "47594e",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "3C4A40"
|
||||
},
|
||||
"Lily": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "cc338c",
|
||||
"tertiary-med-or-tertiary": "cc338c",
|
||||
"selected": "ffc8ee",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "FFD7F3"
|
||||
},
|
||||
"Lily Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "cc338c",
|
||||
"tertiary-med-or-tertiary": "cc338c",
|
||||
"selected": "5f3e4e",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "4E3640"
|
||||
},
|
||||
"Violet": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "9b15de",
|
||||
"tertiary-med-or-tertiary": "9b15de",
|
||||
"selected": "feccff",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "FFD9FF"
|
||||
},
|
||||
"Violet Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "9b15de",
|
||||
"tertiary-med-or-tertiary": "9b15de",
|
||||
"selected": "4c385c",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "40314C"
|
||||
},
|
||||
"Marigold": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "d3881f",
|
||||
"tertiary-med-or-tertiary": "d3881f",
|
||||
"selected": "ffdcb2",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "FFE6C6"
|
||||
},
|
||||
"Marigold Dark": {
|
||||
"primary": "ffffff",
|
||||
"secondary": "1A1A1A",
|
||||
"tertiary": "d3881f",
|
||||
"tertiary-med-or-tertiary": "d3881f",
|
||||
"selected": "6c5b49",
|
||||
"header_background": "1A1A1A",
|
||||
"header_primary": "ffffff",
|
||||
"hover": "584B3E"
|
||||
"primary": "F1EFF9",
|
||||
"secondary": "1e1a36",
|
||||
"header_background": "00091d",
|
||||
"header_primary": "F5F8FF",
|
||||
"tertiary": "6465ab",
|
||||
"tertiary-50": "131124",
|
||||
"selected": "1e1a36",
|
||||
"hover": "131124"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
html {
|
||||
--accent-color: #{$tertiary} !important;
|
||||
--accent-text-color: #fff;
|
||||
|
||||
// Background Colors
|
||||
--background-color: light-dark(
|
||||
oklch(from #{$tertiary} 96% calc(c * 0.125) h),
|
||||
oklch(from #{$tertiary} 10% 0.025 h)
|
||||
) !important;
|
||||
--d-content-background: light-dark(
|
||||
oklch(from #{$secondary} calc(2 * l) c h),
|
||||
oklch(from #{$secondary} l c h)
|
||||
) !important;
|
||||
|
||||
// HeaderColors
|
||||
--header_primary-low-mid: light-dark(
|
||||
oklch(from #{$tertiary} 73.5% calc(c * 0.5) h),
|
||||
oklch(from #{$tertiary} l calc(c * 0.25) h)
|
||||
) !important;
|
||||
--header_primary-medium: light-dark(
|
||||
oklch(from #{$tertiary} 54% calc(c * 0.5) h),
|
||||
oklch(from #{$tertiary} calc(l * 1.35) calc(c * 0.25) h)
|
||||
) !important;
|
||||
|
||||
// Sidebar Colors
|
||||
--d-sidebar-border-color: light-dark(
|
||||
oklch(from #{$tertiary} 88% calc(c * 0.25) h),
|
||||
oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
|
||||
) !important;
|
||||
--d-sidebar-link-color: light-dark(
|
||||
oklch(from #{$tertiary} calc(l * 0.8) calc(c * 0.25) h),
|
||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
|
||||
) !important;
|
||||
--d-sidebar-active-color: #{$primary} !important;
|
||||
--d-sidebar-suffix-color: light-dark(
|
||||
oklch(from #{$tertiary} l calc(c * 0.9) h),
|
||||
oklch(from #{$tertiary} l calc(c * 0.9) h)
|
||||
) !important;
|
||||
|
||||
// Other Colors
|
||||
--d-selected: light-dark(
|
||||
oklch(from #{$tertiary} 92% calc(c * 0.5) h),
|
||||
oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
|
||||
) !important;
|
||||
--d-nav-color--active: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 1.2) c h)
|
||||
) !important;
|
||||
--d-nav-color--hover: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 1.2) c h)
|
||||
) !important;
|
||||
--link-color: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 0.95) c h)
|
||||
) !important;
|
||||
--link-color-hover: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 2.25) h)
|
||||
) !important;
|
||||
--tertiary-hover: #{$tertiary} !important;
|
||||
|
||||
// Search Colors
|
||||
--search-color: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
|
||||
) !important;
|
||||
|
||||
// Topic Card Colors
|
||||
--topic-card-shadow: light-dark(
|
||||
oklch(from #{$tertiary} calc(l * 1.85) calc(c * 0.5) h),
|
||||
oklch(from #{$tertiary} calc(l * 0.2) calc(c * 0.01) h / 0.25)
|
||||
) !important;
|
||||
|
||||
// Button Colors
|
||||
--button-box-shadow: light-dark(
|
||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.35) h),
|
||||
oklch(from #{$tertiary} calc(l * 0.75) calc(c * 0.5) h)
|
||||
) !important;
|
||||
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color) !important;
|
||||
--d-sidebar-highlight-hover-background: var(--d-selected) !important;
|
||||
--d-sidebar-link-icon-color: var(--d-sidebar-link-color) !important;
|
||||
--d-sidebar-header-color: var(--d-sidebar-link-color) !important;
|
||||
--d-sidebar-header-icon-color: var(--d-sidebar-link-color) !important;
|
||||
--d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color) !important;
|
||||
--d-sidebar-background: var(--background-color) !important;
|
||||
--d-sidebar-footer-fade: var(--background-color) !important;
|
||||
--d-sidebar-prefix-background: var(--d-selected) !important;
|
||||
--d-sidebar-active-prefix-background: light-dark(
|
||||
oklch(from var(--d-selected) calc(l * 0.85) c h),
|
||||
oklch(from var(--d-selected) calc(l * 0.7) c h)
|
||||
) !important;
|
||||
--d-sidebar-highlight-prefix-background: light-dark(
|
||||
oklch(from var(--d-selected) calc(l * 0.85) c h),
|
||||
oklch(from var(--d-selected) calc(l * 0.7) c h)
|
||||
) !important;
|
||||
--d-sidebar-highlight-suffix-color: var(
|
||||
--d-sidebar-active-suffix-color
|
||||
) !important;
|
||||
--d-sidebar-highlight-color: var(--primary) !important;
|
||||
--d-sidebar-highlight-background: var(--d-selected) !important;
|
||||
--d-sidebar-section-link-icon-size: 1em !important;
|
||||
--d-hover: oklch(from var(--d-selected) l c h / 0.75) !important;
|
||||
--d-input-bg-color: var(--d-content-background) !important;
|
||||
}
|
||||
+2
-4
@@ -2,18 +2,16 @@
|
||||
@import "buttons";
|
||||
@import "chat";
|
||||
@import "color-choice";
|
||||
@import "color-exploration";
|
||||
@import "composer";
|
||||
@import "composer-peek-mode";
|
||||
@import "header";
|
||||
@import "hiddenstuff";
|
||||
@import "login";
|
||||
@import "main";
|
||||
@import "misc";
|
||||
@import "mobile-stuff";
|
||||
@import "nav-pills";
|
||||
@import "welcome-banner";
|
||||
@import "search-banner";
|
||||
@import "sidebar";
|
||||
@import "sidebar-new-topic-button";
|
||||
@import "topic";
|
||||
@import "topic-cards";
|
||||
@import "variables";
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
<script>
|
||||
if(!CSS.supports("(color: hsl(from white h s l))")){
|
||||
window.unsupportedBrowser = true;
|
||||
window.I18n.translations[I18n.locale].js.browser_update = 'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
|
||||
}
|
||||
</script>
|
||||
@@ -1,2 +0,0 @@
|
||||
@import "desktop-horizon-fixes";
|
||||
@import "desktop-full-width";
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
import { wantsNewWindow } from "discourse/lib/intercept-click";
|
||||
|
||||
export default apiInitializer((api) => {
|
||||
api.registerBehaviorTransformer(
|
||||
"topic-list-item-click",
|
||||
({ context, next }) => {
|
||||
const event = context.event;
|
||||
const target = event.target;
|
||||
const topic = context.topic;
|
||||
|
||||
const excludedSelectors = [
|
||||
"a:not(.title)",
|
||||
"button",
|
||||
".bulk-select",
|
||||
".topic-category-data",
|
||||
];
|
||||
|
||||
const isExcluded = excludedSelectors.some((selector) =>
|
||||
target.closest(selector)
|
||||
);
|
||||
|
||||
if (isExcluded) {
|
||||
return next();
|
||||
}
|
||||
|
||||
const mainLink = target.closest(".title, .main-link, .topic-list-item");
|
||||
if (mainLink) {
|
||||
if (wantsNewWindow(event)) {
|
||||
window.open(topic.lastUnreadUrl, "_blank");
|
||||
} else {
|
||||
event.preventDefault();
|
||||
context.navigateToTopic(topic, topic.lastUnreadUrl);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
next();
|
||||
}
|
||||
);
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
import ComposerPeekModeToggle from "../components/composer-peek-mode-toggle";
|
||||
|
||||
export default apiInitializer("1.8.0", (api) => {
|
||||
api.renderInOutlet("before-composer-toggles", ComposerPeekModeToggle);
|
||||
});
|
||||
@@ -1,16 +0,0 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
|
||||
export default apiInitializer("0.8", (api) => {
|
||||
document.body.classList.add("full-width-enabled");
|
||||
|
||||
// When the sidebar is visible, force the HomeLogo to be in an 'un-minimized' state.
|
||||
api.registerValueTransformer?.(
|
||||
"home-logo-minimized",
|
||||
({ value, context }) => {
|
||||
if (value && context.showSidebar) {
|
||||
return false;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
);
|
||||
});
|
||||
@@ -1,10 +0,0 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
|
||||
export default apiInitializer("0.8", (api) => {
|
||||
api.registerValueTransformer(
|
||||
"hamburger-dropdown-click-outside-exceptions",
|
||||
({ value }) => {
|
||||
return [...value, ".topic-drafts-menu-content"];
|
||||
}
|
||||
);
|
||||
});
|
||||
@@ -1,16 +0,0 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
import ExperimentalScreen from "../components/experimental-screen";
|
||||
import UserColorPaletteSelector from "../components/user-color-palette-selector";
|
||||
|
||||
export default apiInitializer("1.8.0", (api) => {
|
||||
api.renderInOutlet("above-main-container", ExperimentalScreen);
|
||||
api.renderInOutlet("sidebar-footer-actions", UserColorPaletteSelector);
|
||||
|
||||
api.registerValueTransformer("site-setting-enable-welcome-banner", () => {
|
||||
return settings.enable_welcome_banner;
|
||||
});
|
||||
|
||||
api.registerValueTransformer("site-setting-search-experience", () => {
|
||||
return settings.search_experience;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
import CustomColorHtmlClass from "../components/custom-color-html-class";
|
||||
import ExperimentalScreen from "../components/experimental-screen";
|
||||
|
||||
export default apiInitializer("1.8.0", (api) => {
|
||||
api.renderInOutlet("above-main-container", ExperimentalScreen);
|
||||
api.renderInOutlet("above-main-container", CustomColorHtmlClass);
|
||||
});
|
||||
@@ -1,7 +0,0 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
|
||||
export default apiInitializer("0.8.0", (api) => {
|
||||
api.registerValueTransformer("bulk-select-in-nav-controls", () => {
|
||||
return true;
|
||||
});
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
import SidebarNewTopicButton from "../components/sidebar-new-topic-button";
|
||||
|
||||
export default apiInitializer("1.8.0", (api) => {
|
||||
api.renderInOutlet("before-sidebar-sections", SidebarNewTopicButton);
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
import CustomUserPalette from "../components/custom-user-palette";
|
||||
|
||||
export default apiInitializer("1.8.0", (api) => {
|
||||
api.renderInOutlet("sidebar-footer-actions", CustomUserPalette);
|
||||
});
|
||||
@@ -1,64 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import avatar from "discourse/helpers/avatar";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import formatDate from "discourse/helpers/format-date";
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
export default class TopicActivityColumn extends Component {
|
||||
get topicUser() {
|
||||
if (
|
||||
moment(this.args.topic.bumped_at).isAfter(this.args.topic.last_posted_at)
|
||||
) {
|
||||
return {
|
||||
user: undefined,
|
||||
username: undefined,
|
||||
activityText: "user_updated",
|
||||
class: "--updated",
|
||||
};
|
||||
}
|
||||
|
||||
if (this.args.topic.posts_count > 1) {
|
||||
return {
|
||||
user: this.args.topic.lastPosterUser,
|
||||
username: this.args.topic.last_poster_username,
|
||||
activityText: "user_replied",
|
||||
class: "--replied",
|
||||
};
|
||||
} else if (this.args.topic.posts_count === 1) {
|
||||
return {
|
||||
user: this.args.topic.creator,
|
||||
username: this.args.topic.creator.username,
|
||||
activityText: "user_posted",
|
||||
class: "--posted",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<span class={{concatClass "topic-activity" this.topicUser.class}}>
|
||||
<div class="topic-activity__user">
|
||||
{{#if this.topicUser.user}}
|
||||
{{avatar this.topicUser.user imageSize="small"}}
|
||||
{{else}}
|
||||
{{icon "pencil"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if this.topicUser.username}}
|
||||
<span
|
||||
class="topic-activity__username"
|
||||
>{{this.topicUser.username}}</span>
|
||||
{{/if}}
|
||||
<div class="topic-activity__reason">
|
||||
{{i18n (themePrefix this.topicUser.activityText)}}
|
||||
</div>
|
||||
<div class="topic-activity__time">
|
||||
{{formatDate
|
||||
@topic.bumpedAt
|
||||
leaveAgo="true"
|
||||
format="medium-with-ago-and-on"
|
||||
}}
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import avatar from "discourse/helpers/avatar";
|
||||
|
||||
const TopicAuthorAvatarColumn = <template>
|
||||
<span class="topic-author-avatar">
|
||||
{{avatar @topic.creator imageSize="large"}}
|
||||
</span>
|
||||
</template>;
|
||||
|
||||
export default TopicAuthorAvatarColumn;
|
||||
@@ -0,0 +1,5 @@
|
||||
const TopicAuthorColumn = <template>
|
||||
<span class="topic-author">@{{@topic.creator.username}}</span>
|
||||
</template>;
|
||||
|
||||
export default TopicAuthorColumn;
|
||||
@@ -2,7 +2,7 @@ import icon from "discourse/helpers/d-icon";
|
||||
import gt from "truth-helpers/helpers/gt";
|
||||
|
||||
const TopicRepliesColumn = <template>
|
||||
{{#if (gt @topic.replyCount 1)}}
|
||||
{{#if (gt @topic.posts_count 1)}}
|
||||
<span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
|
||||
{{/if}}
|
||||
</template>;
|
||||
|
||||
@@ -1,36 +1,115 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { on } from "@ember/modifier";
|
||||
import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
import { and } from "truth-helpers";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
export default class TopicStatusColumn extends Component {
|
||||
@service currentUser;
|
||||
@service siteSettings;
|
||||
|
||||
get badge() {
|
||||
if (this.args.topic.is_hot) {
|
||||
return {
|
||||
icon: "fire",
|
||||
text: "topic_hot",
|
||||
className: "--hot",
|
||||
};
|
||||
}
|
||||
get canAct() {
|
||||
return this.currentUser && !this.args.disableActions;
|
||||
}
|
||||
|
||||
if (this.args.topic.pinned) {
|
||||
return {
|
||||
icon: "thumbtack",
|
||||
text: "topic_pinned",
|
||||
className: "--pinned",
|
||||
};
|
||||
get statusClass() {
|
||||
let classes = ["topic-status-card"];
|
||||
if (this.args.topic.bookmarked) {
|
||||
classes.push("--bookmark");
|
||||
} else if (this.args.topic.closed && this.args.topic.archived) {
|
||||
classes.push("--locked --archived");
|
||||
} else if (this.args.topic.closed) {
|
||||
classes.push("--locked");
|
||||
} else if (this.args.topic.archived) {
|
||||
classes.push("--archived");
|
||||
} else if (this.args.topic.is_warning) {
|
||||
classes.push("--warning");
|
||||
} else if (
|
||||
this.args.showPrivateMessageIcon &&
|
||||
this.args.topic.isPrivateMessage
|
||||
) {
|
||||
classes.push("--private-message");
|
||||
} else if (this.args.topic.pinned) {
|
||||
classes.push("--pinned");
|
||||
} else if (this.args.topic.unpinned) {
|
||||
classes.push("--unpinned");
|
||||
}
|
||||
return classes.join(" ");
|
||||
}
|
||||
|
||||
return null;
|
||||
get heatMap() {
|
||||
return this.args.topic.views > this.siteSettings.topic_views_heat_medium;
|
||||
}
|
||||
|
||||
@action
|
||||
togglePinned(event) {
|
||||
event.preventDefault();
|
||||
this.args.topic.togglePinnedForUser();
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if this.badge}}
|
||||
<span class="topic-status-card {{this.badge.className}}">{{icon
|
||||
this.badge.icon
|
||||
}}{{i18n (themePrefix this.badge.text)}}</span>
|
||||
{{#if @topic.bookmarked}}
|
||||
<span class={{this.statusClass}}>{{icon "bookmark"}}{{i18n
|
||||
(themePrefix "topic_bookmarked")
|
||||
}}</span>
|
||||
{{/if}}
|
||||
{{#if (and @topic.closed @topic.archived)~}}
|
||||
<span class={{this.statusClass}}>{{i18n
|
||||
(themePrefix "topic_closed_and_archived")
|
||||
}}</span>
|
||||
{{else if @topic.closed}}
|
||||
<span class={{this.statusClass}}>{{i18n
|
||||
(themePrefix "topic_closed")
|
||||
}}</span>
|
||||
{{else if @topic.archived}}
|
||||
<span class={{this.statusClass}}>{{i18n
|
||||
(themePrefix "topic_archived")
|
||||
}}</span>
|
||||
{{/if}}
|
||||
{{#if @topic.is_warning}}
|
||||
<span class={{this.statusClass}}>{{i18n
|
||||
(themePrefix "topic_warning")
|
||||
}}</span>
|
||||
{{else if (and @showPrivateMessageIcon @topic.isPrivateMessage)}}
|
||||
<span class={{this.statusClass}}>{{i18n
|
||||
(themePrefix "topic_personal_message")
|
||||
}}</span>
|
||||
{{/if}}
|
||||
{{#if @topic.pinned}}
|
||||
{{#if this.canAct}}
|
||||
<button
|
||||
type="button"
|
||||
{{on "click" this.togglePinned}}
|
||||
class={{this.statusClass}}
|
||||
>{{icon "thumbtack"}}{{i18n (themePrefix "topic_pinned")}}</button>
|
||||
{{else}}
|
||||
<span class={{this.statusClass}}>{{icon "thumbtack"}}{{i18n
|
||||
(themePrefix "topic_pinned")
|
||||
}}</span>
|
||||
{{/if}}
|
||||
{{else if @topic.unpinned}}
|
||||
{{#if this.canAct}}
|
||||
<button
|
||||
type="button"
|
||||
{{on "click" this.togglePinned}}
|
||||
class={{this.statusClass}}
|
||||
>{{icon "thumbtack" class="unpinned"}}{{i18n
|
||||
(themePrefix "topic_unpinned")
|
||||
}}</button>
|
||||
{{else}}
|
||||
<span class={{this.statusClass}}>{{icon
|
||||
"thumbtack"
|
||||
class="unpinned"
|
||||
}}{{i18n (themePrefix "topic_unpinned")}}</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if this.heatMap}}
|
||||
<span class="topic-status-card --hot">{{icon "fire"}}{{i18n
|
||||
(themePrefix "topic_hot")
|
||||
}}</span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import bodyClass from "discourse/helpers/body-class";
|
||||
|
||||
export default class ComposerPeekModeToggle extends Component {
|
||||
@service composer;
|
||||
@service keyValueStore;
|
||||
|
||||
@tracked
|
||||
peekModeActive = this.keyValueStore.getItem("peekModeActive") === "true";
|
||||
|
||||
get bodyCssClass() {
|
||||
return this.peekModeActive ? "peek-mode-active" : "";
|
||||
}
|
||||
|
||||
@action
|
||||
togglePeekMode() {
|
||||
this.peekModeActive = !this.peekModeActive;
|
||||
this.keyValueStore.setItem("peekModeActive", this.peekModeActive);
|
||||
if (this.composer.showPreview) {
|
||||
this.composer.togglePreview();
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
{{bodyClass this.bodyCssClass}}
|
||||
<DButton
|
||||
@action={{this.togglePeekMode}}
|
||||
@preventFocus={{true}}
|
||||
@icon="discourse-sidebar"
|
||||
class="btn-mini-toggle no-text peek-mode-toggle btn-transparent"
|
||||
/>
|
||||
</template>
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { concat } from "@ember/helper";
|
||||
import { service } from "@ember/service";
|
||||
import htmlClass from "discourse/helpers/html-class";
|
||||
|
||||
export default class CustomColorHtmlClass extends Component {
|
||||
@service customColor;
|
||||
|
||||
<template>
|
||||
{{htmlClass (concat "custom-color-" this.customColor.color)}}
|
||||
</template>
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import DMenu from "float-kit/components/d-menu";
|
||||
import SitePaletteMenuItem from "./site-palette-menu-item";
|
||||
|
||||
const PALETTES = [
|
||||
{
|
||||
label: "Marigold",
|
||||
name: "marigold",
|
||||
color: "#d3881f",
|
||||
},
|
||||
{
|
||||
label: "Violet",
|
||||
name: "violet",
|
||||
color: "#9b15de",
|
||||
},
|
||||
{
|
||||
label: "Lily",
|
||||
name: "lily",
|
||||
color: "#CC336F",
|
||||
},
|
||||
{
|
||||
label: "Clover",
|
||||
name: "clover",
|
||||
color: "#45a06e",
|
||||
},
|
||||
{
|
||||
label: "Royal",
|
||||
name: "royal",
|
||||
color: "#4169e1",
|
||||
},
|
||||
{
|
||||
label: "Horizon",
|
||||
name: "horizon",
|
||||
color: "#595bca",
|
||||
},
|
||||
];
|
||||
|
||||
export const DEFAULT_PALETTE_NAME = "horizon";
|
||||
|
||||
<template>
|
||||
<DMenu
|
||||
@identifier="user-color-palette"
|
||||
@placementStrategy="fixed"
|
||||
class="btn-flat user-color-palette sidebar-footer-actions-button"
|
||||
@inline={{true}}
|
||||
>
|
||||
<:trigger>
|
||||
{{icon "paintbrush"}}
|
||||
</:trigger>
|
||||
<:content>
|
||||
<div class="color-palette-menu">
|
||||
<div class="color-palette-menu__content">
|
||||
{{#each PALETTES as |colorPalette|}}
|
||||
<SitePaletteMenuItem @colorPalette={{colorPalette}} />
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</:content>
|
||||
</DMenu>
|
||||
</template>
|
||||
@@ -2,15 +2,10 @@ import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||
import { service } from "@ember/service";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
import { bind } from "discourse/lib/decorators";
|
||||
|
||||
const DO_NOT_RENDER_LIST = ["login"];
|
||||
|
||||
export default class ExperimentalScreen extends Component {
|
||||
@service router;
|
||||
|
||||
@tracked left = 0;
|
||||
@tracked right = 0;
|
||||
resizeObserver;
|
||||
@@ -33,10 +28,6 @@ export default class ExperimentalScreen extends Component {
|
||||
);
|
||||
}
|
||||
|
||||
get shouldRender() {
|
||||
return !DO_NOT_RENDER_LIST.includes(this.router.currentRouteName);
|
||||
}
|
||||
|
||||
@action
|
||||
onInsert(element) {
|
||||
this.calculateDistance(element);
|
||||
@@ -51,18 +42,16 @@ export default class ExperimentalScreen extends Component {
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if this.shouldRender}}
|
||||
<ul
|
||||
class="experimental-screen"
|
||||
{{didInsert this.onInsert}}
|
||||
style={{this.distanceStyles}}
|
||||
>
|
||||
<li class="experimental-screen__top-left"></li>
|
||||
<li class="experimental-screen__top-right"></li>
|
||||
<li class="experimental-screen__bottom-left"></li>
|
||||
<li class="experimental-screen__bottom-right"></li>
|
||||
<li class="experimental-screen__bottom-bar"></li>
|
||||
</ul>
|
||||
{{/if}}
|
||||
<ul
|
||||
class="experimental-screen"
|
||||
{{didInsert this.onInsert}}
|
||||
style={{this.distanceStyles}}
|
||||
>
|
||||
<li class="experimental-screen__top-left"></li>
|
||||
<li class="experimental-screen__top-right"></li>
|
||||
<li class="experimental-screen__bottom-left"></li>
|
||||
<li class="experimental-screen__bottom-right"></li>
|
||||
<li class="experimental-screen__bottom-bar"></li>
|
||||
</ul>
|
||||
</template>
|
||||
}
|
||||
|
||||
@@ -1,117 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||
import didUpdate from "@ember/render-modifiers/modifiers/did-update";
|
||||
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
|
||||
import { service } from "@ember/service";
|
||||
import { gt } from "truth-helpers";
|
||||
import CreateTopicButton from "discourse/components/create-topic-button";
|
||||
import not from "truth-helpers/helpers/not";
|
||||
|
||||
export default class SidebarNewTopicButton extends Component {
|
||||
@service composer;
|
||||
@service currentUser;
|
||||
@service siteSettings;
|
||||
@service router;
|
||||
@service header;
|
||||
@service appEvents;
|
||||
|
||||
@tracked category;
|
||||
@tracked tag;
|
||||
|
||||
get shouldRender() {
|
||||
return this.currentUser && !this.router.currentRouteName.includes("admin");
|
||||
}
|
||||
|
||||
get canCreateTopic() {
|
||||
return this.currentUser?.can_create_topic;
|
||||
}
|
||||
|
||||
get draftCount() {
|
||||
return this.currentUser?.get("draft_count");
|
||||
}
|
||||
|
||||
get createTopicTargetCategory() {
|
||||
if (this.category?.canCreateTopic) {
|
||||
return this.category;
|
||||
}
|
||||
|
||||
if (this.siteSettings.default_subcategory_on_read_only_category) {
|
||||
return this.category?.subcategoryWithCreateTopicPermission;
|
||||
}
|
||||
}
|
||||
|
||||
get tagRestricted() {
|
||||
return this.tag?.staff;
|
||||
}
|
||||
|
||||
get createTopicDisabled() {
|
||||
return (
|
||||
(this.category && !this.createTopicTargetCategory) ||
|
||||
(this.tagRestricted && !this.currentUser.staff)
|
||||
);
|
||||
}
|
||||
|
||||
get categoryReadOnlyBanner() {
|
||||
if (this.category && this.currentUser && this.createTopicDisabled) {
|
||||
return this.category.read_only_banner;
|
||||
}
|
||||
}
|
||||
|
||||
get createTopicClass() {
|
||||
const baseClasses = "btn-default sidebar-new-topic-button";
|
||||
return this.categoryReadOnlyBanner
|
||||
? `${baseClasses} disabled`
|
||||
: baseClasses;
|
||||
}
|
||||
|
||||
@action
|
||||
createNewTopic() {
|
||||
this.composer.openNewTopic({ category: this.category, tags: this.tag?.id });
|
||||
}
|
||||
|
||||
@action
|
||||
getCategoryandTag() {
|
||||
this.category = this.router.currentRoute.attributes?.category || null;
|
||||
this.tag = this.router.currentRoute.attributes?.tag || null;
|
||||
}
|
||||
|
||||
@action
|
||||
watchForComposer() {
|
||||
// this covers opening drafts from the hamburger menu
|
||||
this.appEvents.on("composer:will-open", this, this.closeHamburger);
|
||||
}
|
||||
|
||||
@action
|
||||
stopWatchingForComposer() {
|
||||
this.appEvents.off("composer:will-open", this, this.closeHamburger);
|
||||
}
|
||||
|
||||
@action
|
||||
closeHamburger() {
|
||||
this.header.hamburgerVisible = false;
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if this.shouldRender}}
|
||||
<div
|
||||
class="sidebar-new-topic-button__wrapper"
|
||||
{{didInsert this.getCategoryandTag}}
|
||||
{{didUpdate this.getCategoryandTag this.router.currentRoute}}
|
||||
{{didInsert this.watchForComposer}}
|
||||
{{willDestroy this.stopWatchingForComposer}}
|
||||
>
|
||||
<CreateTopicButton
|
||||
@canCreateTopic={{this.canCreateTopic}}
|
||||
@action={{this.createNewTopic}}
|
||||
@disabled={{this.createTopicDisabled}}
|
||||
@label="topic.create"
|
||||
@btnClass={{this.createTopicClass}}
|
||||
@canCreateTopicOnTag={{not this.tagRestricted}}
|
||||
@showDrafts={{gt this.draftCount 0}}
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
+11
-14
@@ -1,43 +1,40 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { fn } from "@ember/helper";
|
||||
import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
|
||||
export default class UserColorPaletteMenuItem extends Component {
|
||||
@service site;
|
||||
@service session;
|
||||
export default class SitePaletteMenuItem extends Component {
|
||||
@service customColor;
|
||||
|
||||
get siteStyle() {
|
||||
return `--icon-color: ${this.args.colorPalette.accent}`;
|
||||
return `--icon-color: ${this.args.colorPalette.color}`;
|
||||
}
|
||||
|
||||
get activeClass() {
|
||||
if (this.args.selectedColorPaletteId === this.args.colorPalette.id) {
|
||||
if (this.customColor.color === this.args.colorPalette.name) {
|
||||
return "active";
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
paletteSelected() {
|
||||
this.args.paletteSelected(this.args.colorPalette);
|
||||
handleInput(colorPalette) {
|
||||
this.customColor.setColor(colorPalette.name);
|
||||
}
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="user-color-palette-menu__item"
|
||||
data-color-palette={{@colorPalette.name}}
|
||||
>
|
||||
<div class="color-palette-menu__item" data-color={{@colorPalette.name}}>
|
||||
<DButton
|
||||
class={{concatClass
|
||||
"btn-flat user-color-palette-menu__item-choice"
|
||||
"btn-flat color-palette-menu__item-choice"
|
||||
this.activeClass
|
||||
}}
|
||||
style={{htmlSafe this.siteStyle}}
|
||||
@icon="circle"
|
||||
@translatedLabel={{@colorPalette.name}}
|
||||
@action={{this.paletteSelected}}
|
||||
@translatedLabel={{@colorPalette.label}}
|
||||
@action={{fn this.handleInput @colorPalette}}
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,210 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
import { isEmpty } from "@ember/utils";
|
||||
import { Promise } from "rsvp";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import { reload } from "discourse/helpers/page-reloader";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
import {
|
||||
listColorSchemes,
|
||||
updateColorSchemeCookie,
|
||||
} from "discourse/lib/color-scheme-picker";
|
||||
import cookie from "discourse/lib/cookie";
|
||||
import DMenu from "float-kit/components/d-menu";
|
||||
import UserColorPaletteMenuItem from "./user-color-palette-menu-item";
|
||||
|
||||
const HORIZON_PALETTES = [
|
||||
"Horizon",
|
||||
"Marigold",
|
||||
"Violet",
|
||||
"Lily",
|
||||
"Clover",
|
||||
"Royal",
|
||||
];
|
||||
|
||||
export default class UserColorPaletteSelector extends Component {
|
||||
@service currentUser;
|
||||
@service keyValueStore;
|
||||
@service site;
|
||||
@service session;
|
||||
@service interfaceColor;
|
||||
|
||||
@tracked anonColorPaletteId = this.#loadAnonColorPalette();
|
||||
@tracked userColorPaletteId = this.session.userColorSchemeId;
|
||||
@tracked cssLoaded = true;
|
||||
|
||||
get userColorPalettes() {
|
||||
const availablePalettes = listColorSchemes(this.site)
|
||||
?.map((userPalette) => {
|
||||
return {
|
||||
...userPalette,
|
||||
accent: `#${
|
||||
userPalette.colors.find((color) => color.name === "tertiary").hex
|
||||
}`,
|
||||
};
|
||||
})
|
||||
.filter((userPalette) => {
|
||||
return HORIZON_PALETTES.some((palette) => {
|
||||
return userPalette.name.toLowerCase().includes(palette.toLowerCase());
|
||||
});
|
||||
})
|
||||
.sort();
|
||||
|
||||
// Match the light scheme with the corresponding dark id based in the name
|
||||
return (
|
||||
availablePalettes
|
||||
?.map((palette) => {
|
||||
if (palette.is_dark) {
|
||||
return palette;
|
||||
}
|
||||
|
||||
const normalizedLightName = palette.name.toLowerCase();
|
||||
|
||||
const correspondingDarkModeId = availablePalettes.find(
|
||||
(item) =>
|
||||
item.is_dark &&
|
||||
normalizedLightName ===
|
||||
item.name.toLowerCase().replace(/\s+dark$/, "")
|
||||
)?.id;
|
||||
|
||||
return {
|
||||
...palette,
|
||||
correspondingDarkModeId,
|
||||
};
|
||||
})
|
||||
// Only want to show palettes that have corresponding light/dark modes
|
||||
.filter((palette) => !palette.is_dark)
|
||||
);
|
||||
}
|
||||
|
||||
get selectedColorPaletteId() {
|
||||
if (this.currentUser) {
|
||||
return this.userColorPaletteId;
|
||||
}
|
||||
|
||||
return this.anonColorPaletteId;
|
||||
}
|
||||
|
||||
@action
|
||||
onRegisterMenu(api) {
|
||||
this.dMenu = api;
|
||||
}
|
||||
|
||||
@action
|
||||
paletteSelected(selectedPalette) {
|
||||
if (selectedPalette.id === this.selectedColorPaletteId) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.#updatePreference(selectedPalette);
|
||||
this.#changeSiteColorPalette(selectedPalette);
|
||||
this.dMenu.close();
|
||||
}
|
||||
|
||||
#updatePreference(selectedPalette) {
|
||||
updateColorSchemeCookie(selectedPalette.id);
|
||||
updateColorSchemeCookie(selectedPalette.correspondingDarkModeId, {
|
||||
dark: true,
|
||||
});
|
||||
|
||||
if (!this.currentUser) {
|
||||
this.anonColorPaletteId = selectedPalette.id;
|
||||
} else {
|
||||
this.userColorPaletteId = selectedPalette.id;
|
||||
}
|
||||
}
|
||||
|
||||
#loadAnonColorPalette() {
|
||||
const storedAnonPaletteId = cookie("color_scheme_id");
|
||||
if (storedAnonPaletteId) {
|
||||
return parseInt(storedAnonPaletteId, 10);
|
||||
}
|
||||
}
|
||||
|
||||
async #changeSiteColorPalette(colorPalette) {
|
||||
this.cssLoaded = false;
|
||||
|
||||
const lightPaletteId = colorPalette.id;
|
||||
const darkPaletteId = colorPalette.correspondingDarkModeId;
|
||||
const darkTag = document.querySelector("link.dark-scheme");
|
||||
|
||||
// TODO(osama) once we have built-in light/dark modes for each palette, we
|
||||
// can stop making the 2nd ajax call for the dark palette and replace it
|
||||
// with a include_dark_scheme param on the ajax call for the light
|
||||
// palette which will include the href for the dark palette in the response
|
||||
if (!darkTag) {
|
||||
reload();
|
||||
return;
|
||||
}
|
||||
|
||||
const lightPaletteInfo = await ajax(
|
||||
`/color-scheme-stylesheet/${lightPaletteId}/${colorPalette.theme_id}.json`
|
||||
);
|
||||
const darkPaletteInfo = await ajax(
|
||||
`/color-scheme-stylesheet/${darkPaletteId}/${colorPalette.theme_id}.json`
|
||||
);
|
||||
|
||||
Promise.all([
|
||||
this.#preloadAndSwapCSS(lightPaletteInfo.new_href, "light-scheme"),
|
||||
this.#preloadAndSwapCSS(darkPaletteInfo.new_href, "dark-scheme"),
|
||||
]).then(() => {
|
||||
this.cssLoaded = true;
|
||||
});
|
||||
}
|
||||
|
||||
#preloadAndSwapCSS(newHref, existingLinkClass) {
|
||||
return new Promise((resolve) => {
|
||||
const existingLink = document.querySelector(
|
||||
`link[rel='stylesheet'].${existingLinkClass}`
|
||||
);
|
||||
const newTag = document.createElement("link");
|
||||
|
||||
newTag.rel = "preload";
|
||||
newTag.href = newHref;
|
||||
newTag.as = "style";
|
||||
newTag.onload = () => {
|
||||
existingLink.href = newHref;
|
||||
newTag.remove();
|
||||
resolve();
|
||||
};
|
||||
|
||||
document.head.appendChild(newTag);
|
||||
});
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#unless (isEmpty this.userColorPalettes)}}
|
||||
<DMenu
|
||||
@identifier="user-color-palette-selector"
|
||||
@placementStrategy="fixed"
|
||||
@onRegisterApi={{this.onRegisterMenu}}
|
||||
class={{concatClass
|
||||
"btn-flat user-color-palette-selector sidebar-footer-actions-button"
|
||||
(if this.cssLoaded "user-color-palette-css-loaded")
|
||||
}}
|
||||
data-selected-color-palette-id={{this.selectedColorPaletteId}}
|
||||
@inline={{true}}
|
||||
>
|
||||
<:trigger>
|
||||
{{icon "paintbrush"}}
|
||||
</:trigger>
|
||||
<:content>
|
||||
<div class="user-color-palette-menu">
|
||||
<div class="user-color-palette-menu__content">
|
||||
{{#each this.userColorPalettes as |colorPalette|}}
|
||||
<UserColorPaletteMenuItem
|
||||
@selectedColorPaletteId={{this.selectedColorPaletteId}}
|
||||
@colorPalette={{colorPalette}}
|
||||
@paletteSelected={{this.paletteSelected}}
|
||||
/>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</:content>
|
||||
</DMenu>
|
||||
{{/unless}}
|
||||
</template>
|
||||
}
|
||||
@@ -1,25 +1,27 @@
|
||||
import { withPluginApi } from "discourse/lib/plugin-api";
|
||||
import TopicActivityColumn from "../components/card/topic-activity-column";
|
||||
import TopicAuthorAvatarColumn from "../components/card/topic-author-avatar-column";
|
||||
import TopicAuthorColumn from "../components/card/topic-author-column";
|
||||
import TopicCategoryColumn from "../components/card/topic-category-column";
|
||||
import TopicLikesColumn from "../components/card/topic-likes-column";
|
||||
import TopicRepliesColumn from "../components/card/topic-replies-column";
|
||||
import TopicStatusColumn from "../components/card/topic-status-column";
|
||||
|
||||
const TopicActivity = <template>
|
||||
<td class="topic-activity-data">
|
||||
<TopicActivityColumn @topic={{@topic}} />
|
||||
const TopicAuthor = <template>
|
||||
<td class="topic-author-data">
|
||||
<TopicAuthorColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicStatus = <template>
|
||||
<td class="topic-status-data">
|
||||
<TopicStatusColumn @topic={{@topic}} />
|
||||
const TopicAuthorAvatar = <template>
|
||||
<td class="topic-author-avatar-data">
|
||||
<TopicAuthorAvatarColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicCategory = <template>
|
||||
<td class="topic-category-data">
|
||||
const TopicCategoryStatus = <template>
|
||||
<td class="topic-category-status-data">
|
||||
<TopicCategoryColumn @topic={{@topic}} />
|
||||
<TopicStatusColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
@@ -33,35 +35,30 @@ const TopicLikesReplies = <template>
|
||||
export default {
|
||||
name: "topic-list-customizations",
|
||||
|
||||
initialize(container) {
|
||||
const router = container.lookup("service:router");
|
||||
initialize() {
|
||||
withPluginApi("1.39.0", (api) => {
|
||||
api.registerValueTransformer(
|
||||
"topic-list-columns",
|
||||
({ value: columns }) => {
|
||||
columns.add("topic-status", {
|
||||
item: TopicStatus,
|
||||
columns.add("topic-author", {
|
||||
item: TopicAuthor,
|
||||
after: "activity",
|
||||
});
|
||||
columns.add("topic-category-status", {
|
||||
item: TopicCategoryStatus,
|
||||
after: "topic-author",
|
||||
});
|
||||
columns.add("topic-category", {
|
||||
item: TopicCategory,
|
||||
after: "topic-status",
|
||||
columns.add("topic-author-avatar", {
|
||||
item: TopicAuthorAvatar,
|
||||
after: "topic-category-status",
|
||||
});
|
||||
|
||||
columns.add("topic-likes-replies", {
|
||||
item: TopicLikesReplies,
|
||||
after: "topic-author-avatar",
|
||||
});
|
||||
columns.delete("posters");
|
||||
columns.delete("views");
|
||||
columns.delete("replies");
|
||||
if (!router.currentRouteName.includes("userPrivateMessages")) {
|
||||
columns.add("topic-activity", {
|
||||
item: TopicActivity,
|
||||
after: "title",
|
||||
});
|
||||
columns.delete("posters");
|
||||
columns.delete("activity");
|
||||
}
|
||||
return columns;
|
||||
}
|
||||
);
|
||||
@@ -69,12 +66,8 @@ export default {
|
||||
api.registerValueTransformer(
|
||||
"topic-list-item-class",
|
||||
({ value: classes, context }) => {
|
||||
if (
|
||||
context.topic.is_hot ||
|
||||
context.topic.pinned ||
|
||||
context.topic.pinned_globally
|
||||
) {
|
||||
classes.push("--has-status-card");
|
||||
if (context.topic.pinned || context.topic.pinned_globally) {
|
||||
classes.push("--pinned");
|
||||
}
|
||||
return classes;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
import Service, { service } from "@ember/service";
|
||||
import { DEFAULT_PALETTE_NAME } from "../components/custom-user-palette";
|
||||
|
||||
const CUSTOM_COLOR_KEY = "d-custom-color-preference";
|
||||
|
||||
export default class CustomColor extends Service {
|
||||
@service keyValueStore;
|
||||
@tracked
|
||||
color = this.keyValueStore.getItem(CUSTOM_COLOR_KEY) || DEFAULT_PALETTE_NAME;
|
||||
|
||||
@action
|
||||
setColor(color) {
|
||||
this.color = color;
|
||||
this.keyValueStore.setItem(CUSTOM_COLOR_KEY, color);
|
||||
}
|
||||
}
|
||||
+7
-3
@@ -1,8 +1,12 @@
|
||||
en:
|
||||
theme_metadata:
|
||||
description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
|
||||
topic_bookmarked: "Bookmarked"
|
||||
topic_closed_archived: "Closed and archived"
|
||||
topic_closed: "Closed"
|
||||
topic_archived: "Archived"
|
||||
topic_warning: "Warning"
|
||||
topic_personal_message: "Personal message"
|
||||
topic_pinned: "Pinned"
|
||||
topic_unpinned: "Unpinned"
|
||||
topic_hot: "Hot"
|
||||
user_replied: "replied"
|
||||
user_posted: "posted"
|
||||
user_updated: "updated"
|
||||
|
||||
+5
-6
@@ -1,14 +1,13 @@
|
||||
{
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@discourse/lint-configs": "2.11.1",
|
||||
"ember-template-lint": "7.0.1",
|
||||
"eslint": "9.22.0",
|
||||
"prettier": "3.5.3",
|
||||
"stylelint": "16.16.0"
|
||||
"@discourse/lint-configs": "2.4.0",
|
||||
"ember-template-lint": "6.1.0",
|
||||
"eslint": "9.19.0",
|
||||
"prettier": "2.8.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 22",
|
||||
"node": ">= 18",
|
||||
"npm": "please-use-pnpm",
|
||||
"yarn": "please-use-pnpm",
|
||||
"pnpm": "9.x"
|
||||
|
||||
Generated
+1311
-1177
File diff suppressed because it is too large
Load Diff
+12
-31
@@ -18,48 +18,38 @@
|
||||
}
|
||||
|
||||
.has-full-page-chat .chat-replying-indicator-container {
|
||||
margin-bottom: var(--main-grid-gap);
|
||||
|
||||
margin-bottom: var(--d-border-radius-large);
|
||||
@include breakpoint(medium) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat .chat-selection-management {
|
||||
margin-bottom: var(--main-grid-gap);
|
||||
|
||||
margin-bottom: var(--d-border-radius-large);
|
||||
@include breakpoint(medium) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.experimental-screen {
|
||||
@include breakpoint(medium) {
|
||||
display: none;
|
||||
}
|
||||
max-width: unset !important;
|
||||
@media screen and (max-width: 488px) {
|
||||
display: none;
|
||||
}
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
container: content-width / inline-size;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 488px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__top-left,
|
||||
&__top-right,
|
||||
&__bottom-left,
|
||||
@@ -69,45 +59,38 @@
|
||||
height: var(--d-border-radius-large);
|
||||
background-color: var(--background-color);
|
||||
z-index: 399;
|
||||
mask: radial-gradient(
|
||||
-webkit-mask: radial-gradient(
|
||||
circle at var(--d-border-radius-large) var(--d-border-radius-large),
|
||||
transparent var(--d-border-radius-large),
|
||||
transparent var(--d-border-radius-large),
|
||||
black var(--d-border-radius-large)
|
||||
);
|
||||
}
|
||||
|
||||
&__top-left {
|
||||
top: var(--header-offset);
|
||||
left: var(--left-distance);
|
||||
}
|
||||
|
||||
&__top-right {
|
||||
top: var(--header-offset);
|
||||
transform: rotate(90deg);
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
}
|
||||
|
||||
&__bottom-left {
|
||||
transform: rotate(-90deg);
|
||||
bottom: var(--main-grid-gap);
|
||||
bottom: var(--d-border-radius-large);
|
||||
left: var(--left-distance);
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom-right {
|
||||
transform: rotate(180deg);
|
||||
bottom: var(--main-grid-gap);
|
||||
bottom: var(--d-border-radius-large);
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@@ -115,12 +98,10 @@
|
||||
background-color: var(--background-color);
|
||||
bottom: 0;
|
||||
left: var(--left-distance);
|
||||
height: var(--main-grid-gap);
|
||||
|
||||
height: var(--d-border-radius-large);
|
||||
@media screen and (max-width: 768px) {
|
||||
height: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
|
||||
@container content-width (width > 1px) {
|
||||
width: 100cqw;
|
||||
}
|
||||
|
||||
+8
-31
@@ -8,13 +8,11 @@
|
||||
|
||||
.sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
|
||||
background: var(--accent-color);
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: oklch(from var(--accent-color) 40% c h) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
@@ -28,37 +26,31 @@
|
||||
.discourse-no-touch .btn-default,
|
||||
.discourse-no-touch .select-kit .select-kit-header.btn-default {
|
||||
background: var(--primary-100);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 8px 1px var(--button-box-shadow);
|
||||
box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
|
||||
background: var(--d-content-background);
|
||||
color: var(--accent-color);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background: var(--d-content-background);
|
||||
color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px var(--button-box-shadow);
|
||||
|
||||
box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active:not(:hover, :focus) {
|
||||
color: var(--primary);
|
||||
background: var(--tertiary-300);
|
||||
background-image: none;
|
||||
|
||||
.d-icon {
|
||||
color: var(--tertiary-high);
|
||||
}
|
||||
@@ -66,45 +58,30 @@
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
#create-topic.btn,
|
||||
.discourse-no-touch .btn-default.ai-new-question-button {
|
||||
#create-topic.btn {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--accent-text-color);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
background: light-dark(
|
||||
oklch(from var(--accent-color) 40% c h),
|
||||
oklch(from var(--accent-color) 50% c h)
|
||||
);
|
||||
box-shadow: 0 0 6px 1px var(--button-box-shadow);
|
||||
background: oklch(from var(--accent-color) 40% c h) !important;
|
||||
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
|
||||
color: var(--accent-text-color);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
.discourse-no-touch & {
|
||||
background: light-dark(
|
||||
oklch(from var(--accent-color) 40% c h),
|
||||
oklch(from var(--accent-color) 50% c h)
|
||||
);
|
||||
box-shadow: 0 0 0 4px var(--button-box-shadow);
|
||||
background: oklch(from var(--accent-color) 40% c h) !important;
|
||||
box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: light-dark(
|
||||
oklch(from var(--accent-color) 40% c h),
|
||||
oklch(from var(--accent-color) 50% c h)
|
||||
);
|
||||
background: oklch(from var(--accent-color) 30% c h) !important;
|
||||
}
|
||||
}
|
||||
|
||||
+2
-31
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.full-page-chat.full-page-chat-sidebar-enabled {
|
||||
border: none;
|
||||
}
|
||||
@@ -15,9 +13,8 @@ body.has-full-page-chat {
|
||||
|
||||
.chat-drawer-container {
|
||||
.is-expanded & {
|
||||
box-shadow: 0 0 0 2px var(--tertiary-medium);
|
||||
box-shadow: 0px 0px 0px 2px var(--d-chat-border);
|
||||
}
|
||||
|
||||
.chat-drawer.is-expanded & {
|
||||
border: none;
|
||||
}
|
||||
@@ -25,29 +22,13 @@ body.has-full-page-chat {
|
||||
|
||||
.chat-drawer-outlet-container {
|
||||
z-index: z("composer", "content");
|
||||
|
||||
.peek-mode-active & {
|
||||
padding-bottom: 0;
|
||||
left: unset;
|
||||
right: var(--main-grid-gap);
|
||||
|
||||
&:has(.is-expanded) {
|
||||
z-index: calc(z("composer", "dropdown") + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer {
|
||||
.peek-mode-active & {
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer .channels-list-container .chat-channel-row {
|
||||
margin-bottom: var(--spacing-block-xs);
|
||||
font-size: var(--font-up-1);
|
||||
border-radius: var(--d-border-radius);
|
||||
border-bottom: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--d-sidebar-active-background);
|
||||
}
|
||||
@@ -70,13 +51,3 @@ body.has-full-page-chat {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
|
||||
z-index: z("composer", "content") + 1;
|
||||
}
|
||||
|
||||
.chat-replying-indicator-container {
|
||||
@include viewport.from(sm) {
|
||||
margin-left: calc(0.65em + 0.2rem);
|
||||
}
|
||||
}
|
||||
|
||||
+25
-5
@@ -1,24 +1,20 @@
|
||||
.user-color-palette-menu {
|
||||
.color-palette-menu {
|
||||
&__item .btn-icon-text.btn-flat {
|
||||
background-color: var(--d-content-background);
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&__item .btn-icon-text.btn-flat:hover {
|
||||
background-color: var(--d-selected);
|
||||
box-shadow: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&__item .btn-icon-text.btn-flat:hover svg {
|
||||
color: var(--icon-color);
|
||||
}
|
||||
|
||||
&__item .btn-icon-text.btn-flat svg {
|
||||
color: var(--icon-color);
|
||||
}
|
||||
|
||||
&__item-choice.active.btn-icon-text.btn-flat {
|
||||
background-color: var(--d-selected);
|
||||
}
|
||||
@@ -27,3 +23,27 @@
|
||||
.user-color-palette-content .fk-d-menu__inner-content {
|
||||
border: none;
|
||||
}
|
||||
|
||||
html.custom-color-horizon {
|
||||
--accent-base-color: #595bca;
|
||||
}
|
||||
|
||||
html.custom-color-marigold {
|
||||
--accent-base-color: #d3881f;
|
||||
}
|
||||
|
||||
html.custom-color-violet {
|
||||
--accent-base-color: #9b15de;
|
||||
}
|
||||
|
||||
html.custom-color-lily {
|
||||
--accent-base-color: #cc338c;
|
||||
}
|
||||
|
||||
html.custom-color-clover {
|
||||
--accent-base-color: #45a06e;
|
||||
}
|
||||
|
||||
html.custom-color-royal {
|
||||
--accent-base-color: #4169e1;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,108 @@
|
||||
:root {
|
||||
--accent-base-color: #595bca;
|
||||
--accent-color: light-dark(
|
||||
var(--accent-base-color),
|
||||
oklch(from var(--accent-base-color) calc(l * 0.95) c h)
|
||||
);
|
||||
// --background-color: light-dark(#f5f8ff, #101112);
|
||||
--background-color: light-dark(
|
||||
oklch(from var(--accent-color) 98% calc(c * 0.25) h),
|
||||
oklch(from var(--accent-color) 10% 0.025 h)
|
||||
);
|
||||
--header_primary-low-mid: light-dark(
|
||||
oklch(from var(--background-color) calc(l * 0.75) calc(c * 2) h),
|
||||
oklch(from var(--accent-color) calc(l * 1) calc(c * 0.25) h)
|
||||
);
|
||||
--header_primary-medium: light-dark(
|
||||
oklch(from var(--background-color) calc(l * 0.55) calc(c * 2) h),
|
||||
oklch(from var(--accent-color) calc(l * 1.35) calc(c * 0.25) h)
|
||||
);
|
||||
--d-content-background: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 2) 0 h),
|
||||
oklch(from var(--accent-color) calc(l * 0.375) 0 h)
|
||||
);
|
||||
--primary-100: light-dark(#f2f2f2, #333333);
|
||||
--primary-300: light-dark(#d1d1d1, #838383);
|
||||
--primary-low: light-dark(#e9e9e9, #313131);
|
||||
--primary-high: light-dark(#646464, #a6a6a6);
|
||||
--primary-very-high: light-dark(#434343, #c7c7c7);
|
||||
--d-hover: oklch(from var(--d-selected) l c h / 0.75);
|
||||
--tertiary: var(--accent-color);
|
||||
--tertiary-medium: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
|
||||
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.25) h)
|
||||
);
|
||||
--tertiary-very-low: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 1.75) calc(c * 0.25) h),
|
||||
oklch(from var(--accent-color) calc(l * 0.5) calc(c * 0.25) h)
|
||||
);
|
||||
--tertiary-med-or-tertiary: var(--accent-color);
|
||||
--tertiary-low: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 1.6) calc(c * 0.25) h),
|
||||
oklch(from var(--accent-color) calc(l * 0.6) calc(c * 0.25) h)
|
||||
);
|
||||
--tertiary-300: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h),
|
||||
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h)
|
||||
);
|
||||
--tertiary-high: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 1) c h),
|
||||
oklch(from var(--accent-color) calc(l * 1) c h)
|
||||
);
|
||||
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
|
||||
--search-color: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
|
||||
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h)
|
||||
);
|
||||
--search-banner-text-color: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
|
||||
oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
|
||||
);
|
||||
--topic-card-shadow: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 1.85) calc(c * 0.5) h),
|
||||
oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
|
||||
);
|
||||
--button-box-shadow: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.35) h),
|
||||
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
|
||||
);
|
||||
--d-selected: light-dark(
|
||||
oklch(from var(--background-color) calc(l * 0.9375) calc(c * 2) h),
|
||||
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
|
||||
);
|
||||
--d-sidebar-highlight-hover-background: var(--d-selected);
|
||||
--d-sidebar-border-color: light-dark(
|
||||
oklch(from var(--background-color) calc(l * 0.9) calc(c * 1) h),
|
||||
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
|
||||
);
|
||||
--d-chat-border: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
|
||||
oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
|
||||
);
|
||||
--accent-text-color: light-dark(#ffffff, #212121);
|
||||
--d-nav-color--active: var(--accent-color);
|
||||
--d-sidebar-background: var(--background-color);
|
||||
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
|
||||
--d-sidebar-link-color: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 0.8) calc(c * 0.25) h),
|
||||
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h)
|
||||
);
|
||||
--d-sidebar-link-icon-color: var(--d-sidebar-link-color);
|
||||
--d-sidebar-header-color: var(--d-sidebar-link-color);
|
||||
--d-sidebar-header-icon-color: var(--d-sidebar-link-color);
|
||||
--d-sidebar-suffix-color: light-dark(
|
||||
oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h),
|
||||
oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h)
|
||||
);
|
||||
--d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
|
||||
--d-sidebar-background: var(--background-color);
|
||||
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
|
||||
--link-color: light-dark(
|
||||
var(--accent-base-color),
|
||||
oklch(from var(--accent-base-color) calc(l * 0.95) c h)
|
||||
);
|
||||
--link-color-hover: light-dark(
|
||||
var(--accent-base-color),
|
||||
oklch(from var(--accent-base-color) calc(l * 1.5) calc(c * 2.25) h)
|
||||
);
|
||||
--d-sidebar-prefix-background: var(--d-selected);
|
||||
--d-sidebar-active-prefix-background: light-dark(
|
||||
oklch(from var(--d-selected) calc(l * 0.85) c h),
|
||||
@@ -20,7 +116,6 @@
|
||||
--d-sidebar-highlight-color: var(--primary);
|
||||
--d-sidebar-highlight-background: var(--d-selected);
|
||||
--d-sidebar-section-link-icon-size: 1em;
|
||||
--d-hover: oklch(from var(--d-selected) l c h / 0.75);
|
||||
--d-input-bg-color: var(--d-content-background);
|
||||
--d-sidebar-active-color: var(--primary) !important;
|
||||
--tertiary-hover: var(--accent-color);
|
||||
}
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
.peek-mode-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
html:not(.fullscreen-composer) {
|
||||
.peek-mode-toggle svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
&.composer-open {
|
||||
.full-width-enabled .peek-mode-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.full-width-enabled.peek-mode-active {
|
||||
#reply-control.hide-preview {
|
||||
transition: none;
|
||||
box-shadow: none;
|
||||
border-radius: var(--d-border-radius-large);
|
||||
|
||||
.grippie {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reply-area {
|
||||
padding-inline: 0.67em;
|
||||
}
|
||||
}
|
||||
|
||||
#reply-control:not(.fullscreen).hide-preview {
|
||||
width: 100%;
|
||||
right: var(--main-grid-gap);
|
||||
top: var(--header-offset);
|
||||
bottom: var(--main-grid-gap);
|
||||
left: unset;
|
||||
height: unset;
|
||||
max-width: 36.5vw;
|
||||
}
|
||||
|
||||
&.has-sidebar-page {
|
||||
#main-outlet-wrapper {
|
||||
grid-template-columns:
|
||||
var(--d-sidebar-width) calc(100vw - 38vw - var(--d-sidebar-width))
|
||||
1fr;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.has-sidebar-page) {
|
||||
#main-outlet-wrapper {
|
||||
grid-template-columns: 0 calc(100vw - 52vw) 1fr;
|
||||
}
|
||||
|
||||
#reply-control:not(.fullscreen).hide-preview {
|
||||
max-width: 46vw;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper .sidebar-container {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+1
-80
@@ -3,66 +3,12 @@
|
||||
.select-kit-header {
|
||||
border: 1px solid var(--tertiary-700);
|
||||
background: var(--secondary);
|
||||
|
||||
&:hover {
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#reply-control.hide-preview:not(.draft) {
|
||||
@include breakpoint("mobile-extra-large", $rule: min-width) {
|
||||
background: var(--d-content-background);
|
||||
border-top-right-radius: var(--d-border-radius);
|
||||
border-top-left-radius: var(--d-border-radius);
|
||||
|
||||
.grippie {
|
||||
background: var(--tertiary-low);
|
||||
border-top-right-radius: var(--d-border-radius);
|
||||
border-top-left-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.user-selector,
|
||||
.title-and-category {
|
||||
padding: 0 var(--spacing-inline-m);
|
||||
width: calc(100% - var(--spacing-inline-m) * 2);
|
||||
}
|
||||
|
||||
.d-editor-button-bar {
|
||||
padding: 3px var(--spacing-inline-m);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.d-editor-input {
|
||||
padding: var(--spacing-inline-m);
|
||||
}
|
||||
|
||||
&:has(.in-focus) .grippie {
|
||||
background: var(--tertiary);
|
||||
}
|
||||
|
||||
.reply-area {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.reply-to,
|
||||
.submit-panel {
|
||||
padding-inline: var(--spacing-inline-sm);
|
||||
}
|
||||
|
||||
.d-editor-textarea-wrapper {
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
border-radius: 0;
|
||||
|
||||
&.in-focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-editor-button-bar {
|
||||
.btn:hover,
|
||||
.toolbar-popup-menu-options.is-expanded {
|
||||
@@ -74,12 +20,11 @@
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// to have parity with regular select-kit styling used elsewhere
|
||||
//to have parity with regular select-kit styling used elsewhere
|
||||
.select-kit-row {
|
||||
.d-icon {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.d-icon {
|
||||
color: var(--primary);
|
||||
@@ -93,27 +38,3 @@
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-no-touch .translation-selector-dropdown {
|
||||
.select-kit-header.btn-default {
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
#reply-control.composer-action-add_translation {
|
||||
.d-editor-preview .d-editor-translation-preview-wrapper {
|
||||
border-color: var(--d-sidebar-border-color);
|
||||
}
|
||||
|
||||
.d-editor-preview .d-editor-translation-preview-wrapper__header {
|
||||
top: 6.5rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: var(--background-color);
|
||||
color: var(--accent-color);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
}
|
||||
|
||||
.topic-title-translator input {
|
||||
width: 47.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,274 +0,0 @@
|
||||
// Full width layout. Ported from the Discourse Full Width theme component here
|
||||
// https://meta.discourse.org/t/discourse-full-width-component/292496, which we
|
||||
// intend to move into core over time.
|
||||
//
|
||||
// We are copying this here so we can continue to iterate on Horizon with full
|
||||
// width without having to include the theme component as a dependency, we
|
||||
// need to remove this once full width is in core.
|
||||
|
||||
$sidebar-width: 17em;
|
||||
|
||||
.wrap {
|
||||
max-width: unset; // undoing core default
|
||||
}
|
||||
|
||||
.d-header #site-logo {
|
||||
// this prevents the logo from shifting header content
|
||||
// when the sidebar is opened
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain; // contains logo without squishing/stretching
|
||||
|
||||
// allows some flexibility for wide logos
|
||||
body:not(.has-sidebar-page) & {
|
||||
max-width: unset;
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
max-width: 25vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-header #site-text-logo {
|
||||
font-size: clamp(var(--font-0), 2.5vw, var(--font-up-2));
|
||||
|
||||
.has-sidebar-page & {
|
||||
white-space: wrap;
|
||||
line-height: var(--line-height-medium);
|
||||
|
||||
@include line-clamp(2);
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
padding: 0;
|
||||
|
||||
body.has-sidebar-page & {
|
||||
.sidebar-wrapper {
|
||||
width: var(--d-sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
body.has-full-page-chat & {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
width: 100%; // safari has issues without this
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
margin: 0 auto;
|
||||
max-width: var(--d-max-width);
|
||||
width: 100%;
|
||||
|
||||
body.has-full-page-chat & {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat:not(.discourse-sidebar) .full-page-chat {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#main-outlet > .regular {
|
||||
max-width: var(--d-max-width);
|
||||
margin: 0 auto;
|
||||
|
||||
body.has-sidebar-page & {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.d-header .title:not(.title--minimized) {
|
||||
// allowing overflow here isn't always ideal
|
||||
// but works well enough most of the time
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.d-header {
|
||||
> .wrap {
|
||||
.contents {
|
||||
display: grid;
|
||||
grid-template-areas: "logo lspace extra-info rspace panel";
|
||||
grid-template-columns:
|
||||
minmax(auto, 1fr)
|
||||
auto
|
||||
minmax(0, calc(var(--d-max-width)))
|
||||
auto
|
||||
minmax(auto, 1fr);
|
||||
|
||||
.d-header-mode {
|
||||
grid-area: extra-info;
|
||||
white-space: nowrap;
|
||||
|
||||
@include breakpoint("tablet") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.d-header .title {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.has-sidebar-page & {
|
||||
// at wide widths, when 1fr > 0
|
||||
// we want the panel to be the same width as the sidebar
|
||||
// this way we can get more accurate centering
|
||||
grid-template-columns:
|
||||
calc(var(--d-sidebar-width) - 11px) // 11px is wrap padding
|
||||
1fr
|
||||
minmax(0, calc(var(--d-max-width)))
|
||||
1fr
|
||||
minmax(0, calc(var(--d-sidebar-width) - 11px));
|
||||
gap: 1em;
|
||||
|
||||
// at narrower widths, when 1fr = 0
|
||||
// we can center without matching the sidebar's width
|
||||
// which allows the title to take up the remaining width
|
||||
@media screen and (max-width: 1400px) {
|
||||
grid-template-columns:
|
||||
calc(var(--d-sidebar-width) - 11px)
|
||||
1fr
|
||||
minmax(0, calc(var(--d-max-width)))
|
||||
1fr
|
||||
auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.d-header-mode {
|
||||
grid-area: extra-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-sidebar-toggle {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
.before-header-panel-outlet {
|
||||
grid-area: extra-info;
|
||||
}
|
||||
|
||||
.d-header-mode {
|
||||
.bootstrap-mode {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.home-logo-wrapper-outlet {
|
||||
grid-area: logo;
|
||||
margin-left: 3.7em; // 2.7em hamburger width + 1em for margin
|
||||
margin-right: 0.725em;
|
||||
display: flex;
|
||||
overflow: visible;
|
||||
|
||||
.title {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
grid-area: panel;
|
||||
}
|
||||
}
|
||||
|
||||
.extra-info-wrapper {
|
||||
grid-area: extra-info;
|
||||
max-width: var(--d-max-width);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header-search--enabled .floating-search-input-wrapper {
|
||||
grid-area: extra-info;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
grid-area: rspace;
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.has-sidebar-page {
|
||||
.wrap {
|
||||
max-width: unset; // undoing core default
|
||||
}
|
||||
|
||||
.d-header-mode,
|
||||
.extra-info-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
|
||||
#reply-control.show-preview {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
|
||||
#reply-control.show-preview:not(.fullscreen) {
|
||||
margin-left: $sidebar-width;
|
||||
width: auto;
|
||||
|
||||
// overruling new core composer changes
|
||||
max-width: $reply-area-max-width;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// overruling new core composer changes
|
||||
@media screen and (min-width: $reply-area-max-width) {
|
||||
#reply-control.show-preview:not(.fullscreen) {
|
||||
max-width: $reply-area-max-width;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.sidebar-animate {
|
||||
#main-outlet-wrapper {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.d-header-wrap .wrap {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.d-header-icons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.d-header .title {
|
||||
margin-right: 3.7em; // 2.7em hamburger width + 1em for margin
|
||||
margin-left: 0.725em;
|
||||
}
|
||||
}
|
||||
|
||||
// provides some extra space for login buttons
|
||||
@media screen and (min-width: 1400px) {
|
||||
.anon {
|
||||
.d-header .panel {
|
||||
grid-column-start: -4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
// Fixing bulk select (only needed for desktop)
|
||||
.bulk-select-enabled {
|
||||
.topic-list-header .topic-list-data.default {
|
||||
position: sticky;
|
||||
top: 10em;
|
||||
}
|
||||
|
||||
.topic-author-avatar-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bulk-select.topic-list-data {
|
||||
grid-area: bulk-select;
|
||||
margin-left: -0.5em;
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
margin-top: 0;
|
||||
|
||||
label {
|
||||
padding-block: 0.345em;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-header {
|
||||
tr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.topic-list-data {
|
||||
padding: 0;
|
||||
|
||||
&:not(.default) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.default {
|
||||
.bulk-select,
|
||||
span:not(.bulk-select-topics, .d-button-label) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-select-topics {
|
||||
position: absolute;
|
||||
right: -1em;
|
||||
background: var(--secondary);
|
||||
border-radius: 0 0 0 var(--d-border-radius);
|
||||
padding: 1em;
|
||||
|
||||
@media screen and (max-width: 1048px) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
+131
-11
@@ -1,12 +1,15 @@
|
||||
.d-header {
|
||||
box-shadow: none;
|
||||
background: var(--background-color);
|
||||
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
padding-bottom: var(--main-grid-gap);
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat .d-header {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.user-menu .quick-access-panel,
|
||||
.user-notifications-list {
|
||||
li {
|
||||
@@ -41,18 +44,15 @@
|
||||
.d-header-icons
|
||||
.header-color-scheme-toggle
|
||||
.-expanded
|
||||
> .d-icon,
|
||||
.discourse-no-touch .header-sidebar-toggle button:hover .d-icon {
|
||||
> .d-icon {
|
||||
color: var(--header_primary-medium);
|
||||
}
|
||||
|
||||
.discourse-no-touch .interface-color-selector-content {
|
||||
border: none;
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -62,6 +62,10 @@
|
||||
.drop-down-mode .d-header-icons .active .icon,
|
||||
.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.drop-down-mode .d-header-icons .active .icon,
|
||||
.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -69,6 +73,16 @@
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
|
||||
/*
|
||||
.user-menu .quick-access-panel li,
|
||||
.user-notifications-list li,
|
||||
.user-menu .quick-access-panel li.do-not-disturb,
|
||||
.menu-panel .panel-body-bottom .btn,
|
||||
.menu-panel .panel-body-bottom .btn:hover {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
*/
|
||||
|
||||
body.login-page,
|
||||
body.signup-page,
|
||||
body.invite-page,
|
||||
@@ -79,10 +93,116 @@ body.activate-account-page {
|
||||
}
|
||||
}
|
||||
|
||||
.header-dropdown-toggle.chat-header-icon .icon .chat-channel-unread-indicator {
|
||||
border-color: var(--background-color);
|
||||
}
|
||||
// attempt to center the title
|
||||
// by mirroring the body grid
|
||||
|
||||
.d-header-icons .badge-notification {
|
||||
border-color: var(--background-color);
|
||||
.has-sidebar-page {
|
||||
.d-header > .wrap {
|
||||
.contents {
|
||||
display: grid;
|
||||
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
|
||||
grid-template-rows: auto;
|
||||
gap: 0; // gap will ruin the alignment
|
||||
|
||||
.header-sidebar-toggle,
|
||||
.home-logo-wrapper-outlet {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.home-logo-wrapper-outlet {
|
||||
margin-left: 3.5em;
|
||||
margin-right: 0;
|
||||
max-width: 13em; // crosses into column 2 beyond this
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.extra-info-wrapper {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
|
||||
justify-self: center;
|
||||
|
||||
max-width: 59em; // width of topic + timeline
|
||||
padding: 0;
|
||||
|
||||
@media screen and (max-width: 1350px) {
|
||||
justify-self: start;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding-left: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
justify-self: end;
|
||||
|
||||
padding-right: 1em;
|
||||
|
||||
// the title and panel don't exist on the same plane
|
||||
// so we let the panel overlap the title
|
||||
// and fade it out so it looks intentional
|
||||
|
||||
background: var(--background-color);
|
||||
|
||||
@media screen and (max-width: 850px) {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
var(--background-color) 80%
|
||||
);
|
||||
@media screen and (max-width: 850px) {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
var(--secondary) 80%
|
||||
);
|
||||
}
|
||||
top: -0.5em;
|
||||
bottom: 0;
|
||||
height: 4em;
|
||||
width: 3em;
|
||||
left: -3em;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// these will probably cause problems when used
|
||||
.before-header-panel-outlet,
|
||||
.after-header-panel-outlet {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.before-header-panel-outlet {
|
||||
&:has(.search-banner) {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.floating-search-input {
|
||||
margin-left: 2.75em;
|
||||
padding-right: 15em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
&.search-header--visible
|
||||
.floating-search-input
|
||||
.search-banner-inner.wrap
|
||||
.search-menu {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
.notifications-button-footer .reason .text,
|
||||
.pinned-button .reason .text,
|
||||
.more-topics__browse-more,
|
||||
// footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
|
||||
//footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
|
||||
.footer-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
body.static-login {
|
||||
#main-outlet-wrapper {
|
||||
grid-template-areas:
|
||||
"sidebar blank"
|
||||
"sidebar content"
|
||||
"sidebar below-content";
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
.login-welcome {
|
||||
border-radius: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
+28
-45
@@ -1,40 +1,28 @@
|
||||
:root {
|
||||
--main-grid-gap: 0.5em;
|
||||
--main-grid-gap: 2em;
|
||||
}
|
||||
|
||||
html:not(:has(.has-full-page-chat)) {
|
||||
background-color: var(--background-color);
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
gap: var(--main-grid-gap);
|
||||
}
|
||||
|
||||
body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
|
||||
grid-column-gap: var(--main-grid-gap);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
body.has-full-page-chat:not(.has-sidebar-page) {
|
||||
.d-header {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
gap: var(--main-grid-gap);
|
||||
|
||||
@include breakpoint(medium) {
|
||||
gap: 0;
|
||||
}
|
||||
@@ -42,8 +30,7 @@ body.has-full-page-chat:not(.has-sidebar-page) {
|
||||
}
|
||||
|
||||
body.has-sidebar-page #main-outlet-wrapper {
|
||||
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0;
|
||||
|
||||
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0px;
|
||||
#main-outlet {
|
||||
max-width: unset;
|
||||
}
|
||||
@@ -51,47 +38,53 @@ body.has-sidebar-page #main-outlet-wrapper {
|
||||
|
||||
body:not(.has-sidebar-page) #main-outlet-wrapper {
|
||||
@include breakpoint(medium, $rule: min-width) {
|
||||
grid-template-columns: 0 minmax(0, 1fr) 0;
|
||||
grid-template-columns: 0px minmax(0, 1fr) 0px;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat, .wizard) {
|
||||
body:not(.has-full-page-chat) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
@include breakpoint(medium) {
|
||||
--main-grid-gap: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
@include breakpoint(tablet, $rule: min-width) {
|
||||
gap: var(--main-grid-gap);
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
padding-bottom: var(--spacing-block-l);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
background-color: var(--d-content-background);
|
||||
|
||||
@include breakpoint(medium) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html.composer-open & {
|
||||
padding-bottom: var(--composer-height);
|
||||
}
|
||||
|
||||
> *:not(.experimental-screen, .activate-account) {
|
||||
max-width: unset;
|
||||
//thanks to random container elements on the page, I can't do a direct child selector here because it targets all the randomness, so I see no other option than MANUALLY adding every possible element that can appear in the main outlet YAY
|
||||
.list-controls,
|
||||
.list-container,
|
||||
#topic-title,
|
||||
.container.posts,
|
||||
#topic-footer-buttons,
|
||||
.more-topics__container,
|
||||
.welcome-banner,
|
||||
.container .user-main,
|
||||
.reviewable,
|
||||
.admin-content,
|
||||
.discourse-post-event-upcoming-events,
|
||||
.container.groups-index,
|
||||
.body-page,
|
||||
.container.badges,
|
||||
.topic-above-footer-buttons-outlet .presence-users,
|
||||
.global-notice {
|
||||
@include breakpoint(medium, $rule: min-width) {
|
||||
box-sizing: border-box;
|
||||
max-width: 1000px;
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--spacing-inline-l);
|
||||
}
|
||||
}
|
||||
border-radius: var(--d-border-radius-large);
|
||||
@include breakpoint(medium) {
|
||||
border-radius: 0px;
|
||||
}
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -110,7 +103,6 @@ body:not(.has-full-page-chat, .wizard) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-body {
|
||||
padding-top: var(--spacing-block-m);
|
||||
}
|
||||
@@ -125,12 +117,3 @@ aside.onebox {
|
||||
padding: 1em;
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.no-ember {
|
||||
#main-outlet {
|
||||
border-radius: var(--d-border-radius-large);
|
||||
margin: 0 var(--main-grid-gap) var(--main-grid-gap) var(--main-grid-gap);
|
||||
padding: 2em;
|
||||
max-height: calc(100vh - 50px - 1em - var(--main-grid-gap));
|
||||
}
|
||||
}
|
||||
|
||||
+8
-15
@@ -8,7 +8,7 @@
|
||||
}
|
||||
|
||||
.powered-by-discourse {
|
||||
z-index: 400;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.boxed.white {
|
||||
@@ -40,6 +40,10 @@
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.d-editor-button-bar {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.open .grippie {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
@@ -69,11 +73,8 @@ input[type="color"]:focus,
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
// pinned topic excerpts are hidden on small screens too
|
||||
.fk-d-menu__trigger.topic-list-layout-trigger {
|
||||
display: none;
|
||||
}
|
||||
.fk-d-menu__trigger.topic-list-layout-trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-container .search-header,
|
||||
@@ -85,7 +86,7 @@ input[type="color"]:focus,
|
||||
|
||||
.user-main .about .details {
|
||||
padding: 1em 1em 0;
|
||||
border-bottom: 0;
|
||||
border-bottom: 0px;
|
||||
border-radius: var(--d-border-radius);
|
||||
background-color: var(--primary-50);
|
||||
}
|
||||
@@ -97,11 +98,3 @@ input[type="color"]:focus,
|
||||
.discourse-reactions-list .reactions {
|
||||
gap: 0.15em;
|
||||
}
|
||||
|
||||
.group-details-container {
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.period-chooser-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
+26
-56
@@ -1,11 +1,10 @@
|
||||
// temp separate file to avoid merge hell… to be distributed later
|
||||
//temp sepeate file to avoid merge hell… to be distributed later
|
||||
@include breakpoint(medium) {
|
||||
html,
|
||||
.d-header {
|
||||
background-color: var(--d-content-background);
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
*[class*="navigation-"] & {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
@@ -13,7 +12,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-top: var(--spacing-block-sm);
|
||||
@@ -23,57 +21,43 @@
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: var(
|
||||
--spacing-inline-m
|
||||
) !important; // override will be fixed when the whole chat page shenanigans is resolved
|
||||
) !important; //override will be fixed when the whole chat page shenanigans is resolved
|
||||
padding-block: var(--spacing-block-s);
|
||||
border-bottom: 1px solid var(--primary-200);
|
||||
}
|
||||
|
||||
.navigation-container {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
gap: var(--spacing-inline-s);
|
||||
|
||||
// don't know why we even hide this crucial navigation on mobile
|
||||
//dont know why we even hide this crucial navigation on mobile
|
||||
.category-breadcrumb.hidden,
|
||||
.category-breadcrumb {
|
||||
display: flex !important;
|
||||
column-gap: var(--spacing-inline-s);
|
||||
row-gap: var(--spacing-block-xs);
|
||||
flex-basis: 100%;
|
||||
|
||||
li {
|
||||
margin-right: 0;
|
||||
margin-left: calc(
|
||||
(var(--spacing-block-s) - 2px) * -1
|
||||
); // 2px is width of the outline
|
||||
}
|
||||
|
||||
.select-kit-header {
|
||||
background: var(--d-content-background);
|
||||
padding-block: var(--spacing-block-s);
|
||||
padding-inline: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
border: 0;
|
||||
margin-right: 0;
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
}
|
||||
|
||||
.fk-d-button-tooltip {
|
||||
margin-right: 0;
|
||||
margin-left: var(
|
||||
--spacing-inline-xs
|
||||
); // pure visual correction for horizontal alignment
|
||||
|
||||
); //pure visual correction for horitzontal alignment
|
||||
&:has(#create-topic) {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navigation-bar,
|
||||
.navigation-controls,
|
||||
.category-breadcrumb {
|
||||
@@ -81,7 +65,6 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-controls {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
gap: var(--spacing-inline-s);
|
||||
@@ -101,21 +84,32 @@
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-item {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
//to be moved to topic card segment for general use
|
||||
// .navigation-category & {
|
||||
// .badge-category__wrapper {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topic-title {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: var(--spacing-inline-s) !important;
|
||||
padding-inline: var(--spacing-inline-m) !important;
|
||||
|
||||
.title-wrapper {
|
||||
gap: var(--spacing-block-s);
|
||||
}
|
||||
|
||||
.topic-category {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
// make mixin of this
|
||||
//make mixin of this
|
||||
.badge-category__wrapper {
|
||||
font-size: var(--font-down-2-rem);
|
||||
border-radius: var(--d-border-radius);
|
||||
@@ -137,15 +131,6 @@
|
||||
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
|
||||
);
|
||||
}
|
||||
|
||||
.discourse-tags {
|
||||
gap: var(--spacing-inline-xs);
|
||||
|
||||
&__tag-separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-tag {
|
||||
font-size: var(--font-down-2-rem);
|
||||
padding: var(--spacing-inline-xs) var(--spacing-inline-s);
|
||||
@@ -156,7 +141,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container.posts {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: var(--spacing-inline-xs) !important;
|
||||
@@ -164,6 +148,7 @@
|
||||
.main-avatar .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.topic-body {
|
||||
@@ -172,22 +157,18 @@
|
||||
font-size: var(--font-0-rem);
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
padding-top: var(--spacing-block-m);
|
||||
}
|
||||
}
|
||||
|
||||
.small-action {
|
||||
&-desc {
|
||||
padding: var(--spacing-block-xs) 0;
|
||||
}
|
||||
|
||||
// for core eventually, better way imo
|
||||
//for core eventually, better way imo
|
||||
.topic-avatar {
|
||||
padding-top: 0;
|
||||
align-items: center;
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
@@ -203,37 +184,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
// should be changed in core, should not be a primary btn
|
||||
// changing this into straight buttons to match the progress one, which doesn't work well with rounded corners
|
||||
//should be changed in core, should not be a primary btn
|
||||
//changing this into straight buttons to match the progress one, which doesnt work well with rounded corners
|
||||
#topic-progress-wrapper {
|
||||
.progress-back-container {
|
||||
margin-right: 0;
|
||||
margin-bottom: var(--spacing-block-xs);
|
||||
|
||||
.btn-primary.progress-back {
|
||||
border-radius: 0;
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--tertiary-low);
|
||||
color: var(--accent-color);
|
||||
padding: var(--spacing-inline-s) var(--spacing-inline-m);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-admin-menu-trigger {
|
||||
border-radius: 0;
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--tertiary-low);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-device #reply-control.show-preview .submit-panel {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.d-editor-preview-wrapper {
|
||||
outline: 2px solid var(--background-color);
|
||||
}
|
||||
|
||||
+6
-12
@@ -2,41 +2,36 @@
|
||||
position: sticky;
|
||||
top: var(--header-offset);
|
||||
background: var(--d-content-background);
|
||||
z-index: z("base");
|
||||
z-index: 100;
|
||||
padding: 1.5rem 0 1rem 0;
|
||||
max-width: unset;
|
||||
|
||||
.navigation-container {
|
||||
gap: 1rem;
|
||||
|
||||
.category-breadcrumb {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.combo-box .combo-box-header {
|
||||
// needs more specificity than just in the button file
|
||||
// needs more specificy than just in the button file
|
||||
background-color: var(--secondary);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
border: 1px solid var(--primary-300);
|
||||
|
||||
// font-size: var(--font-up-1-rem);
|
||||
&:hover {
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
.discourse-no-touch & {
|
||||
background: var(--secondary);
|
||||
color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px var(--button-box-shadow);
|
||||
|
||||
box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-kit.combo-box.category-drop.has-selection
|
||||
.category-drop-header:hover {
|
||||
border-color: transparent;
|
||||
@@ -52,8 +47,7 @@
|
||||
.nav-pills > li button:hover {
|
||||
.discourse-no-touch & {
|
||||
background: transparent;
|
||||
color: var(--d-nav-color--hover);
|
||||
|
||||
color: var(--accent-color);
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -61,7 +55,7 @@
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: var(--d-nav-underline-height);
|
||||
background: var(--d-nav-color--hover);
|
||||
background: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
.custom-search-banner-wrap {
|
||||
display: grid;
|
||||
grid-template-rows: 0.33fr 0.33fr 0.33fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 0.5em;
|
||||
border-bottom: 1px solid var(--primary-300);
|
||||
padding: 1.5em 0 2.5em;
|
||||
margin-bottom: 0;
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 1em;
|
||||
}
|
||||
h1 {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/-1;
|
||||
text-align: left;
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
color: var(--search-banner-text-color);
|
||||
@media screen and (max-width: 1028px) {
|
||||
font-size: var(--font-up-4);
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
text-align: left;
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/-1;
|
||||
font-size: var(--font-up-3);
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
.search-menu {
|
||||
grid-column: 2/3;
|
||||
grid-row: 1/-1;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
@media screen and (max-width: 1028px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-column: 2/-1;
|
||||
grid-row: 1/-1;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
.search-input {
|
||||
background: var(--d-content-background);
|
||||
border: 1px solid var(--search-color);
|
||||
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
|
||||
}
|
||||
.search-menu .search-input:focus-within,
|
||||
.search-menu-container .search-input:focus-within {
|
||||
border: 1px solid var(--search-color);
|
||||
outline: 2px solid var(--search-color);
|
||||
}
|
||||
.search-menu .d-icon,
|
||||
.search-menu .searching .d-icon {
|
||||
color: var(--search-color);
|
||||
}
|
||||
.panel-body {
|
||||
z-index: z("dropdown");
|
||||
}
|
||||
.results {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
.navigation-controls {
|
||||
.topic-drafts-menu-trigger,
|
||||
.fk-d-button-tooltip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-ai-conversations-sidebar {
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-new-topic-button {
|
||||
flex: 1 1 auto;
|
||||
|
||||
&__wrapper {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
.mobile-view & {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
&:has(.topic-drafts-menu-trigger) {
|
||||
.sidebar-new-topic-button {
|
||||
border-radius: var(--d-button-border-radius) 0 0
|
||||
var(--d-button-border-radius);
|
||||
border-right: 1px solid var(--primary-300);
|
||||
}
|
||||
}
|
||||
|
||||
.fk-d-button-tooltip {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.topic-drafts-menu-trigger {
|
||||
flex: 0 1 auto;
|
||||
margin: 0;
|
||||
border-radius: 0 var(--d-button-border-radius)
|
||||
var(--d-button-border-radius) 0;
|
||||
}
|
||||
|
||||
.fk-d-button-tooltip:has(button[disabled]) {
|
||||
+ .topic-drafts-menu-trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fk-d-tooltip__trigger {
|
||||
background: var(--accent-color);
|
||||
border-radius: 0 var(--d-button-border-radius)
|
||||
var(--d-button-border-radius) 0;
|
||||
padding-right: 0.65em;
|
||||
|
||||
.d-icon {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.sidebar-section-link-wrapper[data-list-item-name="New Topic"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.has-full-page-chat {
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
+3
-23
@@ -1,24 +1,18 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.sidebar-wrapper,
|
||||
.sidebar-hamburger-dropdown {
|
||||
@include breakpoint(medium) {
|
||||
background: var(--secondary);
|
||||
|
||||
.sidebar-footer-wrapper {
|
||||
background: var(--secondary);
|
||||
|
||||
.sidebar-footer-container::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat &,
|
||||
.has-full-page-chat & .sidebar-footer-wrapper {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
border-right: none;
|
||||
}
|
||||
@@ -26,37 +20,30 @@
|
||||
.sidebar-sections {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-section-link {
|
||||
transition: none;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.dropdown-menu__item .sidebar-section-link {
|
||||
border-radius: 0;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-wrapper {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
padding-block: 0.45em;
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
.hamburger-panel .revamped & {
|
||||
margin-bottom: var(--spacing-block-m);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-header {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
.sidebar-section-content {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
gap: var(--spacing-block-xs);
|
||||
}
|
||||
@@ -65,7 +52,6 @@
|
||||
|
||||
.sidebar-wrapper .sidebar-sections {
|
||||
--scrollbarThumbBg: var(--d-selected);
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.sidebar-section-link-wrapper .sidebar-section-link:focus,
|
||||
@@ -77,17 +63,11 @@
|
||||
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
margin: 0 var(--spacing-inline-m) var(--spacing-block-l);
|
||||
|
||||
.sidebar-new-topic-button .d-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// put the draft menu above the slide-out hamburger on small desktop screens
|
||||
@include viewport.until(md) {
|
||||
html:not(.mobile-view) {
|
||||
.topic-drafts-menu-content {
|
||||
z-index: z("modal", "overlay");
|
||||
}
|
||||
}
|
||||
.sidebar-wrapper .sidebar-sections {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
+192
-552
@@ -1,10 +1,22 @@
|
||||
// 390x844 – mobile/portrait – (Figma iPhone 13 & 14)
|
||||
// 744x1133 – tablet/portrait – (Figma iPad mini 8.3)
|
||||
// 1280x832 – desktop small – (Figma MacBook Air)
|
||||
|
||||
:root {
|
||||
--hot-color: oklch(63.79% 0.1823 34.77);
|
||||
}
|
||||
|
||||
$extra-small: 435px;
|
||||
$small: 576px;
|
||||
$medium: 980px;
|
||||
$extra-large: 1280px;
|
||||
|
||||
.topic-list .topic-list-item-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-list > .topic-list-body > .topic-list-item.last-visit {
|
||||
border-bottom: 1px solid var(--primary-300);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
@@ -15,109 +27,137 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
gap: 0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-body .topic-list-item {
|
||||
.bulk-select-enabled .topic-list-item {
|
||||
grid-template-areas:
|
||||
"bulk-select avatar author status status . activity"
|
||||
". topic-title topic-title topic-title likes-replies likes-replies category";
|
||||
.bulk-select {
|
||||
grid-area: bulk-select;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $medium) {
|
||||
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-rows: 22px minmax(22px, auto);
|
||||
grid-template-areas:
|
||||
"bulk-select avatar author status status . activity"
|
||||
". topic-title topic-title topic-title . . likes-replies"
|
||||
". topic-title topic-title topic-title . . category";
|
||||
}
|
||||
@media screen and (max-width: $small) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"bulk-select category-status category-status . . . . activity"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||
"avatar author . . . . . likes-replies";
|
||||
}
|
||||
}
|
||||
|
||||
body.user-messages-page .topic-list-item {
|
||||
.topic-category-status-data {
|
||||
display: none;
|
||||
}
|
||||
grid-template-areas:
|
||||
"avatar author status status . . activity"
|
||||
". topic-title topic-title topic-title likes-replies likes-replies likes-replies";
|
||||
&.excerpt-expanded {
|
||||
grid-template-columns: 44px repeat(6, 1fr) auto;
|
||||
grid-template-rows: 22px auto auto 30px;
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
|
||||
@media screen and (max-width: $extra-large) {
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
|
||||
". excerpt excerpt excerpt excerpt excerpt . likes-replies";
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $small) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title activity"
|
||||
"avatar author . . . . . likes-replies";
|
||||
.topic-excerpt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-item {
|
||||
text-overflow: ellipsis;
|
||||
padding: 0.75em 1rem;
|
||||
border: 1px solid var(--primary-300);
|
||||
display: grid;
|
||||
grid-template-columns: 20px min-content min-content auto min-content;
|
||||
grid-template-rows: auto minmax(20px, auto);
|
||||
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-rows: 22px minmax(22px, auto);
|
||||
grid-template-areas:
|
||||
". . . . status"
|
||||
"activity . . likes-replies category";
|
||||
"avatar author status status . . activity"
|
||||
". topic-title topic-title topic-title likes-replies likes-replies category";
|
||||
grid-column-gap: 12px;
|
||||
grid-row-gap: 8px;
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
td.main-link .link-top-line {
|
||||
grid-row: 1/2;
|
||||
grid-column: 1/-1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.--has-status-card td.main-link .link-top-line {
|
||||
grid-column: 1/-2;
|
||||
}
|
||||
|
||||
@include breakpoint(extra-large) {
|
||||
grid-template-areas:
|
||||
". . . . status"
|
||||
"activity . . likes-replies category";
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
td.main-link .link-top-line,
|
||||
&.--has-status-card td.main-link .link-top-line {
|
||||
grid-row: 2/3;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
grid-template-columns: 20px repeat(5, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"category category category category category status"
|
||||
". . . . . ."
|
||||
"activity . . . . likes-replies";
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--primary-200);
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.excerpt-expanded {
|
||||
grid-template-columns: 20px auto auto min-content min-content;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-columns: 44px repeat(6, 1fr) auto;
|
||||
grid-template-rows: 22px auto auto 30px;
|
||||
grid-template-areas:
|
||||
". . . . status"
|
||||
"activity . . . ."
|
||||
"excerpt excerpt excerpt likes-replies category";
|
||||
|
||||
@include breakpoint(extra-large) {
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt likes-replies category";
|
||||
@media screen and (max-width: $extra-large) {
|
||||
grid-template-areas:
|
||||
". . . . status"
|
||||
"activity . . . ."
|
||||
"excerpt excerpt excerpt likes-replies category";
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
|
||||
". excerpt excerpt excerpt excerpt excerpt . category";
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
@media screen and (max-width: $small) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"category category category category status"
|
||||
". . . . ."
|
||||
"activity . . . likes-replies";
|
||||
|
||||
.topic-excerpt,
|
||||
.link-bottom-line {
|
||||
"category-status category-status category-status . . . . activity"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||
"avatar author . . . . . likes-replies";
|
||||
.topic-excerpt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-likes-replies-data {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.topic-category-data {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.link-bottom-line {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $medium) {
|
||||
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-rows: 22px minmax(22px, auto);
|
||||
grid-template-areas:
|
||||
"avatar author status status . . activity"
|
||||
". topic-title topic-title topic-title . . likes-replies"
|
||||
". topic-title topic-title topic-title . . category";
|
||||
}
|
||||
@media screen and (max-width: $small) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"category-status category-status category-status . . . . activity"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||
"avatar author . . . . . likes-replies";
|
||||
}
|
||||
@include breakpoint(medium) {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--primary-200);
|
||||
}
|
||||
|
||||
// display contents
|
||||
@@ -133,64 +173,32 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// topic activity, avatar, text
|
||||
.topic-activity-data {
|
||||
grid-area: activity;
|
||||
// avatar & author
|
||||
.topic-author-avatar-data {
|
||||
grid-area: avatar;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-activity {
|
||||
display: grid;
|
||||
grid-template-columns: 20px auto auto auto;
|
||||
font-size: var(--font-down-1);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
.topic-author-avatar img.avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--d-border-radius);
|
||||
@media screen and (max-width: $small) {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-activity__user .avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.topic-activity__user {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 4px;
|
||||
td.topic-author-data {
|
||||
grid-area: author;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
|
||||
.topic-activity__username {
|
||||
margin-left: 0.25em;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
.topic-activity__username {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-activity__reason {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-activity.--updated .topic-activity__reason {
|
||||
margin-left: 0.25em;
|
||||
.topic-author-data .topic-author {
|
||||
color: var(--primary-500);
|
||||
}
|
||||
|
||||
// status
|
||||
.topic-status-data {
|
||||
grid-area: status;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topic-status-card {
|
||||
height: min-content;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
@@ -201,33 +209,40 @@
|
||||
border-radius: var(--d-border-radius);
|
||||
border: 1px solid var(--status-color);
|
||||
color: var(--status-color);
|
||||
height: min-content;
|
||||
grid-area: status;
|
||||
width: min-content;
|
||||
|
||||
@include breakpoint("large", min-width) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -20px;
|
||||
background-color: var(--d-content-background);
|
||||
height: 20px;
|
||||
font-size: var(--font-down-3);
|
||||
@media screen and (max-width: $small) {
|
||||
height: calc(100% - 2px);
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--status-color);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-status-card.--pinned {
|
||||
.topic-status-card.--bookmark {
|
||||
display: none;
|
||||
}
|
||||
.topic-status-card.--pinned,
|
||||
.topic-status-card.--unpinned {
|
||||
--status-color: var(--primary-500);
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
line-height: unset;
|
||||
}
|
||||
.topic-status-card.--hot {
|
||||
--status-color: var(--hot-color);
|
||||
}
|
||||
|
||||
.topic-status-card.--hot {
|
||||
--status-color: #e45735;
|
||||
// title
|
||||
td.main-link .link-top-line {
|
||||
font-size: var(--font-0);
|
||||
grid-area: topic-title;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.link-top-line .event-date {
|
||||
margin-left: 0.5em;
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
|
||||
@@ -235,16 +250,11 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-list-data {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
td.main-link .link-top-line a.raw-topic-link {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.topic-post-badges .badge-notification.unread-posts,
|
||||
.topic-post-badges .badge-notification.new-topic {
|
||||
.topic-post-badges .badge-notification.unread-posts {
|
||||
background-color: var(--tertiary);
|
||||
color: var(--tertiary);
|
||||
overflow: hidden;
|
||||
@@ -255,6 +265,13 @@
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
// excerpt
|
||||
.topic-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
// timestamp
|
||||
td.activity .post-activity {
|
||||
grid-area: activity;
|
||||
@@ -264,55 +281,37 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.link-bottom-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// metadata
|
||||
// metadata - excerpt
|
||||
.topic-excerpt,
|
||||
// metadata - category
|
||||
td.main-link .link-bottom-line {
|
||||
grid-row: 3 / -1;
|
||||
grid-column: 1 / -3;
|
||||
margin: 0;
|
||||
font-size: var(--font-down-2);
|
||||
|
||||
.excerpt__contents {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
// default category position hidden
|
||||
.badge-category__wrapper {
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
td.topic-category-status-data {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
td.topic-category-data {
|
||||
grid-area: category;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
justify-content: flex-start;
|
||||
@media screen and (max-width: $small) {
|
||||
grid-area: category-status;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
td.topic-category-status-data .badge-category__wrapper {
|
||||
grid-area: category;
|
||||
}
|
||||
|
||||
td.topic-category-data .badge-category__wrapper,
|
||||
td.main-link .link-bottom-line .badge-category__wrapper {
|
||||
td.topic-category-status-data .badge-category__wrapper {
|
||||
overflow: unset;
|
||||
border-radius: var(--d-border-radius);
|
||||
padding: 3px 6px;
|
||||
padding: 6px;
|
||||
align-self: flex-end;
|
||||
background-color: light-dark(
|
||||
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
|
||||
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
|
||||
);
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
@media screen and (max-width: $small) {
|
||||
padding: 2px 6px;
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
.badge-category__name {
|
||||
@@ -322,7 +321,6 @@
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
td.main-link .discourse-tags {
|
||||
display: none;
|
||||
}
|
||||
@@ -341,9 +339,9 @@
|
||||
gap: 0.5em;
|
||||
justify-content: flex-end;
|
||||
height: min-content;
|
||||
align-self: center;
|
||||
align-self: flex-end;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.topic-likes-replies-data .topic-likes,
|
||||
.topic-likes-replies-data .topic-replies {
|
||||
display: flex;
|
||||
@@ -351,385 +349,27 @@
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
color: var(--primary-500);
|
||||
|
||||
svg {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-item {
|
||||
cursor: pointer;
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
.topic-list-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-list-item {
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
border-color: var(--accent-color);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--accent-color),
|
||||
0 0 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Bookmarks
|
||||
.topic-list-item.bookmark-list-item {
|
||||
.link-bottom-line {
|
||||
font-size: unset;
|
||||
}
|
||||
|
||||
// regular card without excerpt class
|
||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-areas:
|
||||
". . . . . . dropdown"
|
||||
"avatar update metadata metadata metadata . category";
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
|
||||
grid-template-areas:
|
||||
" . . . . . . dropdown"
|
||||
"update metadata metadata metadata metadata category category";
|
||||
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-metadata {
|
||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-areas:
|
||||
". . . . . . . dropdown"
|
||||
"update update metadata metadata metadata metadata category category";
|
||||
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// card with excerpt (all in horizon since the toggle is gone)
|
||||
&.excerpt-expanded {
|
||||
grid-template-columns: 20px min-content auto minmax(0, 100px);
|
||||
grid-template-areas:
|
||||
". . . dropdown"
|
||||
"avatar update metadata metadata"
|
||||
"excerpt excerpt excerpt ."
|
||||
"excerpt excerpt excerpt category";
|
||||
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
grid-template-columns: 20px min-content auto min-content;
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: auto min-content;
|
||||
grid-template-areas:
|
||||
". dropdown"
|
||||
"category category";
|
||||
|
||||
.post-excerpt,
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-metadata {
|
||||
grid-template-columns: 20px min-content auto min-content;
|
||||
grid-template-areas:
|
||||
". . . dropdown"
|
||||
"avatar update metadata metadata"
|
||||
"excerpt excerpt excerpt . "
|
||||
"excerpt excerpt excerpt category";
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: auto min-content;
|
||||
grid-template-areas:
|
||||
" . dropdown"
|
||||
"metadata category";
|
||||
|
||||
.bookmark-metadata {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
align-self: flex-end;
|
||||
height: min-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
td.author-avatar {
|
||||
grid-area: avatar;
|
||||
}
|
||||
|
||||
td.main-link .link-bottom-line {
|
||||
display: contents;
|
||||
|
||||
.badge-category__wrapper {
|
||||
grid-area: category;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: min-content;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
td.main-link .link-top-line {
|
||||
display: contents;
|
||||
|
||||
.bookmark-metadata {
|
||||
grid-area: metadata;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-inline-xs);
|
||||
}
|
||||
|
||||
.bookmark-metadata-item {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bookmark-status-with-link {
|
||||
grid-column: 1/-2;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
}
|
||||
|
||||
.post-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-list-data:last-of-type {
|
||||
display: contents;
|
||||
|
||||
.bookmark-actions-dropdown {
|
||||
grid-area: dropdown;
|
||||
align-self: flex-start;
|
||||
height: 1em;
|
||||
|
||||
.select-kit-header {
|
||||
padding-top: 0;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.select-kit-header-wrapper {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-metadata.topic-list-data.updated-at {
|
||||
grid-area: update;
|
||||
}
|
||||
|
||||
td.activity .post-activity {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Assigned List
|
||||
.topic-list-item.assigned-list-item {
|
||||
.topic-status-card {
|
||||
display: none;
|
||||
position: relative;
|
||||
top: unset;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
td.main-link .link-top-line {
|
||||
grid-column: 1/-3;
|
||||
}
|
||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-areas:
|
||||
". . . . . status dropdown"
|
||||
"activity . . . . likes-replies category";
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
|
||||
grid-template-areas:
|
||||
"category category . . . . status dropdown"
|
||||
". . . . . . . . "
|
||||
"activity . . . . . . likes-replies";
|
||||
}
|
||||
|
||||
.assign-topic-buttons {
|
||||
display: contents;
|
||||
|
||||
.assign-actions-dropdown {
|
||||
grid-area: dropdown;
|
||||
justify-content: flex-end;
|
||||
height: 1em;
|
||||
|
||||
.select-kit-header {
|
||||
padding-top: 0;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.select-kit-header-wrapper {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.topic-category-status-data {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
// User Messages
|
||||
body.user-messages-page {
|
||||
.topic-list-body {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.topic-list .topic-list-data.posters a:not(.latest) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topic-list-item {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid var(--primary-200);
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
display: grid;
|
||||
grid-template-areas: "title activity" "posters .";
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-low);
|
||||
border-color: var(--primary-200);
|
||||
}
|
||||
|
||||
td.topic-category-data,
|
||||
td.topic-likes-replies-data,
|
||||
td.topic-status-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.visited .main-link .link-top-line {
|
||||
font-weight: normal;
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
td.topic-activity-data {
|
||||
grid-area: activity;
|
||||
}
|
||||
|
||||
td.topic-list-data.posters {
|
||||
grid-area: posters;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
a {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bulk select
|
||||
.bulk-select-enabled .topic-list-body .topic-list-item {
|
||||
grid-template-areas:
|
||||
"bulk-select . . . status"
|
||||
"bulk-select activity activity . category";
|
||||
|
||||
@include breakpoint(large) {
|
||||
grid-template-areas:
|
||||
"bulk-select . . . status"
|
||||
"bulk-select activity activity . category";
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-areas:
|
||||
"bulk-select category . . . status"
|
||||
"bulk-select . . . . ."
|
||||
"bulk-select activity activity . . .";
|
||||
|
||||
td.main-link .link-top-line,
|
||||
&.--has-status-card td.main-link .link-top-line {
|
||||
grid-column: 2/-1;
|
||||
grid-row: 2;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
td.topic-likes-replies-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
td.main-link .link-top-line,
|
||||
&.--has-status-card td.main-link .link-top-line {
|
||||
grid-column: 2/-1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.topic-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.excerpt-expanded {
|
||||
grid-template-areas:
|
||||
"bulk-select . . . status" "bulk-select activity . . ."
|
||||
"bulk-select excerpt excerpt excerpt category";
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
grid-template-areas:
|
||||
"bulk-select category . . . status"
|
||||
"bulk-select . . . . ."
|
||||
"bulk-select activity activity . . .";
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-select {
|
||||
grid-area: bulk-select;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-view {
|
||||
.link-top-line .event-date-container {
|
||||
display: inline;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.topic-list-body .topic-list-item .link-top-line .event-date {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
top: -0.125em;
|
||||
box-shadow: 0px 0px 0px 2px var(--accent-color),
|
||||
0px 0px 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
+33
-53
@@ -6,8 +6,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.container.posts .topic-navigation:not(.with-topic-progress) {
|
||||
// super fragile because new sticky topic title doesn't have a calculated value (= 53px with this font and size but…)
|
||||
.container.posts .topic-navigation {
|
||||
// super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
|
||||
top: calc(
|
||||
var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
|
||||
);
|
||||
@@ -16,64 +16,48 @@
|
||||
|
||||
.timeline-container .topic-timeline {
|
||||
min-width: unset; // why we have this?
|
||||
|
||||
.timeline-scrollarea {
|
||||
border-left: 1px solid var(--accent-color);
|
||||
|
||||
.timeline-scroller {
|
||||
@include breakpoint("medium", $rule: min-width) {
|
||||
margin-left: -4.5px;
|
||||
background: var(--d-content-background);
|
||||
height: 40px !important; // height is coming from element style have no other choice
|
||||
}
|
||||
|
||||
.timeline-replies,
|
||||
.timeline-ago {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-handle {
|
||||
background-color: var(--accent-color);
|
||||
|
||||
@include breakpoint("medium", $rule: min-width) {
|
||||
width: 8px;
|
||||
border-radius: 10px;
|
||||
height: calc(100% - 6px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.timeline-scroller {
|
||||
padding: 0.25em;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: 0.75em;
|
||||
padding-left: 0.5em;
|
||||
margin-left: calc(-0.5em - 2.5px);
|
||||
background: var(--d-content-background);
|
||||
height: 40px !important; // height is coming from element style have no other choice
|
||||
}
|
||||
.timelime-scroller-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25em;
|
||||
}
|
||||
.timeline-replies,
|
||||
.timeline-ago {
|
||||
line-height: 1;
|
||||
}
|
||||
.timeline-ago {
|
||||
// font-size: var(--font-down-1);
|
||||
}
|
||||
.timeline-handle {
|
||||
background-color: var(--accent-color);
|
||||
width: 3px;
|
||||
border-radius: 2px;
|
||||
height: calc(100% - 6px);
|
||||
}
|
||||
}
|
||||
|
||||
// should probably get rid of this extra specificity class in core?
|
||||
.timeline-container.timeline-fullscreen {
|
||||
@include breakpoint("medium", $rule: max-width) {
|
||||
.topic-timeline
|
||||
.timeline-scrollarea
|
||||
.timeline-scroller
|
||||
.timeline-scroller-content {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
.container.posts,
|
||||
#topic-footer-buttons {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.container.posts {
|
||||
grid-template-columns: auto 8em;
|
||||
|
||||
grid-template-columns: auto 150px;
|
||||
@media screen and (max-width: 924px) {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.post-notice {
|
||||
padding: var(--spacing-block-sm);
|
||||
border-radius: var(--d-border-radius);
|
||||
font-size: var(--font-down-1-rem);
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-up-1);
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-container .topic-timeline .timeline-ago {
|
||||
@@ -117,7 +101,3 @@
|
||||
nav.post-controls .actions button {
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
|
||||
.archetype-private_message {
|
||||
--pm-border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
+2
-2
@@ -3,8 +3,8 @@
|
||||
--d-border-radius-large: 20px;
|
||||
--d-border-radius: 8px;
|
||||
--d-input-border-radius: 6px;
|
||||
|
||||
// the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
|
||||
// --d-sidebar-row-height: 2.8em;
|
||||
//the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
|
||||
--spacing-block-xs: 0.25em;
|
||||
--spacing-block-s: 0.5em;
|
||||
--spacing-block-sm: 0.75em;
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
.welcome-banner {
|
||||
&__wrap {
|
||||
display: grid;
|
||||
grid-template-rows: 0.33fr 0.33fr 0.33fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 0.5em;
|
||||
border-bottom: 1px solid var(--primary-300);
|
||||
padding: 1.5em 0 2.5em;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.search-menu {
|
||||
grid-column: 2/3;
|
||||
grid-row: 1/-1;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
|
||||
@media screen and (max-width: 1028px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-column: 2/-1;
|
||||
grid-row: 1/-1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-menu .search-input,
|
||||
.search-menu-container .search-input {
|
||||
background: var(--d-content-background);
|
||||
border: 1px solid var(--search-color);
|
||||
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
|
||||
}
|
||||
|
||||
.search-menu .search-input:focus-within,
|
||||
.search-menu-container .search-input:focus-within {
|
||||
border: 1px solid var(--search-color);
|
||||
outline: 2px solid var(--search-color);
|
||||
}
|
||||
|
||||
.search-menu .d-icon,
|
||||
.search-menu .searching .d-icon,
|
||||
.search-menu .searching .show-advanced-search .d-icon {
|
||||
color: var(--search-color);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
z-index: z("dropdown");
|
||||
}
|
||||
|
||||
.results {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
&__title {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/-1;
|
||||
text-align: left;
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
color: var(--search-color);
|
||||
|
||||
@media screen and (max-width: 1028px) {
|
||||
font-size: var(--font-up-4);
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
text-align: left;
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/-1;
|
||||
font-size: var(--font-up-3);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
font-size: var(--font-up-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
enable_welcome_banner:
|
||||
default: true
|
||||
description: "Overrides the core `enable welcome banner` site setting"
|
||||
|
||||
search_experience:
|
||||
type: enum
|
||||
default: search_field
|
||||
choices:
|
||||
- search_field
|
||||
- search_icon
|
||||
description: "Overrides the core `search experience` site setting"
|
||||
@@ -1,54 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
describe "Composer peek", type: :system do
|
||||
fab!(:current_user) { Fabricate(:user, refresh_auto_groups: true) }
|
||||
fab!(:topic) { Fabricate(:topic_with_op) }
|
||||
|
||||
let(:topic_page) { PageObjects::Pages::Topic.new }
|
||||
let(:composer) { PageObjects::Components::Composer.new }
|
||||
|
||||
before do
|
||||
upload_theme
|
||||
sign_in(current_user)
|
||||
end
|
||||
|
||||
it "does not show composer peek for small windows" do
|
||||
topic_page.visit_topic(topic)
|
||||
topic_page.click_footer_reply
|
||||
expect(composer).to be_opened
|
||||
|
||||
resize_window(width: 600) { expect(page).to have_no_css(".peek-mode-toggle") }
|
||||
end
|
||||
|
||||
it "turns on composer peek and remembers this preference on page load" do
|
||||
topic_page.visit_topic(topic)
|
||||
topic_page.click_footer_reply
|
||||
expect(composer).to be_opened
|
||||
|
||||
resize_window(width: 1380) do
|
||||
find(".peek-mode-toggle").click
|
||||
expect(page).to have_css("body.peek-mode-active")
|
||||
|
||||
topic_page.visit_topic(topic)
|
||||
topic_page.click_footer_reply
|
||||
expect(composer).to be_opened
|
||||
expect(page).to have_css("body.peek-mode-active")
|
||||
|
||||
find(".peek-mode-toggle").click
|
||||
expect(page).to have_no_css("body.peek-mode-active")
|
||||
end
|
||||
end
|
||||
|
||||
it "hides the composer preview when toggling" do
|
||||
topic_page.visit_topic(topic)
|
||||
topic_page.click_footer_reply
|
||||
expect(composer).to be_opened
|
||||
expect(composer).to have_composer_preview
|
||||
|
||||
resize_window(width: 1380) do
|
||||
find(".peek-mode-toggle").click
|
||||
expect(page).to have_css("body.peek-mode-active")
|
||||
expect(composer).to have_no_composer_preview
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,22 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
RSpec.describe "Core features", type: :system do
|
||||
fab!(:current_user) { Fabricate(:user, refresh_auto_groups: true) }
|
||||
let(:composer) { PageObjects::Components::Composer.new }
|
||||
|
||||
before { upload_theme_or_component }
|
||||
|
||||
it_behaves_like "having working core features",
|
||||
skip_examples: %i[search:quick_search topics:create]
|
||||
|
||||
it "creates a new topic" do
|
||||
sign_in(current_user)
|
||||
visit("/new-topic")
|
||||
composer.fill_title("This is a new topic")
|
||||
composer.fill_content("This is a long enough sentence.")
|
||||
expect(page).to have_css(".d-editor-preview p", visible: true)
|
||||
within(".save-or-cancel") { click_button("Create Topic") }
|
||||
expect(page).to have_content("This is a new topic")
|
||||
expect(page).to have_content("This is a long enough sentence.")
|
||||
end
|
||||
end
|
||||
@@ -1,16 +1,7 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
require_relative "./page_objects/components/user_color_palette_selector"
|
||||
|
||||
describe "Horizon theme | High level", type: :system do
|
||||
let!(:theme) do
|
||||
horizon_theme = upload_theme
|
||||
ColorScheme
|
||||
.where(theme_id: horizon_theme.id)
|
||||
.where.not("name LIKE '%Dark%'")
|
||||
.update_all(user_selectable: true)
|
||||
horizon_theme
|
||||
end
|
||||
let!(:theme) { upload_theme }
|
||||
fab!(:current_user) { Fabricate(:user) }
|
||||
fab!(:tag_1) { Fabricate(:tag, name: "wow-cool") }
|
||||
fab!(:tag_2) { Fabricate(:tag, name: "another-tag") }
|
||||
@@ -19,7 +10,6 @@ describe "Horizon theme | High level", type: :system do
|
||||
let(:topic_list) { PageObjects::Components::TopicList.new }
|
||||
let(:topic_page) { PageObjects::Pages::Topic.new }
|
||||
let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
|
||||
let(:palette_selector) { PageObjects::Components::UserColorPaletteSelector.new }
|
||||
|
||||
def run_all_high_level_tests
|
||||
expect(page).to have_css(".experimental-screen")
|
||||
@@ -35,28 +25,27 @@ describe "Horizon theme | High level", type: :system do
|
||||
topic_item = find(topic_list.topic_list_item_class(topic_1))
|
||||
expect(topic_item.all("td").map { |el| el["class"] }).to eq(
|
||||
[
|
||||
"main-link topic-list-data",
|
||||
"topic-status-data",
|
||||
"topic-category-data",
|
||||
"main-link clearfix topic-list-data",
|
||||
"activity num topic-list-data age",
|
||||
"topic-author-data",
|
||||
"topic-category-status-data",
|
||||
"topic-author-avatar-data",
|
||||
"topic-likes-replies-data",
|
||||
"topic-activity-data",
|
||||
],
|
||||
)
|
||||
|
||||
# Can see a topic in the list and navigate to it successfully.
|
||||
# Can see a topic in the list and navigate to it successfully
|
||||
topic_list.visit_topic(topic_1)
|
||||
expect(topic_page).to have_topic_title(topic_1.title)
|
||||
|
||||
# Can change site colors from the sidebar palette, which are remembered
|
||||
# across page reloads.
|
||||
marigold_palette = ColorScheme.find_by(name: "Marigold")
|
||||
palette_selector.open_palette_menu
|
||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
||||
expect(palette_selector).to have_no_palette_menu
|
||||
|
||||
# Can change site colors from the sidebar palette, which are remembered across page reloads
|
||||
palette_menu =
|
||||
PageObjects::Components::DMenu.new(find(".sidebar-footer-actions .user-color-palette"))
|
||||
palette_menu.expand
|
||||
find(".color-palette-menu__content .color-palette-menu__item[data-color='marigold']").click
|
||||
expect(page).to have_css(".custom-color-marigold")
|
||||
page.refresh
|
||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
||||
expect(palette_selector).to have_tertiary_color(marigold_palette)
|
||||
expect(page).to have_css(".custom-color-marigold")
|
||||
end
|
||||
|
||||
it "works for anon" do
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
module PageObjects
|
||||
module Components
|
||||
class UserColorPaletteSelector < PageObjects::Components::Base
|
||||
def sidebar_footer_button_css
|
||||
".sidebar-footer-actions .user-color-palette-selector"
|
||||
end
|
||||
|
||||
def palette_menu
|
||||
PageObjects::Components::DMenu.new(find(sidebar_footer_button_css))
|
||||
end
|
||||
|
||||
def open_palette_menu
|
||||
palette_menu.expand
|
||||
end
|
||||
|
||||
def has_no_palette_menu?
|
||||
has_no_css?(".user-color-palette-selector-content")
|
||||
end
|
||||
|
||||
def click_palette_menu_item(palette_name)
|
||||
find(
|
||||
".user-color-palette-menu__content .user-color-palette-menu__item[data-color-palette='#{palette_name}']",
|
||||
).click
|
||||
end
|
||||
|
||||
def has_selected_palette?(palette)
|
||||
has_css?(".user-color-palette-selector[data-selected-color-palette-id='#{palette.id}']")
|
||||
end
|
||||
|
||||
def has_loaded_css?
|
||||
has_css?(".user-color-palette-selector.user-color-palette-css-loaded")
|
||||
end
|
||||
|
||||
def has_tertiary_color?(palette)
|
||||
computed_color_hex =
|
||||
page.evaluate_script(
|
||||
"getComputedStyle(document.documentElement).getPropertyValue('--tertiary')",
|
||||
)
|
||||
computed_color_hex == "#" + palette.colors.find { |color| color.name == "tertiary" }.hex
|
||||
end
|
||||
|
||||
def has_computed_color?(color)
|
||||
computed_background_color =
|
||||
page.evaluate_script(
|
||||
"getComputedStyle(document.querySelector(\"li.sidebar-section-link-wrapper[data-list-item-name='everything'] .active\")).backgroundColor",
|
||||
)
|
||||
computed_background_color == color
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,55 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
RSpec.describe "Sidebar New Topic Button", system: true do
|
||||
before { upload_theme }
|
||||
fab!(:group)
|
||||
fab!(:user) { Fabricate(:user, trust_level: 3, groups: [group]) }
|
||||
fab!(:category)
|
||||
fab!(:private_category) do
|
||||
c = Fabricate(:category_with_definition)
|
||||
c.set_permissions(group => :readonly)
|
||||
c.save
|
||||
c
|
||||
end
|
||||
|
||||
context "for signed in users" do
|
||||
before { sign_in(user) }
|
||||
|
||||
it "renders the new topic button in the sidebar" do
|
||||
visit("/latest")
|
||||
expect(page).to have_css(".sidebar-new-topic-button__wrapper")
|
||||
expect(page).to have_css(".sidebar-new-topic-button:not(.disabled)")
|
||||
end
|
||||
|
||||
it "opens the composer when clicked" do
|
||||
visit("/")
|
||||
find(".sidebar-new-topic-button").click
|
||||
expect(page).to have_css("#reply-title")
|
||||
end
|
||||
|
||||
it "shows draft menu when drafts exist" do
|
||||
Draft.create!(user: user, draft_key: "topic_1", data: {})
|
||||
|
||||
visit("/")
|
||||
expect(page).to have_css(".sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger")
|
||||
end
|
||||
|
||||
it "disables button when visiting read-only category" do
|
||||
visit("/c/#{private_category.slug}/#{private_category.id}")
|
||||
|
||||
expect(page).to have_css(".sidebar-new-topic-button[disabled]")
|
||||
|
||||
visit("/c/#{category.slug}/#{category.id}")
|
||||
|
||||
expect(page).not_to have_css(".sidebar-new-topic-button[disabled]")
|
||||
end
|
||||
end
|
||||
|
||||
context "for anon" do
|
||||
it "does not render the sidebar button for anons" do
|
||||
visit("/latest")
|
||||
expect(page).not_to have_css(".sidebar-new-topic-button__wrapper")
|
||||
expect(page).not_to have_css(".sidebar-new-topic-button:not(.disabled)")
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,119 +0,0 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
require_relative "./page_objects/components/user_color_palette_selector"
|
||||
|
||||
describe "Horizon theme | User color palette selector", type: :system do
|
||||
let(:set_theme_as_default) { true }
|
||||
let!(:theme) do
|
||||
horizon_theme = upload_theme(set_theme_as_default: set_theme_as_default)
|
||||
ColorScheme.where(theme_id: horizon_theme.id).update_all(user_selectable: true)
|
||||
horizon_theme
|
||||
end
|
||||
fab!(:current_user) { Fabricate(:user) }
|
||||
let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
|
||||
let(:palette_selector) { PageObjects::Components::UserColorPaletteSelector.new }
|
||||
let(:interface_color_mode) { PageObjects::Components::InterfaceColorMode.new }
|
||||
let(:interface_color_selector) do
|
||||
PageObjects::Components::InterfaceColorSelector.new(".sidebar-footer-actions")
|
||||
end
|
||||
let(:marigold_palette) { ColorScheme.find_by(name: "Marigold") }
|
||||
let(:marigold_palette_dark) { ColorScheme.find_by(name: "Marigold Dark") }
|
||||
|
||||
before { SiteSetting.interface_color_selector = "sidebar_footer" }
|
||||
|
||||
it "does not show the sidebar button if there are no user-selectable color palettes" do
|
||||
ColorScheme.update_all(user_selectable: false)
|
||||
visit "/"
|
||||
expect(page).to have_no_css(palette_selector.sidebar_footer_button_css)
|
||||
end
|
||||
|
||||
describe "for logged in user" do
|
||||
before { sign_in(current_user) }
|
||||
|
||||
it "can open the user color palette menu and select a palette, which is preseved on reload" do
|
||||
visit "/"
|
||||
palette_selector.open_palette_menu
|
||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
||||
|
||||
expect(palette_selector).to have_no_palette_menu
|
||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
||||
expect(palette_selector).to have_loaded_css
|
||||
expect(palette_selector).to have_tertiary_color(marigold_palette)
|
||||
|
||||
page.refresh
|
||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
||||
end
|
||||
|
||||
it "uses the dark version of the palette if the user selects dark mode" do
|
||||
visit "/"
|
||||
palette_selector.open_palette_menu
|
||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
||||
|
||||
expect(palette_selector).to have_no_palette_menu
|
||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
||||
expect(palette_selector).to have_loaded_css
|
||||
expect(palette_selector).to have_computed_color("oklch(0.92 0.0708528 68.5036)")
|
||||
|
||||
interface_color_selector.expand
|
||||
interface_color_selector.dark_option.click
|
||||
expect(interface_color_mode).to have_dark_mode_forced
|
||||
expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
|
||||
|
||||
page.refresh
|
||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
||||
expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
|
||||
end
|
||||
|
||||
context "when the theme is not default but is selected by a user" do
|
||||
let(:set_theme_as_default) { false }
|
||||
|
||||
it "can open the user color palette menu and select a palette, which is preseved on reload" do
|
||||
theme.update!(user_selectable: true)
|
||||
current_user.user_option.update!(theme_ids: [theme.id])
|
||||
visit "/"
|
||||
palette_selector.open_palette_menu
|
||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
||||
|
||||
expect(palette_selector).to have_no_palette_menu
|
||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
||||
expect(palette_selector).to have_loaded_css
|
||||
expect(palette_selector).to have_tertiary_color(marigold_palette)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
describe "for anon" do
|
||||
it "can open the user color palette menu and select a palette, which is preseved on reload" do
|
||||
visit "/"
|
||||
palette_selector.open_palette_menu
|
||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
||||
|
||||
expect(palette_selector).to have_no_palette_menu
|
||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
||||
expect(palette_selector).to have_loaded_css
|
||||
expect(palette_selector).to have_tertiary_color(marigold_palette)
|
||||
end
|
||||
|
||||
it "uses the dark version of the palette if the user selects dark mode, which is preserved on reload" do
|
||||
visit "/"
|
||||
palette_selector.open_palette_menu
|
||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
||||
|
||||
expect(palette_selector).to have_no_palette_menu
|
||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
||||
expect(palette_selector).to have_loaded_css
|
||||
expect(palette_selector).to have_computed_color("oklch(0.92 0.0708528 68.5036)")
|
||||
|
||||
interface_color_selector.expand
|
||||
interface_color_selector.dark_option.click
|
||||
expect(interface_color_mode).to have_dark_mode_forced
|
||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
||||
expect(palette_selector).to have_loaded_css
|
||||
expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
|
||||
|
||||
page.refresh
|
||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
||||
expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,3 +0,0 @@
|
||||
export default {
|
||||
extends: ["@discourse/lint-configs/stylelint"],
|
||||
};
|
||||
Reference in New Issue
Block a user