mirror of
https://github.com/discourse/discourse.git
synced 2025-06-23 18:52:22 +00:00
FIX: import Horizon system theme (#33229)
System themes were introduced here - https://github.com/discourse/discourse/pull/32681 In this PR, Horizon is imported.
This commit is contained in:
Krzysztof Kotlarek
GitHub
parent
c00c522530
commit
1a2b003d35
@ -7,7 +7,7 @@ class Theme < ActiveRecord::Base
|
||||
include GlobalPath
|
||||
|
||||
BASE_COMPILER_VERSION = 91
|
||||
CORE_THEMES = { "foundation" => -1 }
|
||||
CORE_THEMES = { "foundation" => -1, "horizon" => -2 }
|
||||
EDITABLE_SYSTEM_ATTRIBUTES = %w[
|
||||
child_theme_ids
|
||||
color_scheme_id
|
||||
@ -233,10 +233,6 @@ class Theme < ActiveRecord::Base
|
||||
Theme.expire_site_cache!
|
||||
end
|
||||
|
||||
def self.foundation_theme
|
||||
Theme.find(CORE_THEMES["foundation"])
|
||||
end
|
||||
|
||||
def self.compiler_version
|
||||
get_set_cache "compiler_version" do
|
||||
dependencies = [
|
||||
@ -593,6 +589,9 @@ class Theme < ActiveRecord::Base
|
||||
fields
|
||||
end
|
||||
|
||||
# def foundation_theme
|
||||
# def horizon_theme
|
||||
CORE_THEMES.each { |name, id| define_singleton_method("#{name}_theme") { Theme.find(id) } }
|
||||
def resolve_baked_field(target, name)
|
||||
list_baked_fields(target, name).map { |f| f.value_baked || f.value }.join("\n")
|
||||
end
|
||||
|
||||
@ -79,9 +79,9 @@ RSpec.describe S3Inventory do
|
||||
output = capture_stdout { inventory.backfill_etags_and_list_missing }
|
||||
|
||||
expect(output).to eq(
|
||||
"#{system_themes_screenshots}\n#{@upload_1.url}\n#{@no_etag.url}\n4 of 8 uploads are missing\n",
|
||||
"#{system_themes_screenshots}\n#{@upload_1.url}\n#{@no_etag.url}\n6 of 10 uploads are missing\n",
|
||||
)
|
||||
expect(Discourse.stats.get("missing_s3_uploads")).to eq(4)
|
||||
expect(Discourse.stats.get("missing_s3_uploads")).to eq(6)
|
||||
end
|
||||
|
||||
it "should detect when a url match exists with a different etag" do
|
||||
@ -99,18 +99,18 @@ RSpec.describe S3Inventory do
|
||||
#{upload_with_differing_tag_2.url} has different etag
|
||||
#{@upload_1.url}
|
||||
#{@no_etag.url}
|
||||
6 of 8 uploads are missing
|
||||
8 of 10 uploads are missing
|
||||
2 of these are caused by differing etags
|
||||
Null the etag column and re-run for automatic backfill
|
||||
TEXT
|
||||
|
||||
expect(Discourse.stats.get("missing_s3_uploads")).to eq(6)
|
||||
expect(Discourse.stats.get("missing_s3_uploads")).to eq(8)
|
||||
end
|
||||
|
||||
it "marks missing uploads as not verified and found uploads as verified. uploads not checked will be verified nil" do
|
||||
expect(
|
||||
Upload.where(verification_status: Upload.verification_statuses[:unchecked]).count,
|
||||
).to eq(15)
|
||||
).to eq(17)
|
||||
|
||||
output = capture_stdout { inventory.backfill_etags_and_list_missing }
|
||||
|
||||
@ -120,7 +120,7 @@ RSpec.describe S3Inventory do
|
||||
Upload.where(verification_status: Upload.verification_statuses[:verified]).count,
|
||||
).to eq(4)
|
||||
|
||||
expect(Upload.with_invalid_etag_verification_status.count).to eq(4)
|
||||
expect(Upload.with_invalid_etag_verification_status.count).to eq(6)
|
||||
|
||||
expect(
|
||||
Upload.where(verification_status: Upload.verification_statuses[:unchecked]).count,
|
||||
@ -248,8 +248,8 @@ RSpec.describe S3Inventory do
|
||||
end
|
||||
|
||||
expect(output).to eq(
|
||||
"#{system_themes_screenshots}\n#{upload.url}\n#{no_etag.url}\n4 of 8 uploads are missing\n",
|
||||
"#{system_themes_screenshots}\n#{upload.url}\n#{no_etag.url}\n6 of 10 uploads are missing\n",
|
||||
)
|
||||
expect(Discourse.stats.get("missing_s3_uploads")).to eq(4)
|
||||
expect(Discourse.stats.get("missing_s3_uploads")).to eq(6)
|
||||
end
|
||||
end
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
RSpec.describe SystemThemesManager do
|
||||
it "is idempotent" do
|
||||
Theme.delete_all
|
||||
expect { SystemThemesManager.sync! }.to change { Theme.system.count }.by(1)
|
||||
expect { SystemThemesManager.sync! }.to change { Theme.system.count }.by(2)
|
||||
expect { SystemThemesManager.sync! }.not_to change { Theme.count }
|
||||
end
|
||||
end
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
engine-strict = true
|
||||
auto-install-peers = false
|
||||
21
themes/horizon/LICENSE
Normal file
21
themes/horizon/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) Design Team
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
3
themes/horizon/README.md
Normal file
3
themes/horizon/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
Horizon is a simple, beautiful theme that improves the out-of-the-box experience for Discourse sites.
|
||||
|
||||
https://meta.discourse.org/t/horizon-theme/360486
|
||||
135
themes/horizon/about.json
Normal file
135
themes/horizon/about.json
Normal file
@ -0,0 +1,135 @@
|
||||
{
|
||||
"name": "Horizon",
|
||||
"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",
|
||||
"theme_version": "0.0.1",
|
||||
"modifiers": {
|
||||
"svg_icons": ["fire"],
|
||||
"serialize_topic_is_hot": true
|
||||
},
|
||||
"color_schemes": {
|
||||
"Horizon": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"tertiary": "595bca",
|
||||
"tertiary-med-or-tertiary": "595bca",
|
||||
"selected": "d7dfff",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "1A1A1A",
|
||||
"hover": "E1E8FF"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"screenshots": ["screenshots/light.png", "screenshots/dark.png"]
|
||||
}
|
||||
0
themes/horizon/assets/.gitkeep
Normal file
0
themes/horizon/assets/.gitkeep
Normal file
105
themes/horizon/common/color_definitions.scss
Normal file
105
themes/horizon/common/color_definitions.scss
Normal file
@ -0,0 +1,105 @@
|
||||
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;
|
||||
}
|
||||
19
themes/horizon/common/common.scss
Normal file
19
themes/horizon/common/common.scss
Normal file
@ -0,0 +1,19 @@
|
||||
@import "box-view";
|
||||
@import "buttons";
|
||||
@import "chat";
|
||||
@import "color-choice";
|
||||
@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 "sidebar";
|
||||
@import "sidebar-new-topic-button";
|
||||
@import "topic";
|
||||
@import "topic-cards";
|
||||
@import "variables";
|
||||
7
themes/horizon/common/head_tag.html
Normal file
7
themes/horizon/common/head_tag.html
Normal file
@ -0,0 +1,7 @@
|
||||
<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>
|
||||
2
themes/horizon/desktop/desktop.scss
Normal file
2
themes/horizon/desktop/desktop.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import "desktop-horizon-fixes";
|
||||
@import "desktop-full-width";
|
||||
0
themes/horizon/javascripts/.gitkeep
Normal file
0
themes/horizon/javascripts/.gitkeep
Normal file
@ -0,0 +1,6 @@
|
||||
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);
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
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;
|
||||
}
|
||||
);
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
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"];
|
||||
}
|
||||
);
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
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,7 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
|
||||
export default apiInitializer("0.8.0", (api) => {
|
||||
api.registerValueTransformer("bulk-select-in-nav-controls", () => {
|
||||
return true;
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,6 @@
|
||||
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,50 @@
|
||||
import Component from "@glimmer/component";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import formatDate from "discourse/helpers/format-date";
|
||||
|
||||
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.firstPosterUser,
|
||||
username: this.args.topic.last_poster_username,
|
||||
class: "--created",
|
||||
};
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<span class={{concatClass "topic-activity" this.topicUser.class}}>
|
||||
{{#if this.topicUser.username}}
|
||||
<span
|
||||
class="topic-activity__username"
|
||||
>{{this.topicUser.username}}</span>
|
||||
<span class="dot-separator"></span>
|
||||
{{/if}}
|
||||
<div class="topic-activity__time">
|
||||
{{formatDate @topic.bumpedAt leaveAgo="true" format="tiny"}}
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
import { categoryLinkHTML } from "discourse/helpers/category-link";
|
||||
|
||||
const TopicCategoryColumn = <template>
|
||||
{{categoryLinkHTML @topic.category}}
|
||||
</template>;
|
||||
|
||||
export default TopicCategoryColumn;
|
||||
@ -0,0 +1,17 @@
|
||||
import Component from "@glimmer/component";
|
||||
import avatar from "discourse/helpers/avatar";
|
||||
|
||||
export default class TopicCreatorColumn extends Component {
|
||||
get topicCreator() {
|
||||
return {
|
||||
user: this.args.topic.creator,
|
||||
class: "--topic-creator",
|
||||
};
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class={{this.topicCreator.class}}>
|
||||
{{avatar this.topicCreator.user}}
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
|
||||
const TopicLikesColumn = <template>
|
||||
{{#if @topic.like_count}}
|
||||
<span class="topic-likes">{{icon "heart"}}{{@topic.like_count}}</span>
|
||||
{{/if}}
|
||||
</template>;
|
||||
|
||||
export default TopicLikesColumn;
|
||||
@ -0,0 +1,10 @@
|
||||
import { gt } from "truth-helpers";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
|
||||
const TopicRepliesColumn = <template>
|
||||
{{#if (gt @topic.replyCount 1)}}
|
||||
<span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
|
||||
{{/if}}
|
||||
</template>;
|
||||
|
||||
export default TopicRepliesColumn;
|
||||
@ -0,0 +1,36 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { service } from "@ember/service";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
export default class TopicStatusColumn extends Component {
|
||||
@service siteSettings;
|
||||
|
||||
get badge() {
|
||||
if (this.args.topic.is_hot) {
|
||||
return {
|
||||
icon: "fire",
|
||||
text: "topic_hot",
|
||||
className: "--hot",
|
||||
};
|
||||
}
|
||||
|
||||
if (this.args.topic.pinned) {
|
||||
return {
|
||||
icon: "thumbtack",
|
||||
text: "topic_pinned",
|
||||
className: "--pinned",
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if this.badge}}
|
||||
<span class="topic-status-card {{this.badge.className}}">{{icon
|
||||
this.badge.icon
|
||||
}}<p class="topic-status-card__name">{{i18n (themePrefix this.badge.text)}}</p></span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
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,68 @@
|
||||
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;
|
||||
|
||||
willDestroy() {
|
||||
super.willDestroy(...arguments);
|
||||
this.resizeObserver.disconnect();
|
||||
}
|
||||
|
||||
@bind
|
||||
calculateDistance(element) {
|
||||
const distance = element.getBoundingClientRect();
|
||||
this.left = distance.left;
|
||||
this.right = distance.right;
|
||||
}
|
||||
|
||||
get distanceStyles() {
|
||||
return htmlSafe(
|
||||
`--left-distance: ${this.left}px; --right-distance: ${this.right}px;`
|
||||
);
|
||||
}
|
||||
|
||||
get shouldRender() {
|
||||
return !DO_NOT_RENDER_LIST.includes(this.router.currentRouteName);
|
||||
}
|
||||
|
||||
@action
|
||||
onInsert(element) {
|
||||
this.calculateDistance(element);
|
||||
|
||||
this.resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
this.calculateDistance(entry.target);
|
||||
}
|
||||
});
|
||||
|
||||
this.resizeObserver.observe(element);
|
||||
}
|
||||
|
||||
<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}}
|
||||
</template>
|
||||
}
|
||||
@ -0,0 +1,116 @@
|
||||
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, not } from "truth-helpers";
|
||||
import CreateTopicButton from "discourse/components/create-topic-button";
|
||||
|
||||
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>
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
import Component from "@glimmer/component";
|
||||
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;
|
||||
|
||||
get siteStyle() {
|
||||
return `--icon-color: ${this.args.colorPalette.accent}`;
|
||||
}
|
||||
|
||||
get activeClass() {
|
||||
if (this.args.selectedColorPaletteId === this.args.colorPalette.id) {
|
||||
return "active";
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
paletteSelected() {
|
||||
this.args.paletteSelected(this.args.colorPalette);
|
||||
}
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="user-color-palette-menu__item"
|
||||
data-color-palette={{@colorPalette.name}}
|
||||
>
|
||||
<DButton
|
||||
class={{concatClass
|
||||
"btn-flat user-color-palette-menu__item-choice"
|
||||
this.activeClass
|
||||
}}
|
||||
style={{htmlSafe this.siteStyle}}
|
||||
@icon="circle"
|
||||
@translatedLabel={{@colorPalette.name}}
|
||||
@action={{this.paletteSelected}}
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
@ -0,0 +1,210 @@
|
||||
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>
|
||||
}
|
||||
@ -0,0 +1,128 @@
|
||||
import { withPluginApi } from "discourse/lib/plugin-api";
|
||||
import TopicActivityColumn from "../components/card/topic-activity-column";
|
||||
import TopicCategoryColumn from "../components/card/topic-category-column";
|
||||
import TopicCreatorColumn from "../components/card/topic-creator-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}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicStatus = <template>
|
||||
<td class="topic-status-data">
|
||||
<TopicStatusColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicCategory = <template>
|
||||
<td class="topic-category-data">
|
||||
<TopicCategoryColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicReplies = <template>
|
||||
<td class="topic-likes-replies-data">
|
||||
<TopicRepliesColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicCreator = <template>
|
||||
<td class="topic-creator-data">
|
||||
<TopicCreatorColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
export default {
|
||||
name: "topic-list-customizations",
|
||||
|
||||
initialize(container) {
|
||||
const router = container.lookup("service:router");
|
||||
withPluginApi("1.39.0", (api) => {
|
||||
api.registerValueTransformer(
|
||||
"topic-list-columns",
|
||||
({ value: columns }) => {
|
||||
columns.add("topic-status", {
|
||||
item: TopicStatus,
|
||||
after: "topic-author",
|
||||
});
|
||||
columns.add("topic-category", {
|
||||
item: TopicCategory,
|
||||
after: "topic-status",
|
||||
});
|
||||
|
||||
columns.add("topic-likes-replies", {
|
||||
item: TopicReplies,
|
||||
after: "topic-author-avatar",
|
||||
});
|
||||
columns.add("topic-creator", {
|
||||
item: TopicCreator,
|
||||
after: "topic-author-avatar",
|
||||
});
|
||||
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;
|
||||
}
|
||||
);
|
||||
|
||||
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.replyCount > 1) {
|
||||
classes.push("has-replies");
|
||||
}
|
||||
return classes;
|
||||
}
|
||||
);
|
||||
|
||||
api.registerValueTransformer("topic-list-item-mobile-layout", () => {
|
||||
return false;
|
||||
});
|
||||
|
||||
api.registerBehaviorTransformer(
|
||||
"topic-list-item-click",
|
||||
({ context: { event }, next }) => {
|
||||
if (event.target.closest("a, button, input")) {
|
||||
return next();
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const topicLink = event.target
|
||||
.closest("tr")
|
||||
.querySelector("a.raw-topic-link");
|
||||
|
||||
// Redespatch the click on the topic link, so that all key-handing is sorted
|
||||
topicLink.dispatchEvent(
|
||||
new MouseEvent("click", {
|
||||
ctrlKey: event.ctrlKey,
|
||||
metaKey: event.metaKey,
|
||||
shiftKey: event.shiftKey,
|
||||
button: event.button,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
8
themes/horizon/locales/en.yml
Normal file
8
themes/horizon/locales/en.yml
Normal file
@ -0,0 +1,8 @@
|
||||
en:
|
||||
theme_metadata:
|
||||
description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
|
||||
topic_pinned: "Pinned"
|
||||
topic_hot: "Hot"
|
||||
user_replied: "replied"
|
||||
user_posted: "posted"
|
||||
user_updated: "updated"
|
||||
BIN
themes/horizon/screenshots/dark.png
Normal file
BIN
themes/horizon/screenshots/dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
themes/horizon/screenshots/light.png
Normal file
BIN
themes/horizon/screenshots/light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
183
themes/horizon/scss/box-view.scss
Normal file
183
themes/horizon/scss/box-view.scss
Normal file
@ -0,0 +1,183 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
@media screen and (width >= 1300px) {
|
||||
#main-outlet {
|
||||
border-top-right-radius: var(--d-border-radius-large);
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer-active.chat-drawer-expanded {
|
||||
.experimental-screen {
|
||||
&__top-left,
|
||||
&__top-right,
|
||||
&__bottom-left,
|
||||
&__bottom-right,
|
||||
&__bottom-bar {
|
||||
z-index: 199;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat .chat-replying-indicator-container {
|
||||
margin-bottom: var(--main-grid-gap);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat .chat-selection-management {
|
||||
margin-bottom: var(--main-grid-gap);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.experimental-screen {
|
||||
max-width: unset !important;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (width <= 488px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include viewport.until(md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__top-left,
|
||||
&__top-right,
|
||||
&__bottom-left,
|
||||
&__bottom-right {
|
||||
position: fixed;
|
||||
width: var(--d-border-radius-large);
|
||||
height: var(--d-border-radius-large);
|
||||
background-color: var(--background-color);
|
||||
z-index: 399;
|
||||
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);
|
||||
left: var(--left-distance);
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom-right {
|
||||
transform: rotate(180deg);
|
||||
bottom: var(--main-grid-gap);
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 399;
|
||||
background-color: var(--background-color);
|
||||
bottom: 0;
|
||||
left: var(--left-distance);
|
||||
height: var(--main-grid-gap);
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
height: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
|
||||
@container content-width (width > 1px) {
|
||||
width: 100cqw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rtl .experimental-screen {
|
||||
&__top-left {
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__top-right {
|
||||
transform: rotate(-90deg) !important;
|
||||
right: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__bottom-left {
|
||||
transform: rotate(90deg);
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__bottom-right {
|
||||
transform: rotate(180deg);
|
||||
left: unset;
|
||||
right: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
}
|
||||
|
||||
&__bottom-bar {
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width >= 768px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(
|
||||
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
|
||||
var(--d-border-radius-large)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(
|
||||
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
|
||||
calc(var(--d-border-radius-large) * 2)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 400px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
|
||||
}
|
||||
}
|
||||
110
themes/horizon/scss/buttons.scss
Normal file
110
themes/horizon/scss/buttons.scss
Normal file
@ -0,0 +1,110 @@
|
||||
:root {
|
||||
--d-button-border-radius: 6.25rem;
|
||||
}
|
||||
|
||||
.discourse-no-touch .topic-body .actions .fade-out {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-no-touch .dropdown-menu__item .btn {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.discourse-no-touch .btn-default.sidebar-new-topic-button,
|
||||
.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);
|
||||
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);
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
#create-topic.btn,
|
||||
.discourse-no-touch .btn-default.ai-new-question-button {
|
||||
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);
|
||||
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);
|
||||
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)
|
||||
);
|
||||
}
|
||||
}
|
||||
88
themes/horizon/scss/chat.scss
Normal file
88
themes/horizon/scss/chat.scss
Normal file
@ -0,0 +1,88 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.full-page-chat.full-page-chat-sidebar-enabled {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c-navbar-container {
|
||||
.full-page-chat & {
|
||||
padding: 0 1.5em;
|
||||
}
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
body.has-full-page-chat {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.chat-drawer-container {
|
||||
.is-expanded & {
|
||||
box-shadow: 0 0 0 2px var(--tertiary-medium);
|
||||
}
|
||||
|
||||
.chat-drawer.is-expanded & {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c-navbar__title {
|
||||
padding-left: 0.33em; // visual alignment for chat index, which does not havea a backarrow
|
||||
}
|
||||
}
|
||||
|
||||
.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-bottom: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--d-sidebar-active-background);
|
||||
}
|
||||
}
|
||||
|
||||
.channel-title {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
|
||||
.chat-composer__wrapper {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.chat-message-actions .more-buttons .btn-icon-text {
|
||||
&:hover {
|
||||
background-color: var(--d-selected);
|
||||
box-shadow: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
|
||||
z-index: z("modal", "dialog");
|
||||
}
|
||||
|
||||
.chat-replying-indicator-container {
|
||||
@include viewport.from(sm) {
|
||||
margin-left: calc(0.65em + 0.2rem);
|
||||
}
|
||||
}
|
||||
29
themes/horizon/scss/color-choice.scss
Normal file
29
themes/horizon/scss/color-choice.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.user-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);
|
||||
}
|
||||
}
|
||||
|
||||
.user-color-palette-content .fk-d-menu__inner-content {
|
||||
border: none;
|
||||
}
|
||||
26
themes/horizon/scss/color-exploration.scss
Normal file
26
themes/horizon/scss/color-exploration.scss
Normal file
@ -0,0 +1,26 @@
|
||||
:root {
|
||||
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
|
||||
--d-sidebar-highlight-hover-background: var(--d-selected);
|
||||
--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-active-suffix-color: var(--d-sidebar-suffix-color);
|
||||
--d-sidebar-background: var(--background-color);
|
||||
--d-sidebar-footer-fade: rgb(var(--tertiary-50-rgb), 1);
|
||||
--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),
|
||||
oklch(from var(--d-selected) calc(l * 0.7) c h)
|
||||
);
|
||||
--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)
|
||||
);
|
||||
--d-sidebar-highlight-suffix-color: var(--d-sidebar-active-suffix-color);
|
||||
--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;
|
||||
}
|
||||
65
themes/horizon/scss/composer-peek-mode.scss
Normal file
65
themes/horizon/scss/composer-peek-mode.scss
Normal file
@ -0,0 +1,65 @@
|
||||
.peek-mode-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
121
themes/horizon/scss/composer.scss
Normal file
121
themes/horizon/scss/composer.scss
Normal file
@ -0,0 +1,121 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
#reply-control
|
||||
.select-kit.dropdown-select-box.composer-actions
|
||||
.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 viewport.from(sm) {
|
||||
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 {
|
||||
.discourse-no-touch & {
|
||||
background: var(--tertiary-very-low);
|
||||
color: var(--accent-color);
|
||||
|
||||
.d-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-popup-menu-options.is-expanded {
|
||||
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;
|
||||
}
|
||||
}
|
||||
276
themes/horizon/scss/desktop-full-width.scss
Normal file
276
themes/horizon/scss/desktop-full-width.scss
Normal file
@ -0,0 +1,276 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
// 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 viewport.until(sm) {
|
||||
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 viewport.until(md) {
|
||||
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 (width <= 1400px) {
|
||||
grid-template-columns:
|
||||
calc(var(--d-sidebar-width) - 11px)
|
||||
1fr
|
||||
minmax(0, calc(var(--d-max-width)))
|
||||
1fr
|
||||
auto;
|
||||
}
|
||||
|
||||
@media screen and (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 viewport.until(md) {
|
||||
grid-area: rspace;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.has-sidebar-page {
|
||||
.wrap {
|
||||
max-width: unset; // undoing core default
|
||||
}
|
||||
|
||||
.d-header-mode,
|
||||
.extra-info-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (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 (width <= calc($reply-area-max-width + ($sidebar-width * 2))) and (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 (width >= 1400px) {
|
||||
.anon {
|
||||
.d-header .panel {
|
||||
grid-column-start: -4;
|
||||
}
|
||||
}
|
||||
}
|
||||
65
themes/horizon/scss/desktop-horizon-fixes.scss
Normal file
65
themes/horizon/scss/desktop-horizon-fixes.scss
Normal file
@ -0,0 +1,65 @@
|
||||
// Fixing bulk select (only needed for desktop)
|
||||
.bulk-select-enabled {
|
||||
.topic-list-header {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.topic-author-avatar-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bulk-select.topic-list-data {
|
||||
grid-area: bulk-select;
|
||||
margin-left: -0.5em;
|
||||
|
||||
@media screen and (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
|
||||
.bulk-select-topics {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: var(--secondary);
|
||||
border-radius: 0 0 0 var(--d-border-radius);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem;
|
||||
|
||||
button {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
90
themes/horizon/scss/header.scss
Normal file
90
themes/horizon/scss/header.scss
Normal file
@ -0,0 +1,90 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.d-header {
|
||||
box-shadow: none;
|
||||
background: var(--background-color);
|
||||
|
||||
@include viewport.from(xl) {
|
||||
padding-bottom: var(--main-grid-gap);
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu .quick-access-panel,
|
||||
.user-notifications-list {
|
||||
li {
|
||||
&.pending,
|
||||
&.unread {
|
||||
background: var(--d-hover);
|
||||
|
||||
.discourse-no-touch & {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--d-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu.revamped .tabs-list .btn.active {
|
||||
background: var(--d-hover);
|
||||
}
|
||||
|
||||
.discourse-no-touch .d-header-icons .icon:hover,
|
||||
.discourse-no-touch .d-header-icons .icon:focus,
|
||||
.header-sidebar-toggle button:focus:hover,
|
||||
.discourse-no-touch .header-sidebar-toggle button:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.discourse-no-touch .d-header-icons .icon:hover > .d-icon,
|
||||
.drop-down-mode .d-header-icons .active .icon > .d-icon,
|
||||
.drop-down-mode
|
||||
.d-header-icons
|
||||
.header-color-scheme-toggle
|
||||
.-expanded
|
||||
> .d-icon,
|
||||
.discourse-no-touch .header-sidebar-toggle button:hover .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drop-down-mode .d-header-icons .active .icon,
|
||||
.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.badge-notification {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
|
||||
body.login-page,
|
||||
body.signup-page,
|
||||
body.invite-page,
|
||||
body.password-reset-page,
|
||||
body.activate-account-page {
|
||||
.d-header {
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.header-dropdown-toggle.chat-header-icon .icon .chat-channel-unread-indicator {
|
||||
border-color: var(--background-color);
|
||||
}
|
||||
|
||||
.d-header-icons .badge-notification {
|
||||
border-color: var(--background-color);
|
||||
}
|
||||
9
themes/horizon/scss/hiddenstuff.scss
Normal file
9
themes/horizon/scss/hiddenstuff.scss
Normal file
@ -0,0 +1,9 @@
|
||||
.sidebar__panel-switch-button,
|
||||
.list-controls #create-topic,
|
||||
.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 {
|
||||
display: none;
|
||||
}
|
||||
15
themes/horizon/scss/login.scss
Normal file
15
themes/horizon/scss/login.scss
Normal file
@ -0,0 +1,15 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
138
themes/horizon/scss/main.scss
Normal file
138
themes/horizon/scss/main.scss
Normal file
@ -0,0 +1,138 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
:root {
|
||||
--main-grid-gap: 0.5em;
|
||||
}
|
||||
|
||||
html:not(:has(.has-full-page-chat)) {
|
||||
background-color: var(--background-color);
|
||||
|
||||
@include viewport.until(sm) {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
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 viewport.until(lg) {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.has-sidebar-page #main-outlet-wrapper {
|
||||
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0;
|
||||
|
||||
#main-outlet {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.has-sidebar-page) #main-outlet-wrapper {
|
||||
@include viewport.from(lg) {
|
||||
grid-template-columns: 0 minmax(0, 1fr) 0;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat, .wizard) {
|
||||
@include viewport.from(xl) {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
@include viewport.until(lg) {
|
||||
--main-grid-gap: 0;
|
||||
}
|
||||
|
||||
@media screen and (width >= 768px) {
|
||||
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 viewport.until(lg) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html.composer-open & {
|
||||
padding-bottom: var(--composer-height);
|
||||
}
|
||||
|
||||
> *:not(.experimental-screen, .activate-account) {
|
||||
@include viewport.from(lg) {
|
||||
box-sizing: border-box;
|
||||
max-width: 1000px;
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--spacing-inline-l);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#list-area {
|
||||
.show-more.has-topics {
|
||||
@include viewport.from(lg) {
|
||||
width: auto;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
|
||||
.alert {
|
||||
padding: var(--spacing-block-sm) var(--spacing-inline-m);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-body {
|
||||
padding-top: var(--spacing-block-m);
|
||||
}
|
||||
}
|
||||
|
||||
aside.onebox {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.d-editor-preview-wrapper {
|
||||
border-radius: var(--d-border-radius);
|
||||
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));
|
||||
}
|
||||
}
|
||||
141
themes/horizon/scss/misc.scss
Normal file
141
themes/horizon/scss/misc.scss
Normal file
@ -0,0 +1,141 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.user-main .about.collapsed-info .details {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.user-menu .quick-access-panel .read,
|
||||
.user-notifications-list .read {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.powered-by-discourse {
|
||||
z-index: 400;
|
||||
}
|
||||
|
||||
.boxed.white {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.admin-area .sidebar-wrapper .admin-panel {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.admin-report .main .report-alert.no-data,
|
||||
.admin-report .main .report-alert.rate-limited {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.admin-detail {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.select-kit.combo-box .select-kit-header,
|
||||
.select-kit.multi-select .multi-select-header,
|
||||
.d-editor-textarea-wrapper,
|
||||
.fk-d-menu__inner-content,
|
||||
.menu-panel {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.fk-d-menu .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.open .grippie {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.d-editor-textarea-wrapper.in-focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="color"]:focus,
|
||||
.select-kit.multi-select.is-expanded .multi-select-header,
|
||||
.select-kit.multi-select .multi-select-header:focus {
|
||||
border-color: var(--accent-color);
|
||||
outline: 2px solid var(--accent-color);
|
||||
}
|
||||
|
||||
#reply-control {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
// pinned topic excerpts are hidden on small screens too
|
||||
.fk-d-menu__trigger.topic-list-layout-trigger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-container .search-header,
|
||||
.search-container .search-bar,
|
||||
.search-container .search-filters,
|
||||
.search-container .search-filters .search-advanced-filters {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.user-main .about .details {
|
||||
padding: 1em 1em 0;
|
||||
border-bottom: 0;
|
||||
border-radius: var(--d-border-radius);
|
||||
background-color: var(--primary-50);
|
||||
}
|
||||
|
||||
.alert.alert-info {
|
||||
background: var(--tertiary-very-low);
|
||||
}
|
||||
|
||||
.discourse-reactions-list .reactions {
|
||||
gap: 0.15em;
|
||||
}
|
||||
|
||||
.group-details-container {
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.period-chooser-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// compatibility with the top contributors sidebar theme component
|
||||
// https://meta.discourse.org/t/top-contributors-sidebar/215110
|
||||
.list-container
|
||||
#list-area
|
||||
> .contents
|
||||
> .topic-list:has(.discourse-top-contributors) {
|
||||
grid-template-areas: "head head" "body sidebar";
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
grid-template-areas: "head head" "body body";
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.discourse-top-contributors {
|
||||
width: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-contributors-heading {
|
||||
font-size: var(--font-up-2);
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
243
themes/horizon/scss/mobile-stuff.scss
Normal file
243
themes/horizon/scss/mobile-stuff.scss
Normal file
@ -0,0 +1,243 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
// temp separate file to avoid merge hell… to be distributed later
|
||||
@include viewport.until(lg) {
|
||||
html,
|
||||
.d-header {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
*[class*="navigation-"] & {
|
||||
@include viewport.until(sm) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
@include viewport.until(sm) {
|
||||
padding-top: var(--spacing-block-sm);
|
||||
}
|
||||
|
||||
.list-controls {
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: var(
|
||||
--spacing-inline-m
|
||||
) !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 viewport.until(sm) {
|
||||
gap: var(--spacing-inline-s);
|
||||
|
||||
.category-breadcrumb.hidden,
|
||||
.category-breadcrumb {
|
||||
display: flex !important;
|
||||
column-gap: var(--spacing-inline-m);
|
||||
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-wrapper {
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.select-kit-header {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
|
||||
&:has(#create-topic) {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navigation-bar,
|
||||
.navigation-controls,
|
||||
.category-breadcrumb {
|
||||
@include viewport.until(sm) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-controls {
|
||||
@include viewport.until(sm) {
|
||||
gap: var(--spacing-inline-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
.topic-list-body {
|
||||
@include viewport.until(sm) {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topic-title {
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: var(--spacing-inline-s) !important;
|
||||
|
||||
.title-wrapper {
|
||||
gap: var(--spacing-block-s);
|
||||
}
|
||||
|
||||
.topic-category {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
// make mixin of this
|
||||
.badge-category__wrapper {
|
||||
font-size: var(--font-down-2-rem);
|
||||
border-radius: var(--d-border-radius);
|
||||
padding: var(--spacing-inline-xs) var(--spacing-inline-s);
|
||||
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)
|
||||
);
|
||||
border: 1px solid
|
||||
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)
|
||||
);
|
||||
}
|
||||
|
||||
.badge-category__name {
|
||||
color: light-dark(
|
||||
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
|
||||
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);
|
||||
gap: var(--spacing-inline-xs);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
border: 1px solid var(--primary-low-mid);
|
||||
background: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container.posts {
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: var(--spacing-inline-xs) !important;
|
||||
|
||||
.main-avatar .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.topic-body {
|
||||
.topic-meta-data {
|
||||
.username {
|
||||
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
|
||||
.topic-avatar {
|
||||
padding-top: 0;
|
||||
align-items: center;
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topic-footer-buttons {
|
||||
@include viewport.until(sm) {
|
||||
padding-inline: var(--spacing-inline-xs) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
#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);
|
||||
}
|
||||
67
themes/horizon/scss/nav-pills.scss
Normal file
67
themes/horizon/scss/nav-pills.scss
Normal file
@ -0,0 +1,67 @@
|
||||
.list-controls {
|
||||
position: sticky;
|
||||
top: var(--header-offset);
|
||||
background: var(--d-content-background);
|
||||
z-index: z("base");
|
||||
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
|
||||
background-color: var(--secondary);
|
||||
border-radius: var(--d-border-radius);
|
||||
border: 1px solid var(--primary-300);
|
||||
|
||||
&: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);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-kit.combo-box.category-drop.has-selection
|
||||
.category-drop-header:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.select-kit.is-expanded .select-kit-body {
|
||||
border-radius: var(--d-border-radius);
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.nav-pills > li > a:hover,
|
||||
.nav-pills > li button:hover {
|
||||
.discourse-no-touch & {
|
||||
background: transparent;
|
||||
color: var(--d-nav-color--hover);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: var(--d-nav-underline-height);
|
||||
background: var(--d-nav-color--hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
71
themes/horizon/scss/sidebar-new-topic-button.scss
Normal file
71
themes/horizon/scss/sidebar-new-topic-button.scss
Normal file
@ -0,0 +1,71 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
93
themes/horizon/scss/sidebar.scss
Normal file
93
themes/horizon/scss/sidebar.scss
Normal file
@ -0,0 +1,93 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.sidebar-wrapper,
|
||||
.sidebar-hamburger-dropdown {
|
||||
@include viewport.until(lg) {
|
||||
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;
|
||||
}
|
||||
|
||||
.sidebar-sections {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-section-link {
|
||||
transition: none;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.dropdown-menu__item .sidebar-section-link {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-wrapper {
|
||||
@include viewport.from(xl) {
|
||||
padding-block: 0.45em;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
.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 viewport.from(xl) {
|
||||
gap: var(--spacing-block-xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper .sidebar-sections {
|
||||
--scrollbarThumbBg: var(--d-selected);
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.sidebar-section-link-wrapper .sidebar-section-link:focus,
|
||||
.sidebar-section-link-wrapper .sidebar-section-link:hover {
|
||||
.d-icon {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.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");
|
||||
}
|
||||
}
|
||||
}
|
||||
705
themes/horizon/scss/topic-cards.scss
Normal file
705
themes/horizon/scss/topic-cards.scss
Normal file
@ -0,0 +1,705 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
:root {
|
||||
--d-border-radius-small: calc(var(--d-border-radius) * 0.5);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-body {
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25em;
|
||||
|
||||
@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 {
|
||||
position: relative;
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
text-overflow: ellipsis;
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--primary-300);
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category activity activity .";
|
||||
grid-gap: var(--space-3);
|
||||
border-radius: var(--d-border-radius);
|
||||
cursor: pointer;
|
||||
|
||||
&.has-replies {
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category likes-replies activity .";
|
||||
}
|
||||
|
||||
&:not(.has-replies) {
|
||||
.topic-likes-replies-data {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
max-width: 100vw;
|
||||
box-sizing: border-box;
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category activity activity . ";
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--primary-200);
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: var(--space-4) var(--space-3);
|
||||
|
||||
&.has-replies {
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category likes-replies activity . ";
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-select-enabled & {
|
||||
grid-template-columns: min-content min-content min-content auto min-content min-content;
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select category category activity activity .";
|
||||
|
||||
&.has-replies {
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select category category activity likes-replies likes-replies";
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-columns: min-content min-content min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select . category activity activity . ";
|
||||
}
|
||||
|
||||
&.has-replies {
|
||||
@include viewport.until(sm) {
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select . category likes-replies activity . ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
|
||||
&.excerpt-expanded {
|
||||
@include viewport.until(sm) {
|
||||
.topic-excerpt,
|
||||
.link-bottom-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.from(sm) {
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category activity activity . "
|
||||
". excerpt excerpt excerpt excerpt";
|
||||
|
||||
&.has-replies {
|
||||
grid-template-areas:
|
||||
"creator title title title status"
|
||||
". category likes-replies activity ."
|
||||
". excerpt excerpt excerpt excerpt";
|
||||
}
|
||||
|
||||
.bulk-select-enabled & {
|
||||
grid-template-areas:
|
||||
"bulk-select creator title title title status"
|
||||
"bulk-select category category activity likes-replies likes-replies "
|
||||
" bulk-select excerpt excerpt excerpt excerpt excerpt";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-top-line {
|
||||
grid-area: title;
|
||||
font-weight: 500;
|
||||
line-height: calc(var(--space-3) * 2); // avatar sizing
|
||||
|
||||
@include viewport.until(sm) {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// display contents
|
||||
td.main-link,
|
||||
td.posters,
|
||||
td.posts,
|
||||
td.views,
|
||||
td.activity,
|
||||
td.topic-category-status-data {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
td.num.posts a {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// display:nones
|
||||
td.main-link a.topic-status,
|
||||
.link-bottom-line,
|
||||
.badge-notification.new-topic::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-category-data {
|
||||
grid-area: category;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
@include viewport.until(sm) {
|
||||
border-radius: var(--d-border-radius-small);
|
||||
max-width: 125px;
|
||||
}
|
||||
padding: 0.25em 0.5rem;
|
||||
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) {
|
||||
padding: 0.25em 0.5rem;
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
.badge-category {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge-category__name {
|
||||
font-size: var(--font-down-1);
|
||||
color: light-dark(
|
||||
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
|
||||
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
|
||||
);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
width: var(--font-down-1);
|
||||
height: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
|
||||
// OP avatar
|
||||
.topic-creator-data {
|
||||
grid-area: creator;
|
||||
|
||||
.avatar {
|
||||
height: calc(var(--space-3) * 2);
|
||||
width: calc(var(--space-3) * 2);
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
@include viewport.until(sm) {
|
||||
border-radius: var(--d-border-radius-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-separator {
|
||||
width: 0.25em;
|
||||
height: 0.25em;
|
||||
background-color: var(--primary-500);
|
||||
border-radius: 100%;
|
||||
margin-inline: 0.25em;
|
||||
}
|
||||
|
||||
// topic activity, icon, text
|
||||
.topic-activity-data {
|
||||
@include ellipsis;
|
||||
grid-area: activity;
|
||||
}
|
||||
|
||||
.topic-activity {
|
||||
display: flex;
|
||||
font-size: var(--font-down-1);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.topic-activity__type {
|
||||
border-radius: 0.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topic-activity__username {
|
||||
@include ellipsis;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
// timestamp
|
||||
td.activity .post-activity {
|
||||
grid-area: activity;
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--primary-500);
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// status
|
||||
.topic-status-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.--has-status-card .topic-status-data {
|
||||
display: block;
|
||||
grid-area: status;
|
||||
}
|
||||
|
||||
.topic-status-card {
|
||||
height: min-content;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
padding: 0.2em 0.5rem;
|
||||
font-size: var(--font-down-2);
|
||||
@include viewport.from(lg) {
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
font-weight: 600;
|
||||
border-radius: var(--d-border-radius);
|
||||
border: 1px solid var(--status-color);
|
||||
color: var(--status-color);
|
||||
width: min-content;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
border-radius: var(--d-border-radius-small);
|
||||
padding: 0.35em;
|
||||
}
|
||||
|
||||
&.--pinned {
|
||||
--status-color: var(--primary-500);
|
||||
}
|
||||
|
||||
&.--hot {
|
||||
--status-color: #e45735;
|
||||
}
|
||||
|
||||
@include viewport.from(lg) {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 0;
|
||||
transform: translateY(-45%);
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--status-color);
|
||||
@include viewport.from(lg) {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin: 0;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-top-line .event-date {
|
||||
margin-left: 0.5em;
|
||||
font-size: var(--font-down-3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.link-top-line .event-date-container {
|
||||
top: -0.25rem;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.topic-list-data {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.topic-post-badges .badge-notification.unread-posts,
|
||||
.topic-post-badges .badge-notification.new-topic {
|
||||
background-color: var(--tertiary);
|
||||
color: var(--tertiary);
|
||||
overflow: hidden;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
padding: 0;
|
||||
top: -2px;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
// metadata - excerpt
|
||||
.topic-excerpt {
|
||||
grid-area: excerpt;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: var(--font-down-2);
|
||||
width: 100%;
|
||||
|
||||
.excerpt__contents {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
||||
// default category position hidden
|
||||
.badge-category__wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
td.main-link .discourse-tags {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// metadata - likes and replies
|
||||
td.posts .badge-posts {
|
||||
grid-area: replies;
|
||||
align-self: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
td.topic-likes-replies-data {
|
||||
grid-area: likes-replies;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--space-3);
|
||||
height: min-content;
|
||||
align-self: center;
|
||||
|
||||
.topic-likes {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-likes-replies-data .topic-replies {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
color: var(--primary-500);
|
||||
font-size: var(--font-down-1-rem);
|
||||
|
||||
svg {
|
||||
color: var(--primary-600);
|
||||
}
|
||||
}
|
||||
|
||||
.bulk-select {
|
||||
grid-area: bulk-select;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&th {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Assigned List
|
||||
&.assigned-list-item {
|
||||
.topic-status-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
". category activity activity .";
|
||||
|
||||
&.has-replies {
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
"category category likes-replies activity .";
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bookmarks
|
||||
&.bookmark-list-item {
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
"category category activity . . ";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-areas:
|
||||
"title title title title dropdown"
|
||||
"category category activity activity . ";
|
||||
|
||||
.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.excerpt-expanded {
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
"category category activity . . "
|
||||
"excerpt excerpt excerpt excerpt excerpt";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-areas:
|
||||
"title title title title dropdown"
|
||||
"category category activity activity . "
|
||||
"excerpt excerpt excerpt excerpt excerpt";
|
||||
}
|
||||
}
|
||||
|
||||
&.has-metadata {
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
"category category activity metadata . ";
|
||||
@include viewport.until(sm) {
|
||||
grid-template-areas:
|
||||
"metadata metadata metadata metadata dropdown"
|
||||
"title title title title ."
|
||||
"category category activity activity . ";
|
||||
}
|
||||
|
||||
&.excerpt-expanded {
|
||||
grid-template-areas:
|
||||
"creator title title title dropdown"
|
||||
"category category activity metadata . "
|
||||
"excerpt excerpt excerpt excerpt excerpt";
|
||||
|
||||
@include viewport.until(sm) {
|
||||
grid-template-areas:
|
||||
"metadata metadata metadata metadata dropdown"
|
||||
"title title title title ."
|
||||
"category category activity activity . "
|
||||
"excerpt excerpt excerpt excerpt excerpt";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.author-avatar {
|
||||
grid-area: creator;
|
||||
}
|
||||
|
||||
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;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-inline-s);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bookmark-metadata-item {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bookmark-status-with-link {
|
||||
grid-area: title;
|
||||
}
|
||||
}
|
||||
|
||||
.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: activity;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
td.activity .post-activity {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
.discourse-no-touch & {
|
||||
background-color: var(--primary-low);
|
||||
border-color: var(--primary-200);
|
||||
}
|
||||
}
|
||||
|
||||
td.topic-category-data,
|
||||
td.topic-likes-replies-data,
|
||||
td.topic-status-data,
|
||||
td.topic-creator-data {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-link .link-top-line {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
&.visited .main-link .link-top-line {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.event-date-container {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
}
|
||||
117
themes/horizon/scss/topic.scss
Normal file
117
themes/horizon/scss/topic.scss
Normal file
@ -0,0 +1,117 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.post-stream {
|
||||
.contents {
|
||||
font-size: var(--font-up-1);
|
||||
line-height: 1.25;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-container .topic-timeline {
|
||||
min-width: unset; // why we have this?
|
||||
|
||||
.timeline-scrollarea {
|
||||
border-left: 1px solid var(--accent-color);
|
||||
|
||||
.timeline-scroller {
|
||||
@include viewport.from(lg) {
|
||||
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 viewport.from(lg) {
|
||||
width: 8px;
|
||||
border-radius: 10px;
|
||||
height: calc(100% - 6px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// should probably get rid of this extra specificity class in core?
|
||||
.timeline-container.timeline-fullscreen {
|
||||
@include viewport.until(lg) {
|
||||
.topic-timeline
|
||||
.timeline-scrollarea
|
||||
.timeline-scroller
|
||||
.timeline-scroller-content {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container.posts {
|
||||
grid-template-columns: auto 8em;
|
||||
|
||||
@media screen and (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 {
|
||||
max-width: unset;
|
||||
overflow: unset;
|
||||
text-overflow: unset;
|
||||
}
|
||||
|
||||
.timeline-container .topic-timeline .timeline-scroller-content {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.more-topics__container
|
||||
.more-topics__list
|
||||
.topic-list-body
|
||||
.topic-list-item:last-of-type {
|
||||
border-bottom: 1px solid var(--primary-300);
|
||||
}
|
||||
|
||||
.discourse-post-event .discourse-post-event-widget {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.more-topics__container .nav {
|
||||
position: unset;
|
||||
margin-block: unset;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.timeline-container.timeline-fullscreen
|
||||
.topic-timeline
|
||||
.timeline-scrollarea
|
||||
.timeline-scroller
|
||||
.timeline-handle {
|
||||
float: none;
|
||||
width: 5px;
|
||||
position: relative;
|
||||
right: -4px;
|
||||
}
|
||||
|
||||
nav.post-controls .actions button {
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
|
||||
.archetype-private_message {
|
||||
--pm-border-radius: var(--d-border-radius);
|
||||
}
|
||||
22
themes/horizon/scss/variables.scss
Normal file
22
themes/horizon/scss/variables.scss
Normal file
@ -0,0 +1,22 @@
|
||||
:root {
|
||||
--d-max-width: 1000px;
|
||||
--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
|
||||
--spacing-block-xs: 0.25em;
|
||||
--spacing-block-s: 0.5em;
|
||||
--spacing-block-sm: 0.75em;
|
||||
--spacing-block-m: 1em;
|
||||
--spacing-block-l: 1.5em;
|
||||
--spacing-block-xl: 2em;
|
||||
--spacing-block-xxl: 4em;
|
||||
--spacing-inline-xs: 0.25em;
|
||||
--spacing-inline-s: 0.5rem;
|
||||
--spacing-inline-sm: 0.75rem;
|
||||
--spacing-inline-m: 1rem;
|
||||
--spacing-inline-l: 1.5rem;
|
||||
--spacing-inline-xl: 2rem;
|
||||
--spacing-inline-xxl: 4rem;
|
||||
}
|
||||
117
themes/horizon/scss/welcome-banner.scss
Normal file
117
themes/horizon/scss/welcome-banner.scss
Normal file
@ -0,0 +1,117 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.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 (width <= 768px) {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
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 (width <= 1028px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
grid-column: 2/-1;
|
||||
grid-row: 1/-1;
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
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 rgb(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 (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 (width <= 768px) {
|
||||
text-align: left;
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/-1;
|
||||
font-size: var(--font-up-3);
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
font-size: var(--font-up-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
11
themes/horizon/settings.yml
Normal file
11
themes/horizon/settings.yml
Normal file
@ -0,0 +1,11 @@
|
||||
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"
|
||||
0
themes/horizon/spec/system/.gitkeep
Normal file
0
themes/horizon/spec/system/.gitkeep
Normal file
54
themes/horizon/spec/system/composer_peek_spec.rb
Normal file
54
themes/horizon/spec/system/composer_peek_spec.rb
Normal file
@ -0,0 +1,54 @@
|
||||
# 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
|
||||
22
themes/horizon/spec/system/core_features_spec.rb
Normal file
22
themes/horizon/spec/system/core_features_spec.rb
Normal file
@ -0,0 +1,22 @@
|
||||
# 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
|
||||
76
themes/horizon/spec/system/horizon_high_level_spec.rb
Normal file
76
themes/horizon/spec/system/horizon_high_level_spec.rb
Normal file
@ -0,0 +1,76 @@
|
||||
# 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
|
||||
fab!(:current_user) { Fabricate(:user) }
|
||||
fab!(:tag_1) { Fabricate(:tag, name: "wow-cool") }
|
||||
fab!(:tag_2) { Fabricate(:tag, name: "another-tag") }
|
||||
fab!(:category)
|
||||
fab!(:topic_1) { Fabricate(:topic_with_op, category: category, tags: [tag_1, tag_2]) }
|
||||
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")
|
||||
|
||||
expect(sidebar).to have_categories_section
|
||||
expect(sidebar).to have_section_link(category.name)
|
||||
|
||||
expect(topic_list).to have_topic(topic_1)
|
||||
|
||||
# Ensure the topic list columns are in the correct order via 'topic-list-columns' valueTransformer
|
||||
#
|
||||
# NOTE(martin): Maybe there is a better way to do this in a qunit test instead.
|
||||
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",
|
||||
"topic-likes-replies-data",
|
||||
"topic-creator-data",
|
||||
"topic-activity-data",
|
||||
],
|
||||
)
|
||||
|
||||
# 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
|
||||
|
||||
page.refresh
|
||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
||||
expect(palette_selector).to have_tertiary_color(marigold_palette)
|
||||
end
|
||||
|
||||
it "works for anon" do
|
||||
visit "/"
|
||||
run_all_high_level_tests
|
||||
end
|
||||
|
||||
context "for signed in users" do
|
||||
before { sign_in(current_user) }
|
||||
|
||||
it "works" do
|
||||
visit "/"
|
||||
run_all_high_level_tests
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,53 @@
|
||||
# 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
|
||||
55
themes/horizon/spec/system/sidebar_topic_button_spec.rb
Normal file
55
themes/horizon/spec/system/sidebar_topic_button_spec.rb
Normal file
@ -0,0 +1,55 @@
|
||||
# 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
|
||||
119
themes/horizon/spec/system/user_color_palette_selector_spec.rb
Normal file
119
themes/horizon/spec/system/user_color_palette_selector_spec.rb
Normal file
@ -0,0 +1,119 @@
|
||||
# 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
|
||||
0
themes/horizon/test/acceptance/.gitkeep
Normal file
0
themes/horizon/test/acceptance/.gitkeep
Normal file
Loading…
x
Reference in New Issue
Block a user