Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 awesomerobot
|
b292befd1d | ||
|
awesomerobot
|
f0834f197c |
@@ -1,3 +1,5 @@
|
|||||||
Horizon is a simple, beautiful theme that improves the out-of-the-box experience for Discourse sites.
|
# next-gen
|
||||||
|
|
||||||
https://meta.discourse.org/t/horizon-theme/360486
|
**Theme Summary**
|
||||||
|
|
||||||
|
For more information, please see: **url to meta topic**
|
||||||
|
|||||||
+25
-119
@@ -1,134 +1,40 @@
|
|||||||
{
|
{
|
||||||
"name": "Horizon",
|
"name": "Horizon Theme",
|
||||||
"authors": "Design Team",
|
"authors": "Design Team",
|
||||||
"about_url": "https://meta.discourse.org/t/horizon-theme/360486",
|
"about_url": "TODO: Put your theme's public repo or Meta topic URL here",
|
||||||
"license_url": "https://github.com/discourse/horizon/blob/main/LICENSE",
|
"license_url": "TODO: Put your theme's LICENSE URL here",
|
||||||
"learn_more": "https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682",
|
"learn_more": "TODO",
|
||||||
"theme_version": "0.0.1",
|
"theme_version": "0.0.1",
|
||||||
|
"minimum_discourse_version": null,
|
||||||
|
"maximum_discourse_version": null,
|
||||||
|
"assets": {},
|
||||||
"modifiers": {
|
"modifiers": {
|
||||||
"svg_icons": ["fire"],
|
"svg_icons": ["fire"]
|
||||||
"serialize_topic_is_hot": true
|
|
||||||
},
|
},
|
||||||
|
"components": [
|
||||||
|
"https://github.com/discourse/discourse-sidebar-new-topic-button.git",
|
||||||
|
"https://github.com/discourse/discourse-full-width-component.git"
|
||||||
|
],
|
||||||
"color_schemes": {
|
"color_schemes": {
|
||||||
"Horizon": {
|
"Horizon": {
|
||||||
"primary": "1A1A1A",
|
"primary": "1A1A1A",
|
||||||
"secondary": "ffffff",
|
"secondary": "ffffff",
|
||||||
|
"header_background": "f5f8ff",
|
||||||
"tertiary": "595bca",
|
"tertiary": "595bca",
|
||||||
"tertiary-med-or-tertiary": "595bca",
|
"tertiary-low": "d8d9f3",
|
||||||
"selected": "d7dfff",
|
"tertiary-50": "f5f8ff",
|
||||||
"header_background": "ffffff",
|
"selected": "d8d9f3",
|
||||||
"header_primary": "1A1A1A",
|
"hover": "ebebf9"
|
||||||
"hover": "E1E8FF"
|
|
||||||
},
|
},
|
||||||
"Horizon Dark": {
|
"Horizon Dark": {
|
||||||
"primary": "ffffff",
|
"primary": "F1EFF9",
|
||||||
"secondary": "1A1A1A",
|
"secondary": "1e1a36",
|
||||||
"tertiary": "595bca",
|
"header_background": "00091d",
|
||||||
"tertiary-med-or-tertiary": "595bca",
|
"header_primary": "F5F8FF",
|
||||||
"selected": "3b3e56",
|
"tertiary": "6465ab",
|
||||||
"header_background": "1A1A1A",
|
"tertiary-50": "131124",
|
||||||
"header_primary": "ffffff",
|
"selected": "1e1a36",
|
||||||
"hover": "333548"
|
"hover": "131124"
|
||||||
},
|
|
||||||
"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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,107 +0,0 @@
|
|||||||
html {
|
|
||||||
--accent-color: #{$tertiary} !important;
|
|
||||||
--accent-text-color: #ffffff;
|
|
||||||
// Background Colors
|
|
||||||
--background-color: light-dark(
|
|
||||||
oklch(from #{$tertiary} 96% calc(c * 0.125) h),
|
|
||||||
oklch(from #{$tertiary} 10% 0.025 h)
|
|
||||||
) !important;
|
|
||||||
--d-content-background: light-dark(
|
|
||||||
oklch(from #{$secondary} calc(2 * l) c h),
|
|
||||||
oklch(from #{$secondary} l c h)
|
|
||||||
) !important;
|
|
||||||
// HeaderColors
|
|
||||||
--header_primary-low-mid: light-dark(
|
|
||||||
oklch(from #{$tertiary} 73.5% calc(c * 0.5) h),
|
|
||||||
oklch(from #{$tertiary} l calc(c * 0.25) h)
|
|
||||||
) !important;
|
|
||||||
--header_primary-medium: light-dark(
|
|
||||||
oklch(from #{$tertiary} 54% calc(c * 0.5) h),
|
|
||||||
oklch(from #{$tertiary} calc(l * 1.35) calc(c * 0.25) h)
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
// Sidebar Colors
|
|
||||||
--d-sidebar-border-color: light-dark(
|
|
||||||
oklch(from #{$tertiary} 88% calc(c * 0.25) h),
|
|
||||||
oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
|
|
||||||
) !important;
|
|
||||||
--d-sidebar-link-color: light-dark(
|
|
||||||
oklch(from #{$tertiary} calc(l * 0.8) calc(c * 0.25) h),
|
|
||||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
|
|
||||||
) !important;
|
|
||||||
--d-sidebar-active-color: #{$primary} !important;
|
|
||||||
--d-sidebar-suffix-color: light-dark(
|
|
||||||
oklch(from #{$tertiary} l calc(c * 0.9) h),
|
|
||||||
oklch(from #{$tertiary} l calc(c * 0.9) h)
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
// Other Colors
|
|
||||||
--d-selected: light-dark(
|
|
||||||
oklch(from #{$tertiary} 92% calc(c * 0.5) h),
|
|
||||||
oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
--d-nav-color--active: light-dark(
|
|
||||||
oklch(from #{$tertiary} l c h),
|
|
||||||
oklch(from #{$tertiary} calc(l * 1.2) c h)
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
--d-nav-color--hover: light-dark(
|
|
||||||
oklch(from #{$tertiary} l c h),
|
|
||||||
oklch(from #{$tertiary} calc(l * 1.2) c h)
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
--link-color: light-dark(
|
|
||||||
oklch(from #{$tertiary} l c h),
|
|
||||||
oklch(from #{$tertiary} calc(l * 0.95) c h)
|
|
||||||
) !important;
|
|
||||||
--link-color-hover: light-dark(
|
|
||||||
oklch(from #{$tertiary} l c h),
|
|
||||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 2.25) h)
|
|
||||||
) !important;
|
|
||||||
--tertiary-hover: #{$tertiary} !important;
|
|
||||||
|
|
||||||
// Search Colors
|
|
||||||
--search-color: light-dark(
|
|
||||||
oklch(from #{$tertiary} l c h),
|
|
||||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
// Topic Card Colors
|
|
||||||
--topic-card-shadow: light-dark(
|
|
||||||
oklch(from #{$tertiary} calc(l * 1.85) calc(c * 0.5) h),
|
|
||||||
oklch(from #{$tertiary} calc(l * 0.2) calc(c * 0.01) h / 0.25)
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
// Button Colors
|
|
||||||
--button-box-shadow: light-dark(
|
|
||||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.35) h),
|
|
||||||
oklch(from #{$tertiary} calc(l * 0.75) calc(c * 0.5) h)
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color) !important;
|
|
||||||
--d-sidebar-highlight-hover-background: var(--d-selected) !important;
|
|
||||||
--d-sidebar-link-icon-color: var(--d-sidebar-link-color) !important;
|
|
||||||
--d-sidebar-header-color: var(--d-sidebar-link-color) !important;
|
|
||||||
--d-sidebar-header-icon-color: var(--d-sidebar-link-color) !important;
|
|
||||||
--d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color) !important;
|
|
||||||
--d-sidebar-background: var(--background-color) !important;
|
|
||||||
--d-sidebar-footer-fade: var(--background-color) !important;
|
|
||||||
--d-sidebar-prefix-background: var(--d-selected) !important;
|
|
||||||
--d-sidebar-active-prefix-background: light-dark(
|
|
||||||
oklch(from var(--d-selected) calc(l * 0.85) c h),
|
|
||||||
oklch(from var(--d-selected) calc(l * 0.7) c h)
|
|
||||||
) !important;
|
|
||||||
--d-sidebar-highlight-prefix-background: light-dark(
|
|
||||||
oklch(from var(--d-selected) calc(l * 0.85) c h),
|
|
||||||
oklch(from var(--d-selected) calc(l * 0.7) c h)
|
|
||||||
) !important;
|
|
||||||
--d-sidebar-highlight-suffix-color: var(
|
|
||||||
--d-sidebar-active-suffix-color
|
|
||||||
) !important;
|
|
||||||
--d-sidebar-highlight-color: var(--primary) !important;
|
|
||||||
--d-sidebar-highlight-background: var(--d-selected) !important;
|
|
||||||
--d-sidebar-section-link-icon-size: 1em !important;
|
|
||||||
--d-hover: oklch(from var(--d-selected) l c h / 0.75) !important;
|
|
||||||
--d-input-bg-color: var(--d-content-background) !important;
|
|
||||||
}
|
|
||||||
+2
-4
@@ -2,18 +2,16 @@
|
|||||||
@import "buttons";
|
@import "buttons";
|
||||||
@import "chat";
|
@import "chat";
|
||||||
@import "color-choice";
|
@import "color-choice";
|
||||||
|
@import "color-exploration";
|
||||||
@import "composer";
|
@import "composer";
|
||||||
@import "composer-peek-mode";
|
|
||||||
@import "header";
|
@import "header";
|
||||||
@import "hiddenstuff";
|
@import "hiddenstuff";
|
||||||
@import "login";
|
|
||||||
@import "main";
|
@import "main";
|
||||||
@import "misc";
|
@import "misc";
|
||||||
@import "mobile-stuff";
|
@import "mobile-stuff";
|
||||||
@import "nav-pills";
|
@import "nav-pills";
|
||||||
@import "welcome-banner";
|
@import "search-banner";
|
||||||
@import "sidebar";
|
@import "sidebar";
|
||||||
@import "sidebar-new-topic-button";
|
|
||||||
@import "topic";
|
@import "topic";
|
||||||
@import "topic-cards";
|
@import "topic-cards";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
|||||||
@@ -1,6 +0,0 @@
|
|||||||
<script>
|
|
||||||
if(!CSS.supports("(color: hsl(from white h s l))")){
|
|
||||||
window.unsupportedBrowser = true;
|
|
||||||
window.I18n.translations[I18n.locale].js.browser_update = 'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
@import "desktop-horizon-fixes";
|
|
||||||
@import "desktop-full-width";
|
|
||||||
|
|||||||
@@ -1,6 +0,0 @@
|
|||||||
import { apiInitializer } from "discourse/lib/api";
|
|
||||||
import ComposerPeekModeToggle from "../components/composer-peek-mode-toggle";
|
|
||||||
|
|
||||||
export default apiInitializer("1.8.0", (api) => {
|
|
||||||
api.renderInOutlet("before-composer-toggles", ComposerPeekModeToggle);
|
|
||||||
});
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import { apiInitializer } from "discourse/lib/api";
|
|
||||||
|
|
||||||
export default apiInitializer("0.8", (api) => {
|
|
||||||
document.body.classList.add("full-width-enabled");
|
|
||||||
|
|
||||||
// When the sidebar is visible, force the HomeLogo to be in an 'un-minimized' state.
|
|
||||||
api.registerValueTransformer?.(
|
|
||||||
"home-logo-minimized",
|
|
||||||
({ value, context }) => {
|
|
||||||
if (value && context.showSidebar) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import { apiInitializer } from "discourse/lib/api";
|
|
||||||
import ExperimentalScreen from "../components/experimental-screen";
|
|
||||||
import UserColorPaletteSelector from "../components/user-color-palette-selector";
|
|
||||||
|
|
||||||
export default apiInitializer("1.8.0", (api) => {
|
|
||||||
api.renderInOutlet("above-main-container", ExperimentalScreen);
|
|
||||||
api.renderInOutlet("sidebar-footer-actions", UserColorPaletteSelector);
|
|
||||||
|
|
||||||
api.registerValueTransformer("site-setting-enable-welcome-banner", () => {
|
|
||||||
return settings.enable_welcome_banner;
|
|
||||||
});
|
|
||||||
|
|
||||||
api.registerValueTransformer("site-setting-search-experience", () => {
|
|
||||||
return settings.search_experience;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import { apiInitializer } from "discourse/lib/api";
|
||||||
|
import CustomColorHtmlClass from "../components/custom-color-html-class";
|
||||||
|
import ExperimentalScreen from "../components/experimental-screen";
|
||||||
|
|
||||||
|
export default apiInitializer("1.8.0", (api) => {
|
||||||
|
api.renderInOutlet("above-main-container", ExperimentalScreen);
|
||||||
|
api.renderInOutlet("above-main-container", CustomColorHtmlClass);
|
||||||
|
});
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { apiInitializer } from "discourse/lib/api";
|
|
||||||
|
|
||||||
export default apiInitializer("0.8.0", (api) => {
|
|
||||||
api.registerValueTransformer("bulk-select-in-nav-controls", () => {
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
import { apiInitializer } from "discourse/lib/api";
|
|
||||||
import SidebarNewTopicButton from "../components/sidebar-new-topic-button";
|
|
||||||
|
|
||||||
export default apiInitializer("1.8.0", (api) => {
|
|
||||||
api.renderInOutlet("before-sidebar-sections", SidebarNewTopicButton);
|
|
||||||
});
|
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import { apiInitializer } from "discourse/lib/api";
|
||||||
|
import CustomUserPalette from "../components/custom-user-palette";
|
||||||
|
|
||||||
|
export default apiInitializer("1.8.0", (api) => {
|
||||||
|
api.renderInOutlet("sidebar-footer-actions", CustomUserPalette);
|
||||||
|
});
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
import Component from "@glimmer/component";
|
|
||||||
import avatar from "discourse/helpers/avatar";
|
|
||||||
import concatClass from "discourse/helpers/concat-class";
|
|
||||||
import icon from "discourse/helpers/d-icon";
|
|
||||||
import formatDate from "discourse/helpers/format-date";
|
|
||||||
import { i18n } from "discourse-i18n";
|
|
||||||
|
|
||||||
export default class TopicActivityColumn extends Component {
|
|
||||||
get topicUser() {
|
|
||||||
if (
|
|
||||||
moment(this.args.topic.bumped_at).isAfter(this.args.topic.last_posted_at)
|
|
||||||
) {
|
|
||||||
return {
|
|
||||||
user: undefined,
|
|
||||||
username: undefined,
|
|
||||||
activityText: "user_updated",
|
|
||||||
class: "--updated",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.args.topic.posts_count > 1) {
|
|
||||||
return {
|
|
||||||
user: this.args.topic.lastPosterUser,
|
|
||||||
username: this.args.topic.last_poster_username,
|
|
||||||
activityText: "user_replied",
|
|
||||||
class: "--replied",
|
|
||||||
};
|
|
||||||
} else if (this.args.topic.posts_count === 1) {
|
|
||||||
return {
|
|
||||||
user: this.args.topic.creator,
|
|
||||||
username: this.args.topic.creator.username,
|
|
||||||
activityText: "user_posted",
|
|
||||||
class: "--posted",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<span class={{concatClass "topic-activity" this.topicUser.class}}>
|
|
||||||
<div class="topic-activity__user">
|
|
||||||
{{#if this.topicUser.user}}
|
|
||||||
{{avatar this.topicUser.user imageSize="small"}}
|
|
||||||
{{else}}
|
|
||||||
{{icon "pencil"}}
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
{{#if this.topicUser.username}}
|
|
||||||
<span
|
|
||||||
class="topic-activity__username"
|
|
||||||
>{{this.topicUser.username}}</span>
|
|
||||||
{{/if}}
|
|
||||||
<div class="topic-activity__reason">
|
|
||||||
{{i18n (themePrefix this.topicUser.activityText)}}
|
|
||||||
</div>
|
|
||||||
<div class="topic-activity__time">
|
|
||||||
{{formatDate
|
|
||||||
@topic.bumpedAt
|
|
||||||
leaveAgo="true"
|
|
||||||
format="medium-with-ago-and-on"
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import avatar from "discourse/helpers/avatar";
|
||||||
|
|
||||||
|
const TopicAuthorAvatarColumn = <template>
|
||||||
|
<span class="topic-author-avatar">
|
||||||
|
{{avatar @topic.creator imageSize="large"}}
|
||||||
|
</span>
|
||||||
|
</template>;
|
||||||
|
|
||||||
|
export default TopicAuthorAvatarColumn;
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
const TopicAuthorColumn = <template>
|
||||||
|
<span class="topic-author">@{{@topic.creator.username}}</span>
|
||||||
|
</template>;
|
||||||
|
|
||||||
|
export default TopicAuthorColumn;
|
||||||
@@ -2,7 +2,7 @@ import icon from "discourse/helpers/d-icon";
|
|||||||
import gt from "truth-helpers/helpers/gt";
|
import gt from "truth-helpers/helpers/gt";
|
||||||
|
|
||||||
const TopicRepliesColumn = <template>
|
const TopicRepliesColumn = <template>
|
||||||
{{#if (gt @topic.replyCount 1)}}
|
{{#if (gt @topic.posts_count 1)}}
|
||||||
<span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
|
<span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</template>;
|
</template>;
|
||||||
|
|||||||
@@ -1,36 +1,115 @@
|
|||||||
import Component from "@glimmer/component";
|
import Component from "@glimmer/component";
|
||||||
|
import { on } from "@ember/modifier";
|
||||||
|
import { action } from "@ember/object";
|
||||||
import { service } from "@ember/service";
|
import { service } from "@ember/service";
|
||||||
|
import { and } from "truth-helpers";
|
||||||
import icon from "discourse/helpers/d-icon";
|
import icon from "discourse/helpers/d-icon";
|
||||||
import { i18n } from "discourse-i18n";
|
import { i18n } from "discourse-i18n";
|
||||||
|
|
||||||
export default class TopicStatusColumn extends Component {
|
export default class TopicStatusColumn extends Component {
|
||||||
|
@service currentUser;
|
||||||
@service siteSettings;
|
@service siteSettings;
|
||||||
|
|
||||||
get badge() {
|
get canAct() {
|
||||||
if (this.args.topic.is_hot) {
|
return this.currentUser && !this.args.disableActions;
|
||||||
return {
|
}
|
||||||
icon: "fire",
|
|
||||||
text: "topic_hot",
|
|
||||||
className: "--hot",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.args.topic.pinned) {
|
get statusClass() {
|
||||||
return {
|
let classes = ["topic-status-card"];
|
||||||
icon: "thumbtack",
|
if (this.args.topic.bookmarked) {
|
||||||
text: "topic_pinned",
|
classes.push("--bookmark");
|
||||||
className: "--pinned",
|
} else if (this.args.topic.closed && this.args.topic.archived) {
|
||||||
};
|
classes.push("--locked --archived");
|
||||||
|
} else if (this.args.topic.closed) {
|
||||||
|
classes.push("--locked");
|
||||||
|
} else if (this.args.topic.archived) {
|
||||||
|
classes.push("--archived");
|
||||||
|
} else if (this.args.topic.is_warning) {
|
||||||
|
classes.push("--warning");
|
||||||
|
} else if (
|
||||||
|
this.args.showPrivateMessageIcon &&
|
||||||
|
this.args.topic.isPrivateMessage
|
||||||
|
) {
|
||||||
|
classes.push("--private-message");
|
||||||
|
} else if (this.args.topic.pinned) {
|
||||||
|
classes.push("--pinned");
|
||||||
|
} else if (this.args.topic.unpinned) {
|
||||||
|
classes.push("--unpinned");
|
||||||
}
|
}
|
||||||
|
return classes.join(" ");
|
||||||
|
}
|
||||||
|
|
||||||
return null;
|
get heatMap() {
|
||||||
|
return this.args.topic.views > this.siteSettings.topic_views_heat_medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
@action
|
||||||
|
togglePinned(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
this.args.topic.togglePinnedForUser();
|
||||||
}
|
}
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
{{#if this.badge}}
|
{{#if @topic.bookmarked}}
|
||||||
<span class="topic-status-card {{this.badge.className}}">{{icon
|
<span class={{this.statusClass}}>{{icon "bookmark"}}{{i18n
|
||||||
this.badge.icon
|
(themePrefix "topic_bookmarked")
|
||||||
}}{{i18n (themePrefix this.badge.text)}}</span>
|
}}</span>
|
||||||
|
{{/if}}
|
||||||
|
{{#if (and @topic.closed @topic.archived)~}}
|
||||||
|
<span class={{this.statusClass}}>{{i18n
|
||||||
|
(themePrefix "topic_closed_and_archived")
|
||||||
|
}}</span>
|
||||||
|
{{else if @topic.closed}}
|
||||||
|
<span class={{this.statusClass}}>{{i18n
|
||||||
|
(themePrefix "topic_closed")
|
||||||
|
}}</span>
|
||||||
|
{{else if @topic.archived}}
|
||||||
|
<span class={{this.statusClass}}>{{i18n
|
||||||
|
(themePrefix "topic_archived")
|
||||||
|
}}</span>
|
||||||
|
{{/if}}
|
||||||
|
{{#if @topic.is_warning}}
|
||||||
|
<span class={{this.statusClass}}>{{i18n
|
||||||
|
(themePrefix "topic_warning")
|
||||||
|
}}</span>
|
||||||
|
{{else if (and @showPrivateMessageIcon @topic.isPrivateMessage)}}
|
||||||
|
<span class={{this.statusClass}}>{{i18n
|
||||||
|
(themePrefix "topic_personal_message")
|
||||||
|
}}</span>
|
||||||
|
{{/if}}
|
||||||
|
{{#if @topic.pinned}}
|
||||||
|
{{#if this.canAct}}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
{{on "click" this.togglePinned}}
|
||||||
|
class={{this.statusClass}}
|
||||||
|
>{{icon "thumbtack"}}{{i18n (themePrefix "topic_pinned")}}</button>
|
||||||
|
{{else}}
|
||||||
|
<span class={{this.statusClass}}>{{icon "thumbtack"}}{{i18n
|
||||||
|
(themePrefix "topic_pinned")
|
||||||
|
}}</span>
|
||||||
|
{{/if}}
|
||||||
|
{{else if @topic.unpinned}}
|
||||||
|
{{#if this.canAct}}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
{{on "click" this.togglePinned}}
|
||||||
|
class={{this.statusClass}}
|
||||||
|
>{{icon "thumbtack" class="unpinned"}}{{i18n
|
||||||
|
(themePrefix "topic_unpinned")
|
||||||
|
}}</button>
|
||||||
|
{{else}}
|
||||||
|
<span class={{this.statusClass}}>{{icon
|
||||||
|
"thumbtack"
|
||||||
|
class="unpinned"
|
||||||
|
}}{{i18n (themePrefix "topic_unpinned")}}</span>
|
||||||
|
{{/if}}
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if this.heatMap}}
|
||||||
|
<span class="topic-status-card --hot">{{icon "fire"}}{{i18n
|
||||||
|
(themePrefix "topic_hot")
|
||||||
|
}}</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</template>
|
</template>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,37 +0,0 @@
|
|||||||
import Component from "@glimmer/component";
|
|
||||||
import { tracked } from "@glimmer/tracking";
|
|
||||||
import { action } from "@ember/object";
|
|
||||||
import { service } from "@ember/service";
|
|
||||||
import DButton from "discourse/components/d-button";
|
|
||||||
import bodyClass from "discourse/helpers/body-class";
|
|
||||||
|
|
||||||
export default class ComposerPeekModeToggle extends Component {
|
|
||||||
@service composer;
|
|
||||||
@service keyValueStore;
|
|
||||||
|
|
||||||
@tracked
|
|
||||||
peekModeActive = this.keyValueStore.getItem("peekModeActive") === "true";
|
|
||||||
|
|
||||||
get bodyCssClass() {
|
|
||||||
return this.peekModeActive ? "peek-mode-active" : "";
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
togglePeekMode() {
|
|
||||||
this.peekModeActive = !this.peekModeActive;
|
|
||||||
this.keyValueStore.setItem("peekModeActive", this.peekModeActive);
|
|
||||||
if (this.composer.showPreview) {
|
|
||||||
this.composer.togglePreview();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
<template>
|
|
||||||
{{bodyClass this.bodyCssClass}}
|
|
||||||
<DButton
|
|
||||||
@action={{this.togglePeekMode}}
|
|
||||||
@preventFocus={{true}}
|
|
||||||
@icon="discourse-sidebar"
|
|
||||||
class="btn-mini-toggle no-text peek-mode-toggle btn-transparent"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import Component from "@glimmer/component";
|
||||||
|
import { concat } from "@ember/helper";
|
||||||
|
import { service } from "@ember/service";
|
||||||
|
import htmlClass from "discourse/helpers/html-class";
|
||||||
|
|
||||||
|
export default class CustomColorHtmlClass extends Component {
|
||||||
|
@service customColor;
|
||||||
|
|
||||||
|
<template>
|
||||||
|
{{htmlClass (concat "custom-color-" this.customColor.color)}}
|
||||||
|
</template>
|
||||||
|
}
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
import icon from "discourse/helpers/d-icon";
|
||||||
|
import DMenu from "float-kit/components/d-menu";
|
||||||
|
import SitePaletteMenuItem from "./site-palette-menu-item";
|
||||||
|
|
||||||
|
const PALETTES = [
|
||||||
|
{
|
||||||
|
label: "Marigold",
|
||||||
|
name: "marigold",
|
||||||
|
color: "#d3881f",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Violet",
|
||||||
|
name: "violet",
|
||||||
|
color: "#9b15de",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Lily",
|
||||||
|
name: "lily",
|
||||||
|
color: "#CC336F",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Clover",
|
||||||
|
name: "clover",
|
||||||
|
color: "#45a06e",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Royal",
|
||||||
|
name: "royal",
|
||||||
|
color: "#4169e1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Horizon",
|
||||||
|
name: "horizon",
|
||||||
|
color: "#595bca",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const DEFAULT_PALETTE_NAME = "horizon";
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<DMenu
|
||||||
|
@identifier="user-color-palette"
|
||||||
|
@placementStrategy="fixed"
|
||||||
|
class="btn-flat user-color-palette sidebar-footer-actions-button"
|
||||||
|
@inline={{true}}
|
||||||
|
>
|
||||||
|
<:trigger>
|
||||||
|
{{icon "paintbrush"}}
|
||||||
|
</:trigger>
|
||||||
|
<:content>
|
||||||
|
<div class="color-palette-menu">
|
||||||
|
<div class="color-palette-menu__content">
|
||||||
|
{{#each PALETTES as |colorPalette|}}
|
||||||
|
<SitePaletteMenuItem @colorPalette={{colorPalette}} />
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</:content>
|
||||||
|
</DMenu>
|
||||||
|
</template>
|
||||||
@@ -2,14 +2,10 @@ import Component from "@glimmer/component";
|
|||||||
import { tracked } from "@glimmer/tracking";
|
import { tracked } from "@glimmer/tracking";
|
||||||
import { action } from "@ember/object";
|
import { action } from "@ember/object";
|
||||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||||
import { service } from "@ember/service";
|
|
||||||
import { htmlSafe } from "@ember/template";
|
import { htmlSafe } from "@ember/template";
|
||||||
import { bind } from "discourse/lib/decorators";
|
import { bind } from "discourse/lib/decorators";
|
||||||
|
|
||||||
const DO_NOT_RENDER_LIST = ["login"];
|
|
||||||
|
|
||||||
export default class ExperimentalScreen extends Component {
|
export default class ExperimentalScreen extends Component {
|
||||||
@service router;
|
|
||||||
@tracked left = 0;
|
@tracked left = 0;
|
||||||
@tracked right = 0;
|
@tracked right = 0;
|
||||||
resizeObserver;
|
resizeObserver;
|
||||||
@@ -32,10 +28,6 @@ export default class ExperimentalScreen extends Component {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
get shouldRender() {
|
|
||||||
return !DO_NOT_RENDER_LIST.includes(this.router.currentRouteName);
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
@action
|
||||||
onInsert(element) {
|
onInsert(element) {
|
||||||
this.calculateDistance(element);
|
this.calculateDistance(element);
|
||||||
@@ -50,18 +42,16 @@ export default class ExperimentalScreen extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
{{#if this.shouldRender}}
|
<ul
|
||||||
<ul
|
class="experimental-screen"
|
||||||
class="experimental-screen"
|
{{didInsert this.onInsert}}
|
||||||
{{didInsert this.onInsert}}
|
style={{this.distanceStyles}}
|
||||||
style={{this.distanceStyles}}
|
>
|
||||||
>
|
<li class="experimental-screen__top-left"></li>
|
||||||
<li class="experimental-screen__top-left"></li>
|
<li class="experimental-screen__top-right"></li>
|
||||||
<li class="experimental-screen__top-right"></li>
|
<li class="experimental-screen__bottom-left"></li>
|
||||||
<li class="experimental-screen__bottom-left"></li>
|
<li class="experimental-screen__bottom-right"></li>
|
||||||
<li class="experimental-screen__bottom-right"></li>
|
<li class="experimental-screen__bottom-bar"></li>
|
||||||
<li class="experimental-screen__bottom-bar"></li>
|
</ul>
|
||||||
</ul>
|
|
||||||
{{/if}}
|
|
||||||
</template>
|
</template>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,96 +0,0 @@
|
|||||||
import Component from "@glimmer/component";
|
|
||||||
import { tracked } from "@glimmer/tracking";
|
|
||||||
import { action } from "@ember/object";
|
|
||||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
|
||||||
import didUpdate from "@ember/render-modifiers/modifiers/did-update";
|
|
||||||
import { service } from "@ember/service";
|
|
||||||
import { gt } from "truth-helpers";
|
|
||||||
import CreateTopicButton from "discourse/components/create-topic-button";
|
|
||||||
import not from "truth-helpers/helpers/not";
|
|
||||||
|
|
||||||
export default class SidebarNewTopicButton extends Component {
|
|
||||||
@service composer;
|
|
||||||
@service currentUser;
|
|
||||||
@service siteSettings;
|
|
||||||
@service router;
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
<template>
|
|
||||||
{{#if this.shouldRender}}
|
|
||||||
<div
|
|
||||||
class="sidebar-new-topic-button__wrapper"
|
|
||||||
{{didInsert this.getCategoryandTag}}
|
|
||||||
{{didUpdate this.getCategoryandTag this.router.currentRoute}}
|
|
||||||
>
|
|
||||||
<CreateTopicButton
|
|
||||||
@canCreateTopic={{this.canCreateTopic}}
|
|
||||||
@action={{this.createNewTopic}}
|
|
||||||
@disabled={{this.createTopicDisabled}}
|
|
||||||
@label="topic.create"
|
|
||||||
@btnClass={{this.createTopicClass}}
|
|
||||||
@canCreateTopicOnTag={{not this.tagRestricted}}
|
|
||||||
@showDrafts={{gt this.draftCount 0}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
</template>
|
|
||||||
}
|
|
||||||
+11
-14
@@ -1,43 +1,40 @@
|
|||||||
import Component from "@glimmer/component";
|
import Component from "@glimmer/component";
|
||||||
|
import { fn } from "@ember/helper";
|
||||||
import { action } from "@ember/object";
|
import { action } from "@ember/object";
|
||||||
import { service } from "@ember/service";
|
import { service } from "@ember/service";
|
||||||
import { htmlSafe } from "@ember/template";
|
import { htmlSafe } from "@ember/template";
|
||||||
import DButton from "discourse/components/d-button";
|
import DButton from "discourse/components/d-button";
|
||||||
import concatClass from "discourse/helpers/concat-class";
|
import concatClass from "discourse/helpers/concat-class";
|
||||||
|
|
||||||
export default class UserColorPaletteMenuItem extends Component {
|
export default class SitePaletteMenuItem extends Component {
|
||||||
@service site;
|
@service customColor;
|
||||||
@service session;
|
|
||||||
|
|
||||||
get siteStyle() {
|
get siteStyle() {
|
||||||
return `--icon-color: ${this.args.colorPalette.accent}`;
|
return `--icon-color: ${this.args.colorPalette.color}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
get activeClass() {
|
get activeClass() {
|
||||||
if (this.args.selectedColorPaletteId === this.args.colorPalette.id) {
|
if (this.customColor.color === this.args.colorPalette.name) {
|
||||||
return "active";
|
return "active";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@action
|
@action
|
||||||
paletteSelected() {
|
handleInput(colorPalette) {
|
||||||
this.args.paletteSelected(this.args.colorPalette);
|
this.customColor.setColor(colorPalette.name);
|
||||||
}
|
}
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="color-palette-menu__item" data-color={{@colorPalette.name}}>
|
||||||
class="user-color-palette-menu__item"
|
|
||||||
data-color-palette={{@colorPalette.name}}
|
|
||||||
>
|
|
||||||
<DButton
|
<DButton
|
||||||
class={{concatClass
|
class={{concatClass
|
||||||
"btn-flat user-color-palette-menu__item-choice"
|
"btn-flat color-palette-menu__item-choice"
|
||||||
this.activeClass
|
this.activeClass
|
||||||
}}
|
}}
|
||||||
style={{htmlSafe this.siteStyle}}
|
style={{htmlSafe this.siteStyle}}
|
||||||
@icon="circle"
|
@icon="circle"
|
||||||
@translatedLabel={{@colorPalette.name}}
|
@translatedLabel={{@colorPalette.label}}
|
||||||
@action={{this.paletteSelected}}
|
@action={{fn this.handleInput @colorPalette}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -1,209 +0,0 @@
|
|||||||
import Component from "@glimmer/component";
|
|
||||||
import { tracked } from "@glimmer/tracking";
|
|
||||||
import { action } from "@ember/object";
|
|
||||||
import { service } from "@ember/service";
|
|
||||||
import { isEmpty } from "@ember/utils";
|
|
||||||
import { Promise } from "rsvp";
|
|
||||||
import concatClass from "discourse/helpers/concat-class";
|
|
||||||
import icon from "discourse/helpers/d-icon";
|
|
||||||
import { reload } from "discourse/helpers/page-reloader";
|
|
||||||
import { ajax } from "discourse/lib/ajax";
|
|
||||||
import {
|
|
||||||
listColorSchemes,
|
|
||||||
updateColorSchemeCookie,
|
|
||||||
} from "discourse/lib/color-scheme-picker";
|
|
||||||
import cookie from "discourse/lib/cookie";
|
|
||||||
import DMenu from "float-kit/components/d-menu";
|
|
||||||
import UserColorPaletteMenuItem from "./user-color-palette-menu-item";
|
|
||||||
|
|
||||||
const HORIZON_PALETTES = [
|
|
||||||
"Horizon",
|
|
||||||
"Marigold",
|
|
||||||
"Violet",
|
|
||||||
"Lily",
|
|
||||||
"Clover",
|
|
||||||
"Royal",
|
|
||||||
];
|
|
||||||
|
|
||||||
export default class UserColorPaletteSelector extends Component {
|
|
||||||
@service currentUser;
|
|
||||||
@service keyValueStore;
|
|
||||||
@service site;
|
|
||||||
@service session;
|
|
||||||
@service interfaceColor;
|
|
||||||
@tracked anonColorPaletteId = this.#loadAnonColorPalette();
|
|
||||||
@tracked userColorPaletteId = this.session.userColorSchemeId;
|
|
||||||
@tracked cssLoaded = true;
|
|
||||||
|
|
||||||
get userColorPalettes() {
|
|
||||||
const availablePalettes = listColorSchemes(this.site)
|
|
||||||
.map((userPalette) => {
|
|
||||||
return {
|
|
||||||
...userPalette,
|
|
||||||
accent: `#${
|
|
||||||
userPalette.colors.find((color) => color.name === "tertiary").hex
|
|
||||||
}`,
|
|
||||||
};
|
|
||||||
})
|
|
||||||
.filter((userPalette) => {
|
|
||||||
return HORIZON_PALETTES.some((palette) => {
|
|
||||||
return userPalette.name.toLowerCase().includes(palette.toLowerCase());
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.sort();
|
|
||||||
|
|
||||||
// Match the light scheme with the corresponding dark id based in the name
|
|
||||||
return (
|
|
||||||
availablePalettes
|
|
||||||
.map((palette) => {
|
|
||||||
if (palette.is_dark) {
|
|
||||||
return palette;
|
|
||||||
}
|
|
||||||
|
|
||||||
const normalizedLightName = palette.name.toLowerCase();
|
|
||||||
|
|
||||||
const correspondingDarkModeId = availablePalettes.find(
|
|
||||||
(item) =>
|
|
||||||
item.is_dark &&
|
|
||||||
normalizedLightName ===
|
|
||||||
item.name.toLowerCase().replace(/\s+dark$/, "")
|
|
||||||
)?.id;
|
|
||||||
|
|
||||||
return {
|
|
||||||
...palette,
|
|
||||||
correspondingDarkModeId,
|
|
||||||
};
|
|
||||||
})
|
|
||||||
// Only want to show palettes that have corresponding light/dark modes
|
|
||||||
.filter((palette) => !palette.is_dark)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
get selectedColorPaletteId() {
|
|
||||||
if (this.currentUser) {
|
|
||||||
return this.userColorPaletteId;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.anonColorPaletteId;
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
onRegisterMenu(api) {
|
|
||||||
this.dMenu = api;
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
paletteSelected(selectedPalette) {
|
|
||||||
if (selectedPalette.id === this.selectedColorPaletteId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.#updatePreference(selectedPalette);
|
|
||||||
this.#changeSiteColorPalette(selectedPalette);
|
|
||||||
this.dMenu.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
#updatePreference(selectedPalette) {
|
|
||||||
updateColorSchemeCookie(selectedPalette.id);
|
|
||||||
updateColorSchemeCookie(selectedPalette.correspondingDarkModeId, {
|
|
||||||
dark: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!this.currentUser) {
|
|
||||||
this.anonColorPaletteId = selectedPalette.id;
|
|
||||||
} else {
|
|
||||||
this.userColorPaletteId = selectedPalette.id;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#loadAnonColorPalette() {
|
|
||||||
const storedAnonPaletteId = cookie("color_scheme_id");
|
|
||||||
if (storedAnonPaletteId) {
|
|
||||||
return parseInt(storedAnonPaletteId, 10);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async #changeSiteColorPalette(colorPalette) {
|
|
||||||
this.cssLoaded = false;
|
|
||||||
|
|
||||||
const lightPaletteId = colorPalette.id;
|
|
||||||
const darkPaletteId = colorPalette.correspondingDarkModeId;
|
|
||||||
const darkTag = document.querySelector("link.dark-scheme");
|
|
||||||
|
|
||||||
// TODO(osama) once we have built-in light/dark modes for each palette, we
|
|
||||||
// can stop making the 2nd ajax call for the dark palette and replace it
|
|
||||||
// with a include_dark_scheme param on the ajax call for the light
|
|
||||||
// palette which will include the href for the dark palette in the response
|
|
||||||
if (!darkTag) {
|
|
||||||
reload();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const lightPaletteInfo = await ajax(
|
|
||||||
`/color-scheme-stylesheet/${lightPaletteId}/${colorPalette.theme_id}.json`
|
|
||||||
);
|
|
||||||
const darkPaletteInfo = await ajax(
|
|
||||||
`/color-scheme-stylesheet/${darkPaletteId}/${colorPalette.theme_id}.json`
|
|
||||||
);
|
|
||||||
|
|
||||||
Promise.all([
|
|
||||||
this.#preloadAndSwapCSS(lightPaletteInfo.new_href, "light-scheme"),
|
|
||||||
this.#preloadAndSwapCSS(darkPaletteInfo.new_href, "dark-scheme"),
|
|
||||||
]).then(() => {
|
|
||||||
this.cssLoaded = true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
#preloadAndSwapCSS(newHref, existingLinkClass) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
const existingLink = document.querySelector(
|
|
||||||
`link[rel='stylesheet'].${existingLinkClass}`
|
|
||||||
);
|
|
||||||
const newTag = document.createElement("link");
|
|
||||||
|
|
||||||
newTag.rel = "preload";
|
|
||||||
newTag.href = newHref;
|
|
||||||
newTag.as = "style";
|
|
||||||
newTag.onload = () => {
|
|
||||||
existingLink.href = newHref;
|
|
||||||
newTag.remove();
|
|
||||||
resolve();
|
|
||||||
};
|
|
||||||
|
|
||||||
document.head.appendChild(newTag);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
<template>
|
|
||||||
{{#unless (isEmpty this.userColorPalettes)}}
|
|
||||||
<DMenu
|
|
||||||
@identifier="user-color-palette-selector"
|
|
||||||
@placementStrategy="fixed"
|
|
||||||
@onRegisterApi={{this.onRegisterMenu}}
|
|
||||||
class={{concatClass
|
|
||||||
"btn-flat user-color-palette-selector sidebar-footer-actions-button"
|
|
||||||
(if this.cssLoaded "user-color-palette-css-loaded")
|
|
||||||
}}
|
|
||||||
data-selected-color-palette-id={{this.selectedColorPaletteId}}
|
|
||||||
@inline={{true}}
|
|
||||||
>
|
|
||||||
<:trigger>
|
|
||||||
{{icon "paintbrush"}}
|
|
||||||
</:trigger>
|
|
||||||
<:content>
|
|
||||||
<div class="user-color-palette-menu">
|
|
||||||
<div class="user-color-palette-menu__content">
|
|
||||||
{{#each this.userColorPalettes as |colorPalette|}}
|
|
||||||
<UserColorPaletteMenuItem
|
|
||||||
@selectedColorPaletteId={{this.selectedColorPaletteId}}
|
|
||||||
@colorPalette={{colorPalette}}
|
|
||||||
@paletteSelected={{this.paletteSelected}}
|
|
||||||
/>
|
|
||||||
{{/each}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</:content>
|
|
||||||
</DMenu>
|
|
||||||
{{/unless}}
|
|
||||||
</template>
|
|
||||||
}
|
|
||||||
@@ -1,25 +1,27 @@
|
|||||||
import { withPluginApi } from "discourse/lib/plugin-api";
|
import { withPluginApi } from "discourse/lib/plugin-api";
|
||||||
import TopicActivityColumn from "../components/card/topic-activity-column";
|
import TopicAuthorAvatarColumn from "../components/card/topic-author-avatar-column";
|
||||||
|
import TopicAuthorColumn from "../components/card/topic-author-column";
|
||||||
import TopicCategoryColumn from "../components/card/topic-category-column";
|
import TopicCategoryColumn from "../components/card/topic-category-column";
|
||||||
import TopicLikesColumn from "../components/card/topic-likes-column";
|
import TopicLikesColumn from "../components/card/topic-likes-column";
|
||||||
import TopicRepliesColumn from "../components/card/topic-replies-column";
|
import TopicRepliesColumn from "../components/card/topic-replies-column";
|
||||||
import TopicStatusColumn from "../components/card/topic-status-column";
|
import TopicStatusColumn from "../components/card/topic-status-column";
|
||||||
|
|
||||||
const TopicActivity = <template>
|
const TopicAuthor = <template>
|
||||||
<td class="topic-activity-data">
|
<td class="topic-author-data">
|
||||||
<TopicActivityColumn @topic={{@topic}} />
|
<TopicAuthorColumn @topic={{@topic}} />
|
||||||
</td>
|
</td>
|
||||||
</template>;
|
</template>;
|
||||||
|
|
||||||
const TopicStatus = <template>
|
const TopicAuthorAvatar = <template>
|
||||||
<td class="topic-status-data">
|
<td class="topic-author-avatar-data">
|
||||||
<TopicStatusColumn @topic={{@topic}} />
|
<TopicAuthorAvatarColumn @topic={{@topic}} />
|
||||||
</td>
|
</td>
|
||||||
</template>;
|
</template>;
|
||||||
|
|
||||||
const TopicCategory = <template>
|
const TopicCategoryStatus = <template>
|
||||||
<td class="topic-category-data">
|
<td class="topic-category-status-data">
|
||||||
<TopicCategoryColumn @topic={{@topic}} />
|
<TopicCategoryColumn @topic={{@topic}} />
|
||||||
|
<TopicStatusColumn @topic={{@topic}} />
|
||||||
</td>
|
</td>
|
||||||
</template>;
|
</template>;
|
||||||
|
|
||||||
@@ -33,35 +35,30 @@ const TopicLikesReplies = <template>
|
|||||||
export default {
|
export default {
|
||||||
name: "topic-list-customizations",
|
name: "topic-list-customizations",
|
||||||
|
|
||||||
initialize(container) {
|
initialize() {
|
||||||
const router = container.lookup("service:router");
|
|
||||||
withPluginApi("1.39.0", (api) => {
|
withPluginApi("1.39.0", (api) => {
|
||||||
api.registerValueTransformer(
|
api.registerValueTransformer(
|
||||||
"topic-list-columns",
|
"topic-list-columns",
|
||||||
({ value: columns }) => {
|
({ value: columns }) => {
|
||||||
columns.add("topic-status", {
|
columns.add("topic-author", {
|
||||||
item: TopicStatus,
|
item: TopicAuthor,
|
||||||
|
after: "activity",
|
||||||
|
});
|
||||||
|
columns.add("topic-category-status", {
|
||||||
|
item: TopicCategoryStatus,
|
||||||
after: "topic-author",
|
after: "topic-author",
|
||||||
});
|
});
|
||||||
columns.add("topic-category", {
|
columns.add("topic-author-avatar", {
|
||||||
item: TopicCategory,
|
item: TopicAuthorAvatar,
|
||||||
after: "topic-status",
|
after: "topic-category-status",
|
||||||
});
|
});
|
||||||
|
|
||||||
columns.add("topic-likes-replies", {
|
columns.add("topic-likes-replies", {
|
||||||
item: TopicLikesReplies,
|
item: TopicLikesReplies,
|
||||||
after: "topic-author-avatar",
|
after: "topic-author-avatar",
|
||||||
});
|
});
|
||||||
|
columns.delete("posters");
|
||||||
columns.delete("views");
|
columns.delete("views");
|
||||||
columns.delete("replies");
|
columns.delete("replies");
|
||||||
if (!router.currentRouteName.includes("userPrivateMessages")) {
|
|
||||||
columns.add("topic-activity", {
|
|
||||||
item: TopicActivity,
|
|
||||||
after: "title",
|
|
||||||
});
|
|
||||||
columns.delete("posters");
|
|
||||||
columns.delete("activity");
|
|
||||||
}
|
|
||||||
return columns;
|
return columns;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@@ -69,12 +66,8 @@ export default {
|
|||||||
api.registerValueTransformer(
|
api.registerValueTransformer(
|
||||||
"topic-list-item-class",
|
"topic-list-item-class",
|
||||||
({ value: classes, context }) => {
|
({ value: classes, context }) => {
|
||||||
if (
|
if (context.topic.pinned || context.topic.pinned_globally) {
|
||||||
context.topic.is_hot ||
|
classes.push("--pinned");
|
||||||
context.topic.pinned ||
|
|
||||||
context.topic.pinned_globally
|
|
||||||
) {
|
|
||||||
classes.push("--has-status-card");
|
|
||||||
}
|
}
|
||||||
return classes;
|
return classes;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { tracked } from "@glimmer/tracking";
|
||||||
|
import { action } from "@ember/object";
|
||||||
|
import Service, { service } from "@ember/service";
|
||||||
|
import { DEFAULT_PALETTE_NAME } from "../components/custom-user-palette";
|
||||||
|
|
||||||
|
const CUSTOM_COLOR_KEY = "d-custom-color-preference";
|
||||||
|
|
||||||
|
export default class CustomColor extends Service {
|
||||||
|
@service keyValueStore;
|
||||||
|
@tracked
|
||||||
|
color = this.keyValueStore.getItem(CUSTOM_COLOR_KEY) || DEFAULT_PALETTE_NAME;
|
||||||
|
|
||||||
|
@action
|
||||||
|
setColor(color) {
|
||||||
|
this.color = color;
|
||||||
|
this.keyValueStore.setItem(CUSTOM_COLOR_KEY, color);
|
||||||
|
}
|
||||||
|
}
|
||||||
+7
-4
@@ -1,9 +1,12 @@
|
|||||||
en:
|
en:
|
||||||
theme_metadata:
|
theme_metadata:
|
||||||
description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
|
description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
|
||||||
|
topic_bookmarked: "Bookmarked"
|
||||||
|
topic_closed_archived: "Closed and archived"
|
||||||
|
topic_closed: "Closed"
|
||||||
|
topic_archived: "Archived"
|
||||||
|
topic_warning: "Warning"
|
||||||
|
topic_personal_message: "Personal message"
|
||||||
topic_pinned: "Pinned"
|
topic_pinned: "Pinned"
|
||||||
|
topic_unpinned: "Unpinned"
|
||||||
topic_hot: "Hot"
|
topic_hot: "Hot"
|
||||||
user_replied: "replied"
|
|
||||||
user_posted: "posted"
|
|
||||||
user_updated: "updated"
|
|
||||||
|
|
||||||
|
|||||||
+8
-17
@@ -18,14 +18,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.has-full-page-chat .chat-replying-indicator-container {
|
.has-full-page-chat .chat-replying-indicator-container {
|
||||||
margin-bottom: var(--main-grid-gap);
|
margin-bottom: var(--d-border-radius-large);
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-full-page-chat .chat-selection-management {
|
.has-full-page-chat .chat-selection-management {
|
||||||
margin-bottom: var(--main-grid-gap);
|
margin-bottom: var(--d-border-radius-large);
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
@@ -36,18 +36,15 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
max-width: unset !important;
|
max-width: unset !important;
|
||||||
|
@media screen and (max-width: 488px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
container: content-width / inline-size;
|
container: content-width / inline-size;
|
||||||
@media screen and (max-width: 488px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@include breakpoint(tablet) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
li {
|
li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -62,12 +59,6 @@
|
|||||||
height: var(--d-border-radius-large);
|
height: var(--d-border-radius-large);
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
z-index: 399;
|
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)
|
|
||||||
);
|
|
||||||
-webkit-mask: radial-gradient(
|
-webkit-mask: radial-gradient(
|
||||||
circle at var(--d-border-radius-large) var(--d-border-radius-large),
|
circle at var(--d-border-radius-large) var(--d-border-radius-large),
|
||||||
transparent var(--d-border-radius-large),
|
transparent var(--d-border-radius-large),
|
||||||
@@ -86,7 +77,7 @@
|
|||||||
}
|
}
|
||||||
&__bottom-left {
|
&__bottom-left {
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
bottom: var(--main-grid-gap);
|
bottom: var(--d-border-radius-large);
|
||||||
left: var(--left-distance);
|
left: var(--left-distance);
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
bottom: calc(var(--d-border-radius-large) * 2);
|
bottom: calc(var(--d-border-radius-large) * 2);
|
||||||
@@ -94,7 +85,7 @@
|
|||||||
}
|
}
|
||||||
&__bottom-right {
|
&__bottom-right {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
bottom: var(--main-grid-gap);
|
bottom: var(--d-border-radius-large);
|
||||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
bottom: calc(var(--d-border-radius-large) * 2);
|
bottom: calc(var(--d-border-radius-large) * 2);
|
||||||
@@ -107,7 +98,7 @@
|
|||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: var(--left-distance);
|
left: var(--left-distance);
|
||||||
height: var(--main-grid-gap);
|
height: var(--d-border-radius-large);
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
height: calc(var(--d-border-radius-large) * 2);
|
height: calc(var(--d-border-radius-large) * 2);
|
||||||
}
|
}
|
||||||
|
|||||||
+3
-12
@@ -66,10 +66,7 @@
|
|||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.discourse-no-touch & {
|
.discourse-no-touch & {
|
||||||
background: light-dark(
|
background: oklch(from var(--accent-color) 40% c h) !important;
|
||||||
oklch(from var(--accent-color) 40% c h),
|
|
||||||
oklch(from var(--accent-color) 50% c h)
|
|
||||||
);
|
|
||||||
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
|
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
|
||||||
color: var(--accent-text-color);
|
color: var(--accent-text-color);
|
||||||
.d-icon {
|
.d-icon {
|
||||||
@@ -79,18 +76,12 @@
|
|||||||
}
|
}
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
.discourse-no-touch & {
|
.discourse-no-touch & {
|
||||||
background: light-dark(
|
background: oklch(from var(--accent-color) 40% c h) !important;
|
||||||
oklch(from var(--accent-color) 40% c h),
|
|
||||||
oklch(from var(--accent-color) 50% c h)
|
|
||||||
);
|
|
||||||
box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
|
box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
|
||||||
color: var(--accent-text-color);
|
color: var(--accent-text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
background: light-dark(
|
background: oklch(from var(--accent-color) 30% c h) !important;
|
||||||
oklch(from var(--accent-color) 40% c h),
|
|
||||||
oklch(from var(--accent-color) 50% c h)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+2
-5
@@ -13,7 +13,7 @@ body.has-full-page-chat {
|
|||||||
|
|
||||||
.chat-drawer-container {
|
.chat-drawer-container {
|
||||||
.is-expanded & {
|
.is-expanded & {
|
||||||
box-shadow: 0px 0px 0px 2px var(--tertiary-medium);
|
box-shadow: 0px 0px 0px 2px var(--d-chat-border);
|
||||||
}
|
}
|
||||||
.chat-drawer.is-expanded & {
|
.chat-drawer.is-expanded & {
|
||||||
border: none;
|
border: none;
|
||||||
@@ -27,6 +27,7 @@ body.has-full-page-chat {
|
|||||||
.chat-drawer .channels-list-container .chat-channel-row {
|
.chat-drawer .channels-list-container .chat-channel-row {
|
||||||
margin-bottom: var(--spacing-block-xs);
|
margin-bottom: var(--spacing-block-xs);
|
||||||
font-size: var(--font-up-1);
|
font-size: var(--font-up-1);
|
||||||
|
border-radius: var(--d-border-radius);
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--d-sidebar-active-background);
|
background-color: var(--d-sidebar-active-background);
|
||||||
@@ -50,7 +51,3 @@ body.has-full-page-chat {
|
|||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
|
|
||||||
z-index: z("composer", "content") + 1;
|
|
||||||
}
|
|
||||||
|
|||||||
+25
-1
@@ -1,4 +1,4 @@
|
|||||||
.user-color-palette-menu {
|
.color-palette-menu {
|
||||||
&__item .btn-icon-text.btn-flat {
|
&__item .btn-icon-text.btn-flat {
|
||||||
background-color: var(--d-content-background);
|
background-color: var(--d-content-background);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -23,3 +23,27 @@
|
|||||||
.user-color-palette-content .fk-d-menu__inner-content {
|
.user-color-palette-content .fk-d-menu__inner-content {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html.custom-color-horizon {
|
||||||
|
--accent-base-color: #595bca;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.custom-color-marigold {
|
||||||
|
--accent-base-color: #d3881f;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.custom-color-violet {
|
||||||
|
--accent-base-color: #9b15de;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.custom-color-lily {
|
||||||
|
--accent-base-color: #cc338c;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.custom-color-clover {
|
||||||
|
--accent-base-color: #45a06e;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.custom-color-royal {
|
||||||
|
--accent-base-color: #4169e1;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,12 +1,108 @@
|
|||||||
:root {
|
:root {
|
||||||
|
--accent-base-color: #595bca;
|
||||||
|
--accent-color: light-dark(
|
||||||
|
var(--accent-base-color),
|
||||||
|
oklch(from var(--accent-base-color) calc(l * 0.95) c h)
|
||||||
|
);
|
||||||
|
// --background-color: light-dark(#f5f8ff, #101112);
|
||||||
|
--background-color: light-dark(
|
||||||
|
oklch(from var(--accent-color) 98% calc(c * 0.25) h),
|
||||||
|
oklch(from var(--accent-color) 10% 0.025 h)
|
||||||
|
);
|
||||||
|
--header_primary-low-mid: light-dark(
|
||||||
|
oklch(from var(--background-color) calc(l * 0.75) calc(c * 2) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 1) calc(c * 0.25) h)
|
||||||
|
);
|
||||||
|
--header_primary-medium: light-dark(
|
||||||
|
oklch(from var(--background-color) calc(l * 0.55) calc(c * 2) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 1.35) calc(c * 0.25) h)
|
||||||
|
);
|
||||||
|
--d-content-background: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 2) 0 h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.375) 0 h)
|
||||||
|
);
|
||||||
|
--primary-100: light-dark(#f2f2f2, #333333);
|
||||||
|
--primary-300: light-dark(#d1d1d1, #838383);
|
||||||
|
--primary-low: light-dark(#e9e9e9, #313131);
|
||||||
|
--primary-high: light-dark(#646464, #a6a6a6);
|
||||||
|
--primary-very-high: light-dark(#434343, #c7c7c7);
|
||||||
|
--d-hover: oklch(from var(--d-selected) l c h / 0.75);
|
||||||
|
--tertiary: var(--accent-color);
|
||||||
|
--tertiary-medium: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.25) h)
|
||||||
|
);
|
||||||
|
--tertiary-very-low: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 1.75) calc(c * 0.25) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.5) calc(c * 0.25) h)
|
||||||
|
);
|
||||||
|
--tertiary-med-or-tertiary: var(--accent-color);
|
||||||
|
--tertiary-low: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 1.6) calc(c * 0.25) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.6) calc(c * 0.25) h)
|
||||||
|
);
|
||||||
|
--tertiary-300: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h)
|
||||||
|
);
|
||||||
|
--tertiary-high: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 1) c h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 1) c h)
|
||||||
|
);
|
||||||
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
|
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
|
||||||
|
--search-color: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h)
|
||||||
|
);
|
||||||
|
--search-banner-text-color: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
|
||||||
|
);
|
||||||
|
--topic-card-shadow: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 1.85) calc(c * 0.5) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
|
||||||
|
);
|
||||||
|
--button-box-shadow: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.35) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
|
||||||
|
);
|
||||||
|
--d-selected: light-dark(
|
||||||
|
oklch(from var(--background-color) calc(l * 0.9375) calc(c * 2) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
|
||||||
|
);
|
||||||
--d-sidebar-highlight-hover-background: var(--d-selected);
|
--d-sidebar-highlight-hover-background: var(--d-selected);
|
||||||
|
--d-sidebar-border-color: light-dark(
|
||||||
|
oklch(from var(--background-color) calc(l * 0.9) calc(c * 1) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
|
||||||
|
);
|
||||||
|
--d-chat-border: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
|
||||||
|
);
|
||||||
|
--accent-text-color: light-dark(#ffffff, #212121);
|
||||||
|
--d-nav-color--active: var(--accent-color);
|
||||||
|
--d-sidebar-background: var(--background-color);
|
||||||
|
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
|
||||||
|
--d-sidebar-link-color: light-dark(
|
||||||
|
oklch(from var(--accent-color) calc(l * 0.8) calc(c * 0.25) h),
|
||||||
|
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h)
|
||||||
|
);
|
||||||
--d-sidebar-link-icon-color: var(--d-sidebar-link-color);
|
--d-sidebar-link-icon-color: var(--d-sidebar-link-color);
|
||||||
--d-sidebar-header-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-header-icon-color: var(--d-sidebar-link-color);
|
||||||
|
--d-sidebar-suffix-color: light-dark(
|
||||||
|
oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h),
|
||||||
|
oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h)
|
||||||
|
);
|
||||||
--d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
|
--d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
|
||||||
--d-sidebar-background: var(--background-color);
|
--link-color: light-dark(
|
||||||
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
|
var(--accent-base-color),
|
||||||
|
oklch(from var(--accent-base-color) calc(l * 0.95) c h)
|
||||||
|
);
|
||||||
|
--link-color-hover: light-dark(
|
||||||
|
var(--accent-base-color),
|
||||||
|
oklch(from var(--accent-base-color) calc(l * 1.5) calc(c * 2.25) h)
|
||||||
|
);
|
||||||
--d-sidebar-prefix-background: var(--d-selected);
|
--d-sidebar-prefix-background: var(--d-selected);
|
||||||
--d-sidebar-active-prefix-background: light-dark(
|
--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.85) c h),
|
||||||
@@ -20,7 +116,6 @@
|
|||||||
--d-sidebar-highlight-color: var(--primary);
|
--d-sidebar-highlight-color: var(--primary);
|
||||||
--d-sidebar-highlight-background: var(--d-selected);
|
--d-sidebar-highlight-background: var(--d-selected);
|
||||||
--d-sidebar-section-link-icon-size: 1em;
|
--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-input-bg-color: var(--d-content-background);
|
||||||
--d-sidebar-active-color: var(--primary) !important;
|
--tertiary-hover: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,64 +0,0 @@
|
|||||||
.peek-mode-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1300px) {
|
|
||||||
html:not(.fullscreen-composer) {
|
|
||||||
.peek-mode-toggle svg {
|
|
||||||
transform: scaleX(-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.composer-open {
|
|
||||||
.full-width-enabled .peek-mode-toggle {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-width-enabled.peek-mode-active {
|
|
||||||
#reply-control.hide-preview {
|
|
||||||
transition: none;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: var(--d-border-radius-large);
|
|
||||||
.grippie {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-area {
|
|
||||||
padding-inline: 0.67em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#reply-control:not(.fullscreen).hide-preview {
|
|
||||||
width: 100%;
|
|
||||||
right: var(--main-grid-gap);
|
|
||||||
top: var(--header-offset);
|
|
||||||
bottom: var(--main-grid-gap);
|
|
||||||
left: unset;
|
|
||||||
height: unset;
|
|
||||||
max-width: 36.5vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.has-sidebar-page {
|
|
||||||
#main-outlet-wrapper {
|
|
||||||
grid-template-columns:
|
|
||||||
var(--d-sidebar-width) calc(100vw - 38vw - var(--d-sidebar-width))
|
|
||||||
1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.has-sidebar-page) {
|
|
||||||
#main-outlet-wrapper {
|
|
||||||
grid-template-columns: 0 calc(100vw - 52vw) 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
#reply-control:not(.fullscreen).hide-preview {
|
|
||||||
max-width: 46vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-wrapper .sidebar-container {
|
|
||||||
height: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -9,56 +9,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#reply-control.hide-preview:not(.draft) {
|
|
||||||
@include breakpoint("mobile-extra-large", $rule: min-width) {
|
|
||||||
background: var(--d-content-background);
|
|
||||||
|
|
||||||
border-top-right-radius: var(--d-border-radius);
|
|
||||||
border-top-left-radius: var(--d-border-radius);
|
|
||||||
|
|
||||||
.grippie {
|
|
||||||
background: var(--tertiary-low);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
.d-editor-button-bar {
|
||||||
.btn:hover,
|
.btn:hover,
|
||||||
.toolbar-popup-menu-options.is-expanded {
|
.toolbar-popup-menu-options.is-expanded {
|
||||||
|
|||||||
@@ -1,255 +0,0 @@
|
|||||||
// Full width layout. Ported from the Discourse Full Width theme component here
|
|
||||||
// https://meta.discourse.org/t/discourse-full-width-component/292496, which we
|
|
||||||
// intend to move into core over time.
|
|
||||||
//
|
|
||||||
// We are copying this here so we can continue to iterate on Horizon with full
|
|
||||||
// width without having to include the theme component as a dependency, we
|
|
||||||
// need to remove this once full width is in core.
|
|
||||||
|
|
||||||
$sidebar-width: 17em;
|
|
||||||
|
|
||||||
.wrap {
|
|
||||||
max-width: unset; // undoing core default
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header #site-logo {
|
|
||||||
// constraining the logo to fit its grid container
|
|
||||||
// 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
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-outlet-wrapper {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
body.has-sidebar-page & {
|
|
||||||
.sidebar-wrapper {
|
|
||||||
width: var(--d-sidebar-width);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.has-full-page-chat & {
|
|
||||||
gap: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-wrapper {
|
|
||||||
width: 100%; // safari has issues without this
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-outlet {
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: var(--d-max-width);
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
body.has-full-page-chat & {
|
|
||||||
max-width: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-full-page-chat:not(.discourse-sidebar) .full-page-chat {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-outlet > .regular {
|
|
||||||
max-width: var(--d-max-width);
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
body.has-sidebar-page & {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header .title:not(.title--minimized) {
|
|
||||||
// allowing overflow here isn't always ideal
|
|
||||||
// but works well enough most of the time
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header {
|
|
||||||
> .wrap {
|
|
||||||
.contents {
|
|
||||||
display: grid;
|
|
||||||
grid-template-areas: "logo lspace extra-info rspace panel";
|
|
||||||
grid-template-columns:
|
|
||||||
minmax(auto, 1fr)
|
|
||||||
auto
|
|
||||||
minmax(0, calc(var(--d-max-width)))
|
|
||||||
auto
|
|
||||||
minmax(auto, 1fr);
|
|
||||||
|
|
||||||
.d-header-mode {
|
|
||||||
grid-area: extra-info;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
@include breakpoint("tablet") {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header .title {
|
|
||||||
min-width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-sidebar-page & {
|
|
||||||
// at wide widths, when 1fr > 0
|
|
||||||
// we want the panel to be the same width as the sidebar
|
|
||||||
// this way we can get more accurate centering
|
|
||||||
grid-template-columns:
|
|
||||||
calc(var(--d-sidebar-width) - 11px) // 11px is wrap padding
|
|
||||||
1fr
|
|
||||||
minmax(0, calc(var(--d-max-width)))
|
|
||||||
1fr
|
|
||||||
minmax(0, calc(var(--d-sidebar-width) - 11px));
|
|
||||||
gap: 1em;
|
|
||||||
|
|
||||||
// at narrower widths, when 1fr = 0
|
|
||||||
// we can center without matching the sidebar's width
|
|
||||||
// which allows the title to take up the remaining width
|
|
||||||
@media screen and (max-width: 1400px) {
|
|
||||||
grid-template-columns:
|
|
||||||
calc(var(--d-sidebar-width) - 11px)
|
|
||||||
1fr
|
|
||||||
minmax(0, calc(var(--d-max-width)))
|
|
||||||
1fr
|
|
||||||
auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1000px) {
|
|
||||||
gap: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header-mode {
|
|
||||||
grid-area: extra-info;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-sidebar-toggle {
|
|
||||||
grid-area: logo;
|
|
||||||
}
|
|
||||||
|
|
||||||
.before-header-panel-outlet {
|
|
||||||
grid-area: extra-info;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header-mode {
|
|
||||||
.bootstrap-mode {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
grid-area: panel;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.extra-info-wrapper {
|
|
||||||
grid-area: extra-info;
|
|
||||||
max-width: var(--d-max-width);
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-search--enabled .floating-search-input-wrapper {
|
|
||||||
grid-area: extra-info;
|
|
||||||
|
|
||||||
@include breakpoint(tablet) {
|
|
||||||
grid-area: rspace;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.has-sidebar-page {
|
|
||||||
.wrap {
|
|
||||||
max-width: unset; // undoing core default
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header-mode,
|
|
||||||
.extra-info-wrapper {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
|
|
||||||
#reply-control.show-preview {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-container {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
|
|
||||||
#reply-control.show-preview:not(.fullscreen) {
|
|
||||||
margin-left: $sidebar-width;
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
// overruling new core composer changes
|
|
||||||
max-width: $reply-area-max-width;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-container {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// overruling new core composer changes
|
|
||||||
@media screen and (min-width: $reply-area-max-width) {
|
|
||||||
#reply-control.show-preview:not(.fullscreen) {
|
|
||||||
max-width: $reply-area-max-width;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.sidebar-animate {
|
|
||||||
#main-outlet-wrapper {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header-wrap .wrap {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-header-icons {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rtl {
|
|
||||||
.d-header .title {
|
|
||||||
margin-right: 3.7em; // 2.7em hamburger width + 1em for margin
|
|
||||||
margin-left: 0.725em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// provides some extra space for login buttons
|
|
||||||
@media screen and (min-width: 1400px) {
|
|
||||||
.anon {
|
|
||||||
.d-header .panel {
|
|
||||||
grid-column-start: -4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
// Fixing bulk select (only needed for desktop)
|
|
||||||
|
|
||||||
.bulk-select-enabled {
|
|
||||||
.topic-list-header .topic-list-data.default {
|
|
||||||
position: sticky;
|
|
||||||
top: 10em;
|
|
||||||
}
|
|
||||||
.topic-author-avatar-data {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bulk-select.topic-list-data {
|
|
||||||
grid-area: bulk-select;
|
|
||||||
margin-left: -0.5em;
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px) {
|
|
||||||
margin-top: 0;
|
|
||||||
label {
|
|
||||||
padding-block: 0.345em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
transform: scale(1.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list-header {
|
|
||||||
tr {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list-data {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&:not(.default) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.default {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
.bulk-select,
|
|
||||||
span:not(.bulk-select-topics, .d-button-label) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bulk-select-topics {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: var(--secondary);
|
|
||||||
border-radius: 0 0 0 var(--d-border-radius);
|
|
||||||
padding: 1em;
|
|
||||||
@media screen and (max-width: 1048px) {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+127
-8
@@ -2,10 +2,14 @@
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
@include breakpoint(extra-large, $rule: min-width) {
|
@include breakpoint(extra-large, $rule: min-width) {
|
||||||
padding-bottom: var(--main-grid-gap);
|
padding-bottom: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.has-full-page-chat .d-header {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.user-menu .quick-access-panel,
|
.user-menu .quick-access-panel,
|
||||||
.user-notifications-list {
|
.user-notifications-list {
|
||||||
li {
|
li {
|
||||||
@@ -40,8 +44,7 @@
|
|||||||
.d-header-icons
|
.d-header-icons
|
||||||
.header-color-scheme-toggle
|
.header-color-scheme-toggle
|
||||||
.-expanded
|
.-expanded
|
||||||
> .d-icon,
|
> .d-icon {
|
||||||
.discourse-no-touch .header-sidebar-toggle button:hover .d-icon {
|
|
||||||
color: var(--header_primary-medium);
|
color: var(--header_primary-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -70,6 +73,16 @@
|
|||||||
color: var(--accent-text-color);
|
color: var(--accent-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
.user-menu .quick-access-panel li,
|
||||||
|
.user-notifications-list li,
|
||||||
|
.user-menu .quick-access-panel li.do-not-disturb,
|
||||||
|
.menu-panel .panel-body-bottom .btn,
|
||||||
|
.menu-panel .panel-body-bottom .btn:hover {
|
||||||
|
background-color: var(--d-content-background);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
body.login-page,
|
body.login-page,
|
||||||
body.signup-page,
|
body.signup-page,
|
||||||
body.invite-page,
|
body.invite-page,
|
||||||
@@ -80,10 +93,116 @@ body.activate-account-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-dropdown-toggle.chat-header-icon .icon .chat-channel-unread-indicator {
|
// attempt to center the title
|
||||||
border-color: var(--background-color);
|
// by mirroring the body grid
|
||||||
}
|
|
||||||
|
|
||||||
.d-header-icons .badge-notification {
|
.has-sidebar-page {
|
||||||
border-color: var(--background-color);
|
.d-header > .wrap {
|
||||||
|
.contents {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
|
||||||
|
grid-template-rows: auto;
|
||||||
|
gap: 0; // gap will ruin the alignment
|
||||||
|
|
||||||
|
.header-sidebar-toggle,
|
||||||
|
.home-logo-wrapper-outlet {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-logo-wrapper-outlet {
|
||||||
|
margin-left: 3.5em;
|
||||||
|
margin-right: 0;
|
||||||
|
max-width: 13em; // crosses into column 2 beyond this
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extra-info-wrapper {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
|
||||||
|
justify-self: center;
|
||||||
|
|
||||||
|
max-width: 59em; // width of topic + timeline
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
@media screen and (max-width: 1350px) {
|
||||||
|
justify-self: start;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
justify-self: end;
|
||||||
|
|
||||||
|
padding-right: 1em;
|
||||||
|
|
||||||
|
// the title and panel don't exist on the same plane
|
||||||
|
// so we let the panel overlap the title
|
||||||
|
// and fade it out so it looks intentional
|
||||||
|
|
||||||
|
background: var(--background-color);
|
||||||
|
|
||||||
|
@media screen and (max-width: 850px) {
|
||||||
|
background: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(255, 255, 255, 0) 0%,
|
||||||
|
var(--background-color) 80%
|
||||||
|
);
|
||||||
|
@media screen and (max-width: 850px) {
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(255, 255, 255, 0) 0%,
|
||||||
|
var(--secondary) 80%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
top: -0.5em;
|
||||||
|
bottom: 0;
|
||||||
|
height: 4em;
|
||||||
|
width: 3em;
|
||||||
|
left: -3em;
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// these will probably cause problems when used
|
||||||
|
.before-header-panel-outlet,
|
||||||
|
.after-header-panel-outlet {
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.before-header-panel-outlet {
|
||||||
|
&:has(.search-banner) {
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1280px) {
|
||||||
|
.floating-search-input {
|
||||||
|
margin-left: 2.75em;
|
||||||
|
padding-right: 15em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
&.search-header--visible
|
||||||
|
.floating-search-input
|
||||||
|
.search-banner-inner.wrap
|
||||||
|
.search-menu {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +0,0 @@
|
|||||||
body.static-login {
|
|
||||||
#main-outlet-wrapper {
|
|
||||||
grid-template-areas:
|
|
||||||
"sidebar blank"
|
|
||||||
"sidebar content"
|
|
||||||
"sidebar below-content";
|
|
||||||
grid-template-rows: auto 1fr auto;
|
|
||||||
}
|
|
||||||
.login-welcome {
|
|
||||||
border-radius: none;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+25
-30
@@ -1,20 +1,13 @@
|
|||||||
:root {
|
:root {
|
||||||
--main-grid-gap: 0.5em;
|
--main-grid-gap: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
html:not(:has(.has-full-page-chat)) {
|
html:not(:has(.has-full-page-chat)) {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
|
|
||||||
@include breakpoint("mobile-extra-large") {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
@include breakpoint("mobile-extra-large") {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
#main-outlet-wrapper {
|
#main-outlet-wrapper {
|
||||||
gap: var(--main-grid-gap);
|
gap: var(--main-grid-gap);
|
||||||
@@ -22,7 +15,6 @@ body {
|
|||||||
|
|
||||||
body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
|
body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
|
||||||
grid-column-gap: var(--main-grid-gap);
|
grid-column-gap: var(--main-grid-gap);
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body.has-full-page-chat:not(.has-sidebar-page) {
|
body.has-full-page-chat:not(.has-sidebar-page) {
|
||||||
@@ -58,29 +50,41 @@ body:not(.has-full-page-chat) {
|
|||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
--main-grid-gap: 0;
|
--main-grid-gap: 0;
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 768px) {
|
@include breakpoint(tablet, $rule: min-width) {
|
||||||
gap: var(--main-grid-gap);
|
gap: var(--main-grid-gap);
|
||||||
}
|
}
|
||||||
#main-outlet {
|
#main-outlet {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: unset;
|
|
||||||
padding-bottom: var(--spacing-block-l);
|
padding-bottom: var(--spacing-block-l);
|
||||||
border-radius: var(--d-border-radius-large);
|
max-width: unset;
|
||||||
background-color: var(--d-content-background);
|
//thanks to random container elements on the page, I can't do a direct child selector here because it targets all the randomness, so I see no other option than MANUALLY adding every possible element that can appear in the main outlet YAY
|
||||||
@include breakpoint(medium) {
|
.list-controls,
|
||||||
border-radius: 0px;
|
.list-container,
|
||||||
}
|
#topic-title,
|
||||||
html.composer-open & {
|
.container.posts,
|
||||||
padding-bottom: var(--composer-height);
|
#topic-footer-buttons,
|
||||||
}
|
.more-topics__container,
|
||||||
> *:not(.experimental-screen, .activate-account) {
|
.welcome-banner,
|
||||||
|
.container .user-main,
|
||||||
|
.reviewable,
|
||||||
|
.admin-content,
|
||||||
|
.discourse-post-event-upcoming-events,
|
||||||
|
.container.groups-index,
|
||||||
|
.body-page,
|
||||||
|
.container.badges,
|
||||||
|
.topic-above-footer-buttons-outlet .presence-users,
|
||||||
|
.global-notice {
|
||||||
@include breakpoint(medium, $rule: min-width) {
|
@include breakpoint(medium, $rule: min-width) {
|
||||||
box-sizing: border-box;
|
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
padding-inline: var(--spacing-inline-l);
|
padding-inline: var(--spacing-inline-l);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
border-radius: var(--d-border-radius-large);
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
border-radius: 0px;
|
||||||
|
}
|
||||||
|
background-color: var(--d-content-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -113,12 +117,3 @@ aside.onebox {
|
|||||||
padding: 1em;
|
padding: 1em;
|
||||||
background-color: var(--d-content-background);
|
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));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
+7
-14
@@ -8,7 +8,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.powered-by-discourse {
|
.powered-by-discourse {
|
||||||
z-index: 400;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.boxed.white {
|
.boxed.white {
|
||||||
@@ -40,6 +40,10 @@
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.d-editor-button-bar {
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
.open .grippie {
|
.open .grippie {
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
}
|
}
|
||||||
@@ -69,11 +73,8 @@ input[type="color"]:focus,
|
|||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
.fk-d-menu__trigger.topic-list-layout-trigger {
|
||||||
// pinned topic excerpts are hidden on small screens too
|
display: none;
|
||||||
.fk-d-menu__trigger.topic-list-layout-trigger {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container .search-header,
|
.search-container .search-header,
|
||||||
@@ -97,11 +98,3 @@ input[type="color"]:focus,
|
|||||||
.discourse-reactions-list .reactions {
|
.discourse-reactions-list .reactions {
|
||||||
gap: 0.15em;
|
gap: 0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-details-container {
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.period-chooser-header {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|||||||
+18
-23
@@ -2,7 +2,7 @@
|
|||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
html,
|
html,
|
||||||
.d-header {
|
.d-header {
|
||||||
background-color: var(--d-content-background);
|
background-color: var(--secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#main-outlet-wrapper {
|
#main-outlet-wrapper {
|
||||||
@@ -35,14 +35,9 @@
|
|||||||
column-gap: var(--spacing-inline-s);
|
column-gap: var(--spacing-inline-s);
|
||||||
row-gap: var(--spacing-block-xs);
|
row-gap: var(--spacing-block-xs);
|
||||||
flex-basis: 100%;
|
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 {
|
.select-kit-header {
|
||||||
background: var(--d-content-background);
|
padding-block: var(--spacing-block-s);
|
||||||
|
padding-inline: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -89,11 +84,24 @@
|
|||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.topic-list-item {
|
||||||
|
@include breakpoint(mobile-extra-large) {
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
//to be moved to topic card segment for general use
|
||||||
|
// .navigation-category & {
|
||||||
|
// .badge-category__wrapper {
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#topic-title {
|
#topic-title {
|
||||||
@include breakpoint(mobile-extra-large) {
|
@include breakpoint(mobile-extra-large) {
|
||||||
padding-inline: var(--spacing-inline-s) !important;
|
padding-inline: var(--spacing-inline-m) !important;
|
||||||
|
|
||||||
.title-wrapper {
|
.title-wrapper {
|
||||||
gap: var(--spacing-block-s);
|
gap: var(--spacing-block-s);
|
||||||
@@ -123,12 +131,6 @@
|
|||||||
oklch(from var(--category-badge-color) 100% calc(c * 0.9) 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 {
|
.discourse-tag {
|
||||||
font-size: var(--font-down-2-rem);
|
font-size: var(--font-down-2-rem);
|
||||||
padding: var(--spacing-inline-xs) var(--spacing-inline-s);
|
padding: var(--spacing-inline-xs) var(--spacing-inline-s);
|
||||||
@@ -146,6 +148,7 @@
|
|||||||
.main-avatar .avatar {
|
.main-avatar .avatar {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
border-radius: var(--d-border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-body {
|
.topic-body {
|
||||||
@@ -204,11 +207,3 @@
|
|||||||
border: 1px solid var(--tertiary-low);
|
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);
|
|
||||||
}
|
|
||||||
|
|||||||
+4
-3
@@ -2,7 +2,7 @@
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: var(--header-offset);
|
top: var(--header-offset);
|
||||||
background: var(--d-content-background);
|
background: var(--d-content-background);
|
||||||
z-index: z("base");
|
z-index: 100;
|
||||||
padding: 1.5rem 0 1rem 0;
|
padding: 1.5rem 0 1rem 0;
|
||||||
max-width: unset;
|
max-width: unset;
|
||||||
|
|
||||||
@@ -17,6 +17,7 @@
|
|||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
border-radius: var(--d-border-radius-large);
|
border-radius: var(--d-border-radius-large);
|
||||||
border: 1px solid var(--primary-300);
|
border: 1px solid var(--primary-300);
|
||||||
|
// font-size: var(--font-up-1-rem);
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 1px solid var(--accent-color);
|
border: 1px solid var(--accent-color);
|
||||||
}
|
}
|
||||||
@@ -46,7 +47,7 @@
|
|||||||
.nav-pills > li button:hover {
|
.nav-pills > li button:hover {
|
||||||
.discourse-no-touch & {
|
.discourse-no-touch & {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--d-nav-color--hover);
|
color: var(--accent-color);
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -54,7 +55,7 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: var(--d-nav-underline-height);
|
height: var(--d-nav-underline-height);
|
||||||
background: var(--d-nav-color--hover);
|
background: var(--accent-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,82 @@
|
|||||||
|
.custom-search-banner-wrap {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 0.33fr 0.33fr 0.33fr;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-column-gap: 1em;
|
||||||
|
grid-row-gap: 0.5em;
|
||||||
|
border-bottom: 1px solid var(--primary-300);
|
||||||
|
padding: 1.5em 0 2.5em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
grid-column: 1/2;
|
||||||
|
grid-row: 1/-1;
|
||||||
|
text-align: left;
|
||||||
|
align-self: center;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--search-banner-text-color);
|
||||||
|
@media screen and (max-width: 1028px) {
|
||||||
|
font-size: var(--font-up-4);
|
||||||
|
grid-column: 1/-1;
|
||||||
|
grid-row: 1;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
text-align: left;
|
||||||
|
grid-column: 1/2;
|
||||||
|
grid-row: 1/-1;
|
||||||
|
font-size: var(--font-up-3);
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
grid-column: 1/-1;
|
||||||
|
grid-row: 1;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.search-menu {
|
||||||
|
grid-column: 2/3;
|
||||||
|
grid-row: 1/-1;
|
||||||
|
width: 100%;
|
||||||
|
align-self: center;
|
||||||
|
@media screen and (max-width: 1028px) {
|
||||||
|
grid-row: 2/-1;
|
||||||
|
grid-column: 1/-1;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
grid-column: 2/-1;
|
||||||
|
grid-row: 1/-1;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
grid-row: 2/-1;
|
||||||
|
grid-column: 1/-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.search-input {
|
||||||
|
background: var(--d-content-background);
|
||||||
|
border: 1px solid var(--search-color);
|
||||||
|
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
|
||||||
|
}
|
||||||
|
.search-menu .search-input:focus-within,
|
||||||
|
.search-menu-container .search-input:focus-within {
|
||||||
|
border: 1px solid var(--search-color);
|
||||||
|
outline: 2px solid var(--search-color);
|
||||||
|
}
|
||||||
|
.search-menu .d-icon,
|
||||||
|
.search-menu .searching .d-icon {
|
||||||
|
color: var(--search-color);
|
||||||
|
}
|
||||||
|
.panel-body {
|
||||||
|
z-index: z("dropdown");
|
||||||
|
}
|
||||||
|
.results {
|
||||||
|
background: var(--d-content-background);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
.navigation-controls {
|
|
||||||
.topic-drafts-menu-trigger,
|
|
||||||
.fk-d-button-tooltip {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+189
-470
@@ -1,3 +1,16 @@
|
|||||||
|
// 390x844 – mobile/portrait – (Figma iPhone 13 & 14)
|
||||||
|
// 744x1133 – tablet/portrait – (Figma iPad mini 8.3)
|
||||||
|
// 1280x832 – desktop small – (Figma MacBook Air)
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--hot-color: oklch(63.79% 0.1823 34.77);
|
||||||
|
}
|
||||||
|
|
||||||
|
$extra-small: 435px;
|
||||||
|
$small: 576px;
|
||||||
|
$medium: 980px;
|
||||||
|
$extra-large: 1280px;
|
||||||
|
|
||||||
.topic-list .topic-list-item-separator {
|
.topic-list .topic-list-item-separator {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -16,93 +29,135 @@
|
|||||||
gap: 1em;
|
gap: 1em;
|
||||||
@include breakpoint(medium) {
|
@include breakpoint(medium) {
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
padding: 0 0.5em;
|
|
||||||
}
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
gap: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-list-body .topic-list-item {
|
.bulk-select-enabled .topic-list-item {
|
||||||
|
grid-template-areas:
|
||||||
|
"bulk-select avatar author status status . activity"
|
||||||
|
". topic-title topic-title topic-title likes-replies likes-replies category";
|
||||||
|
.bulk-select {
|
||||||
|
grid-area: bulk-select;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
align-self: center;
|
||||||
|
justify-self: center;
|
||||||
|
label {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $medium) {
|
||||||
|
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
|
||||||
|
grid-template-rows: 22px minmax(22px, auto);
|
||||||
|
grid-template-areas:
|
||||||
|
"bulk-select avatar author status status . activity"
|
||||||
|
". topic-title topic-title topic-title . . likes-replies"
|
||||||
|
". topic-title topic-title topic-title . . category";
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $small) {
|
||||||
|
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||||
|
grid-template-rows: auto auto auto;
|
||||||
|
grid-template-areas:
|
||||||
|
"bulk-select category-status category-status . . . . activity"
|
||||||
|
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||||
|
"avatar author . . . . . likes-replies";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body.user-messages-page .topic-list-item {
|
||||||
|
.topic-category-status-data {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
grid-template-areas:
|
||||||
|
"avatar author status status . . activity"
|
||||||
|
". topic-title topic-title topic-title likes-replies likes-replies likes-replies";
|
||||||
|
&.excerpt-expanded {
|
||||||
|
grid-template-columns: 44px repeat(6, 1fr) auto;
|
||||||
|
grid-template-rows: 22px auto auto 30px;
|
||||||
|
grid-template-areas:
|
||||||
|
"avatar author status status . . . activity"
|
||||||
|
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||||
|
". excerpt excerpt excerpt excerpt excerpt . ."
|
||||||
|
". excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
|
||||||
|
@media screen and (max-width: $extra-large) {
|
||||||
|
grid-template-areas:
|
||||||
|
"avatar author status status . . . activity"
|
||||||
|
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||||
|
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
|
||||||
|
". excerpt excerpt excerpt excerpt excerpt . likes-replies";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $small) {
|
||||||
|
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
grid-template-areas:
|
||||||
|
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title activity"
|
||||||
|
"avatar author . . . . . likes-replies";
|
||||||
|
.topic-excerpt {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topic-list-item {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
padding: 0.75em 1rem;
|
padding: 0.75em 1rem;
|
||||||
border: 1px solid var(--primary-300);
|
border: 1px solid var(--primary-300);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 20px min-content min-content auto min-content;
|
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
|
||||||
grid-template-rows: auto minmax(20px, auto);
|
grid-template-rows: 22px minmax(22px, auto);
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
". . . . status"
|
"avatar author status status . . activity"
|
||||||
"activity . . likes-replies category";
|
". topic-title topic-title topic-title likes-replies likes-replies category";
|
||||||
grid-column-gap: 12px;
|
grid-column-gap: 12px;
|
||||||
grid-row-gap: 8px;
|
grid-row-gap: 8px;
|
||||||
border-radius: var(--d-border-radius);
|
border-radius: var(--d-border-radius);
|
||||||
td.main-link .link-top-line {
|
|
||||||
grid-row: 1/2;
|
|
||||||
grid-column: 1/-1;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
&.--has-status-card td.main-link .link-top-line {
|
|
||||||
grid-column: 1/-2;
|
|
||||||
}
|
|
||||||
@include breakpoint(extra-large) {
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . status"
|
|
||||||
"activity . . likes-replies category";
|
|
||||||
}
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
td.main-link .link-top-line,
|
|
||||||
&.--has-status-card td.main-link .link-top-line {
|
|
||||||
grid-row: 2/3;
|
|
||||||
grid-column: 1/-1;
|
|
||||||
}
|
|
||||||
grid-template-columns: 20px repeat(5, 1fr);
|
|
||||||
grid-template-rows: auto auto auto;
|
|
||||||
grid-template-areas:
|
|
||||||
"category category category category category status"
|
|
||||||
". . . . . ."
|
|
||||||
"activity . . . . likes-replies";
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid var(--primary-200);
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
&.excerpt-expanded {
|
&.excerpt-expanded {
|
||||||
grid-template-columns: 20px auto auto min-content min-content;
|
grid-template-columns: 44px repeat(6, 1fr) auto;
|
||||||
grid-template-rows: auto auto auto;
|
grid-template-rows: 22px auto auto 30px;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
". . . . status"
|
"avatar author status status . . . activity"
|
||||||
"activity . . . ."
|
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||||
"excerpt excerpt excerpt likes-replies category";
|
". excerpt excerpt excerpt excerpt excerpt . ."
|
||||||
@include breakpoint(extra-large) {
|
". excerpt excerpt excerpt excerpt excerpt likes-replies category";
|
||||||
|
@media screen and (max-width: $extra-large) {
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
". . . . status"
|
"avatar author status status . . . activity"
|
||||||
"activity . . . ."
|
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||||
"excerpt excerpt excerpt likes-replies category";
|
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
|
||||||
|
". excerpt excerpt excerpt excerpt excerpt . category";
|
||||||
}
|
}
|
||||||
@include breakpoint(mobile-extra-large) {
|
@media screen and (max-width: $small) {
|
||||||
|
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||||
grid-template-rows: auto auto auto;
|
grid-template-rows: auto auto auto;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"category category category category status"
|
"category-status category-status category-status . . . . activity"
|
||||||
". . . . ."
|
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||||
"activity . . . likes-replies";
|
"avatar author . . . . . likes-replies";
|
||||||
.topic-excerpt,
|
.topic-excerpt {
|
||||||
.link-bottom-line {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.topic-likes-replies-data {
|
}
|
||||||
align-self: flex-end;
|
@media screen and (max-width: $medium) {
|
||||||
}
|
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
|
||||||
.topic-category-data {
|
grid-template-rows: 22px minmax(22px, auto);
|
||||||
align-items: flex-end;
|
grid-template-areas:
|
||||||
}
|
"avatar author status status . . activity"
|
||||||
.badge-category__wrapper {
|
". topic-title topic-title topic-title . . likes-replies"
|
||||||
height: min-content;
|
". topic-title topic-title topic-title . . category";
|
||||||
}
|
}
|
||||||
.link-bottom-line {
|
@media screen and (max-width: $small) {
|
||||||
display: flex;
|
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||||
}
|
grid-template-rows: auto auto auto;
|
||||||
|
grid-template-areas:
|
||||||
|
"category-status category-status category-status . . . . activity"
|
||||||
|
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||||
|
"avatar author . . . . . likes-replies";
|
||||||
|
}
|
||||||
|
@include breakpoint(medium) {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid var(--primary-200);
|
||||||
}
|
}
|
||||||
|
|
||||||
// display contents
|
// display contents
|
||||||
@@ -118,64 +173,32 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// topic activity, avatar, text
|
// avatar & author
|
||||||
.topic-activity-data {
|
.topic-author-avatar-data {
|
||||||
grid-area: activity;
|
grid-area: avatar;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
.topic-activity {
|
.topic-author-avatar img.avatar {
|
||||||
display: grid;
|
width: 44px;
|
||||||
grid-template-columns: 20px auto auto auto;
|
height: 44px;
|
||||||
font-size: var(--font-down-1);
|
border-radius: var(--d-border-radius);
|
||||||
height: 100%;
|
@media screen and (max-width: $small) {
|
||||||
align-items: center;
|
width: 25px;
|
||||||
gap: 0.25em;
|
height: 25px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
td.topic-author-data {
|
||||||
.topic-activity__user .avatar {
|
grid-area: author;
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-activity__user {
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
gap: 0.5em;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
|
||||||
background-color: var(--primary-low);
|
|
||||||
}
|
}
|
||||||
|
.topic-author-data .topic-author {
|
||||||
.topic-activity__username {
|
color: var(--primary-500);
|
||||||
margin-left: 0.25em;
|
|
||||||
text-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
.topic-activity__username {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.topic-activity__reason {
|
|
||||||
margin-left: 0.25em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-activity.--updated .topic-activity__reason {
|
|
||||||
margin-left: 0.25em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// status
|
// status
|
||||||
.topic-status-data {
|
|
||||||
grid-area: status;
|
|
||||||
}
|
|
||||||
.topic-status-data {
|
|
||||||
grid-area: status;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.topic-status-card {
|
.topic-status-card {
|
||||||
height: min-content;
|
|
||||||
margin-left: auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
@@ -186,14 +209,11 @@
|
|||||||
border-radius: var(--d-border-radius);
|
border-radius: var(--d-border-radius);
|
||||||
border: 1px solid var(--status-color);
|
border: 1px solid var(--status-color);
|
||||||
color: var(--status-color);
|
color: var(--status-color);
|
||||||
|
height: min-content;
|
||||||
|
grid-area: status;
|
||||||
width: min-content;
|
width: min-content;
|
||||||
@include breakpoint("large", min-width) {
|
@media screen and (max-width: $small) {
|
||||||
position: absolute;
|
height: calc(100% - 2px);
|
||||||
right: 0px;
|
|
||||||
top: -20px;
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
height: 20px;
|
|
||||||
font-size: var(--font-down-3);
|
|
||||||
}
|
}
|
||||||
svg {
|
svg {
|
||||||
font-size: var(--font-down-1);
|
font-size: var(--font-down-1);
|
||||||
@@ -201,15 +221,28 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-status-card.--pinned {
|
.topic-status-card.--bookmark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.topic-status-card.--pinned,
|
||||||
|
.topic-status-card.--unpinned {
|
||||||
--status-color: var(--primary-500);
|
--status-color: var(--primary-500);
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
line-height: unset;
|
||||||
}
|
}
|
||||||
.topic-status-card.--hot {
|
.topic-status-card.--hot {
|
||||||
--status-color: #e45735;
|
--status-color: var(--hot-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
// title
|
||||||
|
td.main-link .link-top-line {
|
||||||
|
font-size: var(--font-0);
|
||||||
|
grid-area: topic-title;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-top-line .event-date {
|
.link-top-line .event-date {
|
||||||
margin-left: 0.5em;
|
|
||||||
font-size: var(--font-down-3);
|
font-size: var(--font-down-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -217,16 +250,11 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-list-data {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.main-link .link-top-line a.raw-topic-link {
|
td.main-link .link-top-line a.raw-topic-link {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-post-badges .badge-notification.unread-posts,
|
.topic-post-badges .badge-notification.unread-posts {
|
||||||
.topic-post-badges .badge-notification.new-topic {
|
|
||||||
background-color: var(--tertiary);
|
background-color: var(--tertiary);
|
||||||
color: var(--tertiary);
|
color: var(--tertiary);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -237,6 +265,13 @@
|
|||||||
min-width: unset;
|
min-width: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// excerpt
|
||||||
|
.topic-excerpt {
|
||||||
|
grid-area: excerpt;
|
||||||
|
margin: 0;
|
||||||
|
font-size: var(--font-down-2);
|
||||||
|
}
|
||||||
|
|
||||||
// timestamp
|
// timestamp
|
||||||
td.activity .post-activity {
|
td.activity .post-activity {
|
||||||
grid-area: activity;
|
grid-area: activity;
|
||||||
@@ -246,52 +281,37 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-bottom-line {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// metadata
|
// metadata
|
||||||
// metadata - excerpt
|
// metadata - category
|
||||||
.topic-excerpt,
|
|
||||||
td.main-link .link-bottom-line {
|
td.main-link .link-bottom-line {
|
||||||
grid-row: 3 / -1;
|
display: none;
|
||||||
grid-column: 1 / -3;
|
|
||||||
margin: 0;
|
|
||||||
font-size: var(--font-down-2);
|
|
||||||
|
|
||||||
.excerpt__contents {
|
|
||||||
color: var(--primary-high);
|
|
||||||
}
|
|
||||||
|
|
||||||
// default category position hidden
|
|
||||||
.badge-category__wrapper {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
td.topic-category-status-data {
|
td.topic-category-status-data {
|
||||||
display: contents;
|
display: contents;
|
||||||
}
|
@media screen and (max-width: $small) {
|
||||||
td.topic-category-data {
|
grid-area: category-status;
|
||||||
grid-area: category;
|
display: flex;
|
||||||
display: flex;
|
gap: 0.5em;
|
||||||
justify-content: flex-end;
|
align-items: center;
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
td.topic-category-data .badge-category__wrapper,
|
td.topic-category-status-data .badge-category__wrapper {
|
||||||
td.main-link .link-bottom-line .badge-category__wrapper {
|
grid-area: category;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.topic-category-status-data .badge-category__wrapper {
|
||||||
|
overflow: unset;
|
||||||
border-radius: var(--d-border-radius);
|
border-radius: var(--d-border-radius);
|
||||||
padding: 3px 6px;
|
padding: 6px;
|
||||||
|
align-self: flex-end;
|
||||||
background-color: light-dark(
|
background-color: light-dark(
|
||||||
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
|
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
|
||||||
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
|
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
|
||||||
);
|
);
|
||||||
|
|
||||||
@include breakpoint(tablet) {
|
@media screen and (max-width: $small) {
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
font-size: var(--font-down-2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-category__name {
|
.badge-category__name {
|
||||||
@@ -319,7 +339,8 @@
|
|||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
height: min-content;
|
height: min-content;
|
||||||
align-self: center;
|
align-self: flex-end;
|
||||||
|
padding-bottom: 4px;
|
||||||
}
|
}
|
||||||
.topic-likes-replies-data .topic-likes,
|
.topic-likes-replies-data .topic-likes,
|
||||||
.topic-likes-replies-data .topic-replies {
|
.topic-likes-replies-data .topic-replies {
|
||||||
@@ -334,6 +355,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.topic-list-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.topic-list-item {
|
.topic-list-item {
|
||||||
background: var(--d-content-background);
|
background: var(--d-content-background);
|
||||||
box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
|
box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
|
||||||
@@ -348,309 +373,3 @@
|
|||||||
0px 0px 12px 1px var(--topic-card-shadow);
|
0px 0px 12px 1px var(--topic-card-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Bookmarks
|
|
||||||
|
|
||||||
.topic-list-item.bookmark-list-item {
|
|
||||||
.link-bottom-line {
|
|
||||||
font-size: unset;
|
|
||||||
}
|
|
||||||
//regular card without excerpt class
|
|
||||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . dropdown"
|
|
||||||
"avatar update metadata metadata metadata . category";
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
|
|
||||||
grid-template-areas:
|
|
||||||
" . . . . . . dropdown"
|
|
||||||
"update metadata metadata metadata metadata category category";
|
|
||||||
.avatar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.has-metadata {
|
|
||||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . . dropdown"
|
|
||||||
"update update metadata metadata metadata metadata category category";
|
|
||||||
.avatar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//card with excerpt (all in horizon since the toggle is gone)
|
|
||||||
&.excerpt-expanded {
|
|
||||||
grid-template-columns: 20px min-content auto minmax(0, 100px);
|
|
||||||
grid-template-areas:
|
|
||||||
". . . dropdown"
|
|
||||||
"avatar update metadata metadata"
|
|
||||||
"excerpt excerpt excerpt ."
|
|
||||||
"excerpt excerpt excerpt category";
|
|
||||||
|
|
||||||
.badge-category__wrapper {
|
|
||||||
align-self: flex-end;
|
|
||||||
height: min-content;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint(extra-large, $rule: min-width) {
|
|
||||||
grid-template-columns: 20px min-content auto min-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-columns: auto min-content;
|
|
||||||
grid-template-areas:
|
|
||||||
". dropdown"
|
|
||||||
"category category";
|
|
||||||
.post-excerpt,
|
|
||||||
.avatar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.has-metadata {
|
|
||||||
grid-template-columns: 20px min-content auto min-content;
|
|
||||||
grid-template-areas:
|
|
||||||
". . . dropdown"
|
|
||||||
"avatar update metadata metadata"
|
|
||||||
"excerpt excerpt excerpt . "
|
|
||||||
"excerpt excerpt excerpt category";
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-columns: auto min-content;
|
|
||||||
grid-template-areas:
|
|
||||||
" . dropdown"
|
|
||||||
"metadata category";
|
|
||||||
|
|
||||||
.bookmark-metadata {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td.author-avatar {
|
|
||||||
grid-area: avatar;
|
|
||||||
}
|
|
||||||
td.main-link .link-bottom-line {
|
|
||||||
display: contents;
|
|
||||||
.badge-category__wrapper {
|
|
||||||
grid-area: category;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: min-content;
|
|
||||||
justify-self: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
td.main-link .link-top-line {
|
|
||||||
display: contents;
|
|
||||||
.bookmark-metadata {
|
|
||||||
grid-area: metadata;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--spacing-inline-xs);
|
|
||||||
}
|
|
||||||
.bookmark-metadata-item {
|
|
||||||
margin: 0;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.bookmark-status-with-link {
|
|
||||||
grid-column: 1/-2;
|
|
||||||
grid-row: 1/2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-excerpt {
|
|
||||||
grid-area: excerpt;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.topic-list-data:last-of-type {
|
|
||||||
display: contents;
|
|
||||||
.bookmark-actions-dropdown {
|
|
||||||
grid-area: dropdown;
|
|
||||||
align-self: flex-start;
|
|
||||||
height: 1em;
|
|
||||||
|
|
||||||
.select-kit-header {
|
|
||||||
padding-top: 0;
|
|
||||||
margin-left: auto;
|
|
||||||
align-items: center;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.select-kit-header-wrapper {
|
|
||||||
height: 1em;
|
|
||||||
width: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-metadata.topic-list-data.updated-at {
|
|
||||||
grid-area: update;
|
|
||||||
}
|
|
||||||
td.activity .post-activity {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Assigned List
|
|
||||||
.topic-list-item.assigned-list-item {
|
|
||||||
.topic-status-card {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
td.main-link .link-top-line {
|
|
||||||
grid-column: 1/-3;
|
|
||||||
}
|
|
||||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . status dropdown"
|
|
||||||
"activity . . . . likes-replies category";
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
|
|
||||||
grid-template-areas:
|
|
||||||
"category category . . . . status dropdown"
|
|
||||||
". . . . . . . . "
|
|
||||||
"activity . . . . . . likes-replies";
|
|
||||||
}
|
|
||||||
.assign-topic-buttons {
|
|
||||||
display: contents;
|
|
||||||
.assign-actions-dropdown {
|
|
||||||
grid-area: dropdown;
|
|
||||||
justify-content: flex-end;
|
|
||||||
height: 1em;
|
|
||||||
|
|
||||||
.select-kit-header {
|
|
||||||
padding-top: 0;
|
|
||||||
margin-left: auto;
|
|
||||||
align-items: center;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.select-kit-header-wrapper {
|
|
||||||
height: 1em;
|
|
||||||
width: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
td.topic-category-status-data {
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
.topic-status-card {
|
|
||||||
position: relative;
|
|
||||||
top: unset;
|
|
||||||
right: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
td.topic-category-data,
|
|
||||||
td.topic-likes-replies-data,
|
|
||||||
td.topic-status-data {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&.visited .main-link .link-top-line {
|
|
||||||
font-weight: normal;
|
|
||||||
grid-area: title;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--primary-low);
|
|
||||||
border-color: var(--primary-200);
|
|
||||||
}
|
|
||||||
td.topic-activity-data {
|
|
||||||
grid-area: activity;
|
|
||||||
}
|
|
||||||
td.topic-list-data.posters {
|
|
||||||
grid-area: posters;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
a {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
.avatar {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: var(--primary-low);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bulk select
|
|
||||||
|
|
||||||
.bulk-select-enabled .topic-list-body .topic-list-item {
|
|
||||||
grid-template-areas:
|
|
||||||
"bulk-select . . . status"
|
|
||||||
"bulk-select activity activity . category";
|
|
||||||
td.topic-likes-replies-data {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
td.main-link .link-top-line,
|
|
||||||
&.--has-status-card td.main-link .link-top-line {
|
|
||||||
grid-column: 2/-1;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.topic-excerpt {
|
|
||||||
grid-area: excerpt;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
&.excerpt-expanded {
|
|
||||||
grid-template-areas:
|
|
||||||
"bulk-select . . . status" "bulk-select activity . . ."
|
|
||||||
"bulk-select excerpt excerpt excerpt category";
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-areas:
|
|
||||||
"bulk-select category . . . status"
|
|
||||||
"bulk-select . . . . ."
|
|
||||||
"bulk-select activity activity . . .";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bulk-select {
|
|
||||||
grid-area: bulk-select;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
align-self: center;
|
|
||||||
justify-self: center;
|
|
||||||
label {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include breakpoint(large) {
|
|
||||||
grid-template-areas:
|
|
||||||
"bulk-select . . . status"
|
|
||||||
"bulk-select activity activity . category";
|
|
||||||
}
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
td.main-link .link-top-line,
|
|
||||||
&.--has-status-card td.main-link .link-top-line {
|
|
||||||
grid-column: 2/-1;
|
|
||||||
grid-row: 2;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
grid-template-areas:
|
|
||||||
"bulk-select category . . . status"
|
|
||||||
"bulk-select . . . . ."
|
|
||||||
"bulk-select activity activity . . .";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
+32
-48
@@ -6,7 +6,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container.posts .topic-navigation:not(.with-topic-progress) {
|
.container.posts .topic-navigation {
|
||||||
// super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
|
// super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
|
||||||
top: calc(
|
top: calc(
|
||||||
var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
|
var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
|
||||||
@@ -18,58 +18,46 @@
|
|||||||
min-width: unset; // why we have this?
|
min-width: unset; // why we have this?
|
||||||
.timeline-scrollarea {
|
.timeline-scrollarea {
|
||||||
border-left: 1px solid var(--accent-color);
|
border-left: 1px solid var(--accent-color);
|
||||||
|
}
|
||||||
.timeline-scroller {
|
.timeline-scroller {
|
||||||
@include breakpoint("medium", $rule: min-width) {
|
padding: 0.25em;
|
||||||
margin-left: -4.5px;
|
border: 1px solid var(--accent-color);
|
||||||
background: var(--d-content-background);
|
border-radius: 0.75em;
|
||||||
height: 40px !important; // height is coming from element style have no other choice
|
padding-left: 0.5em;
|
||||||
}
|
margin-left: calc(-0.5em - 2.5px);
|
||||||
|
background: var(--d-content-background);
|
||||||
.timeline-replies,
|
height: 40px !important; // height is coming from element style have no other choice
|
||||||
.timeline-ago {
|
}
|
||||||
line-height: 1;
|
.timelime-scroller-content {
|
||||||
}
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
.timeline-handle {
|
gap: 0.25em;
|
||||||
background-color: var(--accent-color);
|
}
|
||||||
@include breakpoint("medium", $rule: min-width) {
|
.timeline-replies,
|
||||||
width: 8px;
|
.timeline-ago {
|
||||||
border-radius: 10px;
|
line-height: 1;
|
||||||
height: calc(100% - 6px);
|
}
|
||||||
}
|
.timeline-ago {
|
||||||
}
|
// font-size: var(--font-down-1);
|
||||||
|
}
|
||||||
|
.timeline-handle {
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
width: 3px;
|
||||||
|
border-radius: 2px;
|
||||||
|
height: calc(100% - 6px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//should probably get rid of this extra specificity class in core?
|
.container.posts,
|
||||||
.timeline-container.timeline-fullscreen {
|
#topic-footer-buttons {
|
||||||
@include breakpoint("medium", $rule: max-width) {
|
padding: 0 24px;
|
||||||
.topic-timeline
|
|
||||||
.timeline-scrollarea
|
|
||||||
.timeline-scroller
|
|
||||||
.timeline-scroller-content {
|
|
||||||
padding-right: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container.posts {
|
.container.posts {
|
||||||
grid-template-columns: auto 8em;
|
grid-template-columns: auto 150px;
|
||||||
@media screen and (max-width: 924px) {
|
@media screen and (max-width: 924px) {
|
||||||
grid-template-columns: auto auto;
|
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 {
|
.timeline-container .topic-timeline .timeline-ago {
|
||||||
@@ -113,7 +101,3 @@
|
|||||||
nav.post-controls .actions button {
|
nav.post-controls .actions button {
|
||||||
font-size: var(--font-0);
|
font-size: var(--font-0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.archetype-private_message {
|
|
||||||
--pm-border-radius: var(--d-border-radius);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,101 +0,0 @@
|
|||||||
.welcome-banner {
|
|
||||||
&__wrap {
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 0.33fr 0.33fr 0.33fr;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-column-gap: 1em;
|
|
||||||
grid-row-gap: 0.5em;
|
|
||||||
border-bottom: 1px solid var(--primary-300);
|
|
||||||
padding: 1.5em 0 2.5em;
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint("mobile-extra-large") {
|
|
||||||
display: block;
|
|
||||||
padding: 0.5em;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-menu {
|
|
||||||
grid-column: 2/3;
|
|
||||||
grid-row: 1/-1;
|
|
||||||
width: 100%;
|
|
||||||
align-self: center;
|
|
||||||
@media screen and (max-width: 1028px) {
|
|
||||||
grid-row: 2/-1;
|
|
||||||
grid-column: 1/-1;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
grid-column: 2/-1;
|
|
||||||
grid-row: 1/-1;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
grid-row: 2/-1;
|
|
||||||
grid-column: 1/-1;
|
|
||||||
}
|
|
||||||
@include breakpoint("mobile-extra-large") {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-menu .search-input,
|
|
||||||
.search-menu-container .search-input {
|
|
||||||
background: var(--d-content-background);
|
|
||||||
border: 1px solid var(--search-color);
|
|
||||||
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
|
|
||||||
}
|
|
||||||
.search-menu .search-input:focus-within,
|
|
||||||
.search-menu-container .search-input:focus-within {
|
|
||||||
border: 1px solid var(--search-color);
|
|
||||||
outline: 2px solid var(--search-color);
|
|
||||||
}
|
|
||||||
.search-menu .d-icon,
|
|
||||||
.search-menu .searching .d-icon,
|
|
||||||
.search-menu .searching .show-advanced-search .d-icon {
|
|
||||||
color: var(--search-color);
|
|
||||||
}
|
|
||||||
.panel-body {
|
|
||||||
z-index: z("dropdown");
|
|
||||||
}
|
|
||||||
.results {
|
|
||||||
background: var(--d-content-background);
|
|
||||||
}
|
|
||||||
&__title {
|
|
||||||
grid-column: 1/2;
|
|
||||||
grid-row: 1/-1;
|
|
||||||
text-align: left;
|
|
||||||
align-self: center;
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 400;
|
|
||||||
color: var(--search-color);
|
|
||||||
@media screen and (max-width: 1028px) {
|
|
||||||
font-size: var(--font-up-4);
|
|
||||||
grid-column: 1/-1;
|
|
||||||
grid-row: 1;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
text-align: left;
|
|
||||||
grid-column: 1/2;
|
|
||||||
grid-row: 1/-1;
|
|
||||||
font-size: var(--font-up-3);
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
grid-column: 1/-1;
|
|
||||||
grid-row: 1;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
@include breakpoint("mobile-extra-large") {
|
|
||||||
font-size: var(--font-up-2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
enable_welcome_banner:
|
|
||||||
default: true
|
|
||||||
description: "Overrides the core `enable welcome banner` site setting"
|
|
||||||
|
|
||||||
search_experience:
|
|
||||||
type: enum
|
|
||||||
default: search_field
|
|
||||||
choices:
|
|
||||||
- search_field
|
|
||||||
- search_icon
|
|
||||||
description: "Overrides the core `search experience` site setting"
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
# frozen_string_literal: true
|
|
||||||
|
|
||||||
describe "Composer peek", type: :system do
|
|
||||||
fab!(:current_user) { Fabricate(:user, refresh_auto_groups: true) }
|
|
||||||
fab!(:topic) { Fabricate(:topic_with_op) }
|
|
||||||
|
|
||||||
let(:topic_page) { PageObjects::Pages::Topic.new }
|
|
||||||
let(:composer) { PageObjects::Components::Composer.new }
|
|
||||||
|
|
||||||
before do
|
|
||||||
upload_theme
|
|
||||||
sign_in(current_user)
|
|
||||||
end
|
|
||||||
|
|
||||||
it "does not show composer peek for small windows" do
|
|
||||||
topic_page.visit_topic(topic)
|
|
||||||
topic_page.click_footer_reply
|
|
||||||
expect(composer).to be_opened
|
|
||||||
|
|
||||||
resize_window(width: 600) { expect(page).to have_no_css(".peek-mode-toggle") }
|
|
||||||
end
|
|
||||||
|
|
||||||
it "turns on composer peek and remembers this preference on page load" do
|
|
||||||
topic_page.visit_topic(topic)
|
|
||||||
topic_page.click_footer_reply
|
|
||||||
expect(composer).to be_opened
|
|
||||||
|
|
||||||
resize_window(width: 1380) do
|
|
||||||
find(".peek-mode-toggle").click
|
|
||||||
expect(page).to have_css("body.peek-mode-active")
|
|
||||||
|
|
||||||
topic_page.visit_topic(topic)
|
|
||||||
topic_page.click_footer_reply
|
|
||||||
expect(composer).to be_opened
|
|
||||||
expect(page).to have_css("body.peek-mode-active")
|
|
||||||
|
|
||||||
find(".peek-mode-toggle").click
|
|
||||||
expect(page).to have_no_css("body.peek-mode-active")
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
it "hides the composer preview when toggling" do
|
|
||||||
topic_page.visit_topic(topic)
|
|
||||||
topic_page.click_footer_reply
|
|
||||||
expect(composer).to be_opened
|
|
||||||
expect(composer).to have_composer_preview
|
|
||||||
|
|
||||||
resize_window(width: 1380) do
|
|
||||||
find(".peek-mode-toggle").click
|
|
||||||
expect(page).to have_css("body.peek-mode-active")
|
|
||||||
expect(composer).to have_no_composer_preview
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
# frozen_string_literal: true
|
|
||||||
|
|
||||||
RSpec.describe "Core features", type: :system do
|
|
||||||
fab!(:current_user) { Fabricate(:user, refresh_auto_groups: true) }
|
|
||||||
let(:composer) { PageObjects::Components::Composer.new }
|
|
||||||
|
|
||||||
before { upload_theme_or_component }
|
|
||||||
|
|
||||||
it_behaves_like "having working core features",
|
|
||||||
skip_examples: %i[search:quick_search topics:create]
|
|
||||||
|
|
||||||
it "creates a new topic" do
|
|
||||||
sign_in(current_user)
|
|
||||||
visit("/new-topic")
|
|
||||||
composer.fill_title("This is a new topic")
|
|
||||||
composer.fill_content("This is a long enough sentence.")
|
|
||||||
expect(page).to have_css(".d-editor-preview p", visible: true)
|
|
||||||
within(".save-or-cancel") { click_button("Create Topic") }
|
|
||||||
expect(page).to have_content("This is a new topic")
|
|
||||||
expect(page).to have_content("This is a long enough sentence.")
|
|
||||||
end
|
|
||||||
end
|
|
||||||
@@ -1,16 +1,7 @@
|
|||||||
# frozen_string_literal: true
|
# frozen_string_literal: true
|
||||||
|
|
||||||
require_relative "./page_objects/components/user_color_palette_selector"
|
|
||||||
|
|
||||||
describe "Horizon theme | High level", type: :system do
|
describe "Horizon theme | High level", type: :system do
|
||||||
let!(:theme) do
|
let!(:theme) { upload_theme }
|
||||||
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!(:current_user) { Fabricate(:user) }
|
||||||
fab!(:tag_1) { Fabricate(:tag, name: "wow-cool") }
|
fab!(:tag_1) { Fabricate(:tag, name: "wow-cool") }
|
||||||
fab!(:tag_2) { Fabricate(:tag, name: "another-tag") }
|
fab!(:tag_2) { Fabricate(:tag, name: "another-tag") }
|
||||||
@@ -19,7 +10,6 @@ describe "Horizon theme | High level", type: :system do
|
|||||||
let(:topic_list) { PageObjects::Components::TopicList.new }
|
let(:topic_list) { PageObjects::Components::TopicList.new }
|
||||||
let(:topic_page) { PageObjects::Pages::Topic.new }
|
let(:topic_page) { PageObjects::Pages::Topic.new }
|
||||||
let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
|
let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
|
||||||
let(:palette_selector) { PageObjects::Components::UserColorPaletteSelector.new }
|
|
||||||
|
|
||||||
def run_all_high_level_tests
|
def run_all_high_level_tests
|
||||||
expect(page).to have_css(".experimental-screen")
|
expect(page).to have_css(".experimental-screen")
|
||||||
@@ -35,28 +25,27 @@ describe "Horizon theme | High level", type: :system do
|
|||||||
topic_item = find(topic_list.topic_list_item_class(topic_1))
|
topic_item = find(topic_list.topic_list_item_class(topic_1))
|
||||||
expect(topic_item.all("td").map { |el| el["class"] }).to eq(
|
expect(topic_item.all("td").map { |el| el["class"] }).to eq(
|
||||||
[
|
[
|
||||||
"main-link topic-list-data",
|
"main-link clearfix topic-list-data",
|
||||||
"topic-status-data",
|
"activity num topic-list-data age",
|
||||||
"topic-category-data",
|
"topic-author-data",
|
||||||
|
"topic-category-status-data",
|
||||||
|
"topic-author-avatar-data",
|
||||||
"topic-likes-replies-data",
|
"topic-likes-replies-data",
|
||||||
"topic-activity-data",
|
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
|
|
||||||
# Can see a topic in the list and navigate to it successfully.
|
# Can see a topic in the list and navigate to it successfully
|
||||||
topic_list.visit_topic(topic_1)
|
topic_list.visit_topic(topic_1)
|
||||||
expect(topic_page).to have_topic_title(topic_1.title)
|
expect(topic_page).to have_topic_title(topic_1.title)
|
||||||
|
|
||||||
# Can change site colors from the sidebar palette, which are remembered
|
# Can change site colors from the sidebar palette, which are remembered across page reloads
|
||||||
# across page reloads.
|
palette_menu =
|
||||||
marigold_palette = ColorScheme.find_by(name: "Marigold")
|
PageObjects::Components::DMenu.new(find(".sidebar-footer-actions .user-color-palette"))
|
||||||
palette_selector.open_palette_menu
|
palette_menu.expand
|
||||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
find(".color-palette-menu__content .color-palette-menu__item[data-color='marigold']").click
|
||||||
expect(palette_selector).to have_no_palette_menu
|
expect(page).to have_css(".custom-color-marigold")
|
||||||
|
|
||||||
page.refresh
|
page.refresh
|
||||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
expect(page).to have_css(".custom-color-marigold")
|
||||||
expect(palette_selector).to have_tertiary_color(marigold_palette)
|
|
||||||
end
|
end
|
||||||
|
|
||||||
it "works for anon" do
|
it "works for anon" do
|
||||||
|
|||||||
@@ -1,53 +0,0 @@
|
|||||||
# frozen_string_literal: true
|
|
||||||
|
|
||||||
module PageObjects
|
|
||||||
module Components
|
|
||||||
class UserColorPaletteSelector < PageObjects::Components::Base
|
|
||||||
def sidebar_footer_button_css
|
|
||||||
".sidebar-footer-actions .user-color-palette-selector"
|
|
||||||
end
|
|
||||||
|
|
||||||
def palette_menu
|
|
||||||
PageObjects::Components::DMenu.new(find(sidebar_footer_button_css))
|
|
||||||
end
|
|
||||||
|
|
||||||
def open_palette_menu
|
|
||||||
palette_menu.expand
|
|
||||||
end
|
|
||||||
|
|
||||||
def has_no_palette_menu?
|
|
||||||
has_no_css?(".user-color-palette-selector-content")
|
|
||||||
end
|
|
||||||
|
|
||||||
def click_palette_menu_item(palette_name)
|
|
||||||
find(
|
|
||||||
".user-color-palette-menu__content .user-color-palette-menu__item[data-color-palette='#{palette_name}']",
|
|
||||||
).click
|
|
||||||
end
|
|
||||||
|
|
||||||
def has_selected_palette?(palette)
|
|
||||||
has_css?(".user-color-palette-selector[data-selected-color-palette-id='#{palette.id}']")
|
|
||||||
end
|
|
||||||
|
|
||||||
def has_loaded_css?
|
|
||||||
has_css?(".user-color-palette-selector.user-color-palette-css-loaded")
|
|
||||||
end
|
|
||||||
|
|
||||||
def has_tertiary_color?(palette)
|
|
||||||
computed_color_hex =
|
|
||||||
page.evaluate_script(
|
|
||||||
"getComputedStyle(document.documentElement).getPropertyValue('--tertiary')",
|
|
||||||
)
|
|
||||||
computed_color_hex == "#" + palette.colors.find { |color| color.name == "tertiary" }.hex
|
|
||||||
end
|
|
||||||
|
|
||||||
def has_computed_color?(color)
|
|
||||||
computed_background_color =
|
|
||||||
page.evaluate_script(
|
|
||||||
"getComputedStyle(document.querySelector(\"li.sidebar-section-link-wrapper[data-list-item-name='everything'] .active\")).backgroundColor",
|
|
||||||
)
|
|
||||||
computed_background_color == color
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
# frozen_string_literal: true
|
|
||||||
|
|
||||||
RSpec.describe "Sidebar New Topic Button", system: true do
|
|
||||||
before { upload_theme }
|
|
||||||
fab!(:group)
|
|
||||||
fab!(:user) { Fabricate(:user, trust_level: 3, groups: [group]) }
|
|
||||||
fab!(:category)
|
|
||||||
fab!(:private_category) do
|
|
||||||
c = Fabricate(:category_with_definition)
|
|
||||||
c.set_permissions(group => :readonly)
|
|
||||||
c.save
|
|
||||||
c
|
|
||||||
end
|
|
||||||
|
|
||||||
context "for signed in users" do
|
|
||||||
before { sign_in(user) }
|
|
||||||
|
|
||||||
it "renders the new topic button in the sidebar" do
|
|
||||||
visit("/latest")
|
|
||||||
expect(page).to have_css(".sidebar-new-topic-button__wrapper")
|
|
||||||
expect(page).to have_css(".sidebar-new-topic-button:not(.disabled)")
|
|
||||||
end
|
|
||||||
|
|
||||||
it "opens the composer when clicked" do
|
|
||||||
visit("/")
|
|
||||||
find(".sidebar-new-topic-button").click
|
|
||||||
expect(page).to have_css("#reply-title")
|
|
||||||
end
|
|
||||||
|
|
||||||
it "shows draft menu when drafts exist" do
|
|
||||||
Draft.create!(user: user, draft_key: "topic_1", data: {})
|
|
||||||
|
|
||||||
visit("/")
|
|
||||||
expect(page).to have_css(".sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger")
|
|
||||||
end
|
|
||||||
|
|
||||||
it "disables button when visiting read-only category" do
|
|
||||||
visit("/c/#{private_category.slug}/#{private_category.id}")
|
|
||||||
|
|
||||||
expect(page).to have_css(".sidebar-new-topic-button[disabled]")
|
|
||||||
|
|
||||||
visit("/c/#{category.slug}/#{category.id}")
|
|
||||||
|
|
||||||
expect(page).not_to have_css(".sidebar-new-topic-button[disabled]")
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
context "for anon" do
|
|
||||||
it "does not render the sidebar button for anons" do
|
|
||||||
visit("/latest")
|
|
||||||
expect(page).not_to have_css(".sidebar-new-topic-button__wrapper")
|
|
||||||
expect(page).not_to have_css(".sidebar-new-topic-button:not(.disabled)")
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
|
||||||
@@ -1,119 +0,0 @@
|
|||||||
# frozen_string_literal: true
|
|
||||||
|
|
||||||
require_relative "./page_objects/components/user_color_palette_selector"
|
|
||||||
|
|
||||||
describe "Horizon theme | User color palette selector", type: :system do
|
|
||||||
let(:set_theme_as_default) { true }
|
|
||||||
let!(:theme) do
|
|
||||||
horizon_theme = upload_theme(set_theme_as_default: set_theme_as_default)
|
|
||||||
ColorScheme.where(theme_id: horizon_theme.id).update_all(user_selectable: true)
|
|
||||||
horizon_theme
|
|
||||||
end
|
|
||||||
fab!(:current_user) { Fabricate(:user) }
|
|
||||||
let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
|
|
||||||
let(:palette_selector) { PageObjects::Components::UserColorPaletteSelector.new }
|
|
||||||
let(:interface_color_mode) { PageObjects::Components::InterfaceColorMode.new }
|
|
||||||
let(:interface_color_selector) do
|
|
||||||
PageObjects::Components::InterfaceColorSelector.new(".sidebar-footer-actions")
|
|
||||||
end
|
|
||||||
let(:marigold_palette) { ColorScheme.find_by(name: "Marigold") }
|
|
||||||
let(:marigold_palette_dark) { ColorScheme.find_by(name: "Marigold Dark") }
|
|
||||||
|
|
||||||
before { SiteSetting.interface_color_selector = "sidebar_footer" }
|
|
||||||
|
|
||||||
it "does not show the sidebar button if there are no user-selectable color palettes" do
|
|
||||||
ColorScheme.update_all(user_selectable: false)
|
|
||||||
visit "/"
|
|
||||||
expect(page).to have_no_css(palette_selector.sidebar_footer_button_css)
|
|
||||||
end
|
|
||||||
|
|
||||||
describe "for logged in user" do
|
|
||||||
before { sign_in(current_user) }
|
|
||||||
|
|
||||||
it "can open the user color palette menu and select a palette, which is preseved on reload" do
|
|
||||||
visit "/"
|
|
||||||
palette_selector.open_palette_menu
|
|
||||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
|
||||||
|
|
||||||
expect(palette_selector).to have_no_palette_menu
|
|
||||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
|
||||||
expect(palette_selector).to have_loaded_css
|
|
||||||
expect(palette_selector).to have_tertiary_color(marigold_palette)
|
|
||||||
|
|
||||||
page.refresh
|
|
||||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
|
||||||
end
|
|
||||||
|
|
||||||
it "uses the dark version of the palette if the user selects dark mode" do
|
|
||||||
visit "/"
|
|
||||||
palette_selector.open_palette_menu
|
|
||||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
|
||||||
|
|
||||||
expect(palette_selector).to have_no_palette_menu
|
|
||||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
|
||||||
expect(palette_selector).to have_loaded_css
|
|
||||||
expect(palette_selector).to have_computed_color("oklch(0.92 0.0708528 68.5036)")
|
|
||||||
|
|
||||||
interface_color_selector.expand
|
|
||||||
interface_color_selector.dark_option.click
|
|
||||||
expect(interface_color_mode).to have_dark_mode_forced
|
|
||||||
expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
|
|
||||||
|
|
||||||
page.refresh
|
|
||||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
|
||||||
expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
|
|
||||||
end
|
|
||||||
|
|
||||||
context "when the theme is not default but is selected by a user" do
|
|
||||||
let(:set_theme_as_default) { false }
|
|
||||||
|
|
||||||
it "can open the user color palette menu and select a palette, which is preseved on reload" do
|
|
||||||
theme.update!(user_selectable: true)
|
|
||||||
current_user.user_option.update!(theme_ids: [theme.id])
|
|
||||||
visit "/"
|
|
||||||
palette_selector.open_palette_menu
|
|
||||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
|
||||||
|
|
||||||
expect(palette_selector).to have_no_palette_menu
|
|
||||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
|
||||||
expect(palette_selector).to have_loaded_css
|
|
||||||
expect(palette_selector).to have_tertiary_color(marigold_palette)
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
describe "for anon" do
|
|
||||||
it "can open the user color palette menu and select a palette, which is preseved on reload" do
|
|
||||||
visit "/"
|
|
||||||
palette_selector.open_palette_menu
|
|
||||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
|
||||||
|
|
||||||
expect(palette_selector).to have_no_palette_menu
|
|
||||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
|
||||||
expect(palette_selector).to have_loaded_css
|
|
||||||
expect(palette_selector).to have_tertiary_color(marigold_palette)
|
|
||||||
end
|
|
||||||
|
|
||||||
it "uses the dark version of the palette if the user selects dark mode, which is preserved on reload" do
|
|
||||||
visit "/"
|
|
||||||
palette_selector.open_palette_menu
|
|
||||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
|
||||||
|
|
||||||
expect(palette_selector).to have_no_palette_menu
|
|
||||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
|
||||||
expect(palette_selector).to have_loaded_css
|
|
||||||
expect(palette_selector).to have_computed_color("oklch(0.92 0.0708528 68.5036)")
|
|
||||||
|
|
||||||
interface_color_selector.expand
|
|
||||||
interface_color_selector.dark_option.click
|
|
||||||
expect(interface_color_mode).to have_dark_mode_forced
|
|
||||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
|
||||||
expect(palette_selector).to have_loaded_css
|
|
||||||
expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
|
|
||||||
|
|
||||||
page.refresh
|
|
||||||
expect(palette_selector).to have_selected_palette(marigold_palette)
|
|
||||||
expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
|
||||||
Reference in New Issue
Block a user