github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-03 19:33:38 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
283fe48243
discourse/plugins/chat/assets/stylesheets/common/chat-navbar.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

67 lines
1.2 KiB
SCSS
Raw Normal View History

DEV: implements <Chat::Navbar /> (#24917) This new navbar component is used for every navbar in chat, full page or drawer, and any screen. This commit also uses this opportunity to correctly decouple drawer-routes from full page routes. This will avoid having this kind of properties in components: `@includeHeader={{false}}`. The header is now defined in the parent template using a navbar. Each route has now its own template wrapped in a div of the name of the route, eg: `<div class="c-routes-threads">..</div>`. The navbar API: ```gjs <Navbar as |navbar|> <navbar.BackButton /> <navbar.Title @title="Foo" /> <navbar.ChannelTitle @channel={{@channel}} /> <navbar.Actions as |action|> <action.CloseThreadButton /> </navbar.Actions> </navbar> ``` The full list of components is listed in `plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs` and `plugins/chat/assets/javascripts/discourse/components/navbar/actions.gjs`. Visually the header is not changing much, only in drawer mode the background has been removed. This commit also introduces a `<List />` component to facilitate rendering lists in chat plugin.
2023-12-19 00:49:58 +08:00
.c-navbar {
FEATURE: my threads page (#24771) This commit adds a new "My threads" link in sidebar and drawer. This link will open the "/chat/threads" page which contains all threads where the current user is a member. It's ordered by activity (unread and then last message created). Moreover, the threads list of a channel page is now showing every threads of a channel, and not just the ones where you are a member.
2023-12-11 14:38:07 +08:00
display: flex;
align-items: center;
width: 100%;
DEV: implements <Chat::Navbar /> (#24917) This new navbar component is used for every navbar in chat, full page or drawer, and any screen. This commit also uses this opportunity to correctly decouple drawer-routes from full page routes. This will avoid having this kind of properties in components: `@includeHeader={{false}}`. The header is now defined in the parent template using a navbar. Each route has now its own template wrapped in a div of the name of the route, eg: `<div class="c-routes-threads">..</div>`. The navbar API: ```gjs <Navbar as |navbar|> <navbar.BackButton /> <navbar.Title @title="Foo" /> <navbar.ChannelTitle @channel={{@channel}} /> <navbar.Actions as |action|> <action.CloseThreadButton /> </navbar.Actions> </navbar> ``` The full list of components is listed in `plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs` and `plugins/chat/assets/javascripts/discourse/components/navbar/actions.gjs`. Visually the header is not changing much, only in drawer mode the background has been removed. This commit also introduces a `<List />` component to facilitate rendering lists in chat plugin.
2023-12-19 00:49:58 +08:00
gap: 0.25rem;
FEATURE: my threads page (#24771) This commit adds a new "My threads" link in sidebar and drawer. This link will open the "/chat/threads" page which contains all threads where the current user is a member. It's ordered by activity (unread and then last message created). Moreover, the threads list of a channel page is now showing every threads of a channel, and not just the ones where you are a member.
2023-12-11 14:38:07 +08:00
&-container {
border-bottom: 1px solid var(--primary-low);
background: var(--secondary);
DEV: implements <Chat::Navbar /> (#24917) This new navbar component is used for every navbar in chat, full page or drawer, and any screen. This commit also uses this opportunity to correctly decouple drawer-routes from full page routes. This will avoid having this kind of properties in components: `@includeHeader={{false}}`. The header is now defined in the parent template using a navbar. Each route has now its own template wrapped in a div of the name of the route, eg: `<div class="c-routes-threads">..</div>`. The navbar API: ```gjs <Navbar as |navbar|> <navbar.BackButton /> <navbar.Title @title="Foo" /> <navbar.ChannelTitle @channel={{@channel}} /> <navbar.Actions as |action|> <action.CloseThreadButton /> </navbar.Actions> </navbar> ``` The full list of components is listed in `plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs` and `plugins/chat/assets/javascripts/discourse/components/navbar/actions.gjs`. Visually the header is not changing much, only in drawer mode the background has been removed. This commit also introduces a `<List />` component to facilitate rendering lists in chat plugin.
2023-12-19 00:49:58 +08:00
height: var(--chat-header-offset);
min-height: var(--chat-header-offset);
FEATURE: my threads page (#24771) This commit adds a new "My threads" link in sidebar and drawer. This link will open the "/chat/threads" page which contains all threads where the current user is a member. It's ordered by activity (unread and then last message created). Moreover, the threads list of a channel page is now showing every threads of a channel, and not just the ones where you are a member.
2023-12-11 14:38:07 +08:00
box-sizing: border-box;
display: flex;
DEV: implements <Chat::Navbar /> (#24917) This new navbar component is used for every navbar in chat, full page or drawer, and any screen. This commit also uses this opportunity to correctly decouple drawer-routes from full page routes. This will avoid having this kind of properties in components: `@includeHeader={{false}}`. The header is now defined in the parent template using a navbar. Each route has now its own template wrapped in a div of the name of the route, eg: `<div class="c-routes-threads">..</div>`. The navbar API: ```gjs <Navbar as |navbar|> <navbar.BackButton /> <navbar.Title @title="Foo" /> <navbar.ChannelTitle @channel={{@channel}} /> <navbar.Actions as |action|> <action.CloseThreadButton /> </navbar.Actions> </navbar> ``` The full list of components is listed in `plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs` and `plugins/chat/assets/javascripts/discourse/components/navbar/actions.gjs`. Visually the header is not changing much, only in drawer mode the background has been removed. This commit also introduces a `<List />` component to facilitate rendering lists in chat plugin.
2023-12-19 00:49:58 +08:00
z-index: z("composer", "content") - 1;
UX: chat navbar > alignments part 2 (#24985) * UX: chat navbar > alignments part 2 * Change copy to be consistent My threads * Dont show back button on full page desktop
2023-12-20 23:24:10 +08:00
padding-inline: 1rem;
DEV: implements <Chat::Navbar /> (#24917) This new navbar component is used for every navbar in chat, full page or drawer, and any screen. This commit also uses this opportunity to correctly decouple drawer-routes from full page routes. This will avoid having this kind of properties in components: `@includeHeader={{false}}`. The header is now defined in the parent template using a navbar. Each route has now its own template wrapped in a div of the name of the route, eg: `<div class="c-routes-threads">..</div>`. The navbar API: ```gjs <Navbar as |navbar|> <navbar.BackButton /> <navbar.Title @title="Foo" /> <navbar.ChannelTitle @channel={{@channel}} /> <navbar.Actions as |action|> <action.CloseThreadButton /> </navbar.Actions> </navbar> ``` The full list of components is listed in `plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs` and `plugins/chat/assets/javascripts/discourse/components/navbar/actions.gjs`. Visually the header is not changing much, only in drawer mode the background has been removed. This commit also introduces a `<List />` component to facilitate rendering lists in chat plugin.
2023-12-19 00:49:58 +08:00
&.-clickable {
cursor: pointer;
}
}
.single-select-header {
padding: 0.3675rem 0.584rem;
}
.c-navbar__channel-title {
@include ellipsis();
font-weight: 700;
}
.c-navbar__title {
@include ellipsis();
font-weight: 700;
UX: chat navbar > alignments part 2 (#24985) * UX: chat navbar > alignments part 2 * Change copy to be consistent My threads * Dont show back button on full page desktop
2023-12-20 23:24:10 +08:00
.chat-drawer & {
padding-left: 1rem;
}
}
.c-navbar__back-button ~ .c-navbar__title {
padding-left: 0;
DEV: implements <Chat::Navbar /> (#24917) This new navbar component is used for every navbar in chat, full page or drawer, and any screen. This commit also uses this opportunity to correctly decouple drawer-routes from full page routes. This will avoid having this kind of properties in components: `@includeHeader={{false}}`. The header is now defined in the parent template using a navbar. Each route has now its own template wrapped in a div of the name of the route, eg: `<div class="c-routes-threads">..</div>`. The navbar API: ```gjs <Navbar as |navbar|> <navbar.BackButton /> <navbar.Title @title="Foo" /> <navbar.ChannelTitle @channel={{@channel}} /> <navbar.Actions as |action|> <action.CloseThreadButton /> </navbar.Actions> </navbar> ``` The full list of components is listed in `plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs` and `plugins/chat/assets/javascripts/discourse/components/navbar/actions.gjs`. Visually the header is not changing much, only in drawer mode the background has been removed. This commit also introduces a `<List />` component to facilitate rendering lists in chat plugin.
2023-12-19 00:49:58 +08:00
}
.c-navbar__sub-title {
line-height: var(--line-height-small);
font-size: var(--font-down-1-rem);
font-weight: normal;
}
.c-navbar__threads-list-button {
gap: 0.25rem;
&.has-unreads {
.d-icon-discourse-threads {
UX: use same colour for thread icon as for indicator when unread (#24967)
2023-12-19 19:09:09 +08:00
color: var(--tertiary-med-or-tertiary);
DEV: implements <Chat::Navbar /> (#24917) This new navbar component is used for every navbar in chat, full page or drawer, and any screen. This commit also uses this opportunity to correctly decouple drawer-routes from full page routes. This will avoid having this kind of properties in components: `@includeHeader={{false}}`. The header is now defined in the parent template using a navbar. Each route has now its own template wrapped in a div of the name of the route, eg: `<div class="c-routes-threads">..</div>`. The navbar API: ```gjs <Navbar as |navbar|> <navbar.BackButton /> <navbar.Title @title="Foo" /> <navbar.ChannelTitle @channel={{@channel}} /> <navbar.Actions as |action|> <action.CloseThreadButton /> </navbar.Actions> </navbar> ``` The full list of components is listed in `plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs` and `plugins/chat/assets/javascripts/discourse/components/navbar/actions.gjs`. Visually the header is not changing much, only in drawer mode the background has been removed. This commit also introduces a `<List />` component to facilitate rendering lists in chat plugin.
2023-12-19 00:49:58 +08:00
}
}
FEATURE: my threads page (#24771) This commit adds a new "My threads" link in sidebar and drawer. This link will open the "/chat/threads" page which contains all threads where the current user is a member. It's ordered by activity (unread and then last message created). Moreover, the threads list of a channel page is now showing every threads of a channel, and not just the ones where you are a member.
2023-12-11 14:38:07 +08:00
}
}
DEV: implements <Chat::Navbar /> (#24917) This new navbar component is used for every navbar in chat, full page or drawer, and any screen. This commit also uses this opportunity to correctly decouple drawer-routes from full page routes. This will avoid having this kind of properties in components: `@includeHeader={{false}}`. The header is now defined in the parent template using a navbar. Each route has now its own template wrapped in a div of the name of the route, eg: `<div class="c-routes-threads">..</div>`. The navbar API: ```gjs <Navbar as |navbar|> <navbar.BackButton /> <navbar.Title @title="Foo" /> <navbar.ChannelTitle @channel={{@channel}} /> <navbar.Actions as |action|> <action.CloseThreadButton /> </navbar.Actions> </navbar> ``` The full list of components is listed in `plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs` and `plugins/chat/assets/javascripts/discourse/components/navbar/actions.gjs`. Visually the header is not changing much, only in drawer mode the background has been removed. This commit also introduces a `<List />` component to facilitate rendering lists in chat plugin.
2023-12-19 00:49:58 +08:00
.c-navbar__actions {
FEATURE: my threads page (#24771) This commit adds a new "My threads" link in sidebar and drawer. This link will open the "/chat/threads" page which contains all threads where the current user is a member. It's ordered by activity (unread and then last message created). Moreover, the threads list of a channel page is now showing every threads of a channel, and not just the ones where you are a member.
2023-12-11 14:38:07 +08:00
list-style: none;
margin-left: auto;
DEV: implements <Chat::Navbar /> (#24917) This new navbar component is used for every navbar in chat, full page or drawer, and any screen. This commit also uses this opportunity to correctly decouple drawer-routes from full page routes. This will avoid having this kind of properties in components: `@includeHeader={{false}}`. The header is now defined in the parent template using a navbar. Each route has now its own template wrapped in a div of the name of the route, eg: `<div class="c-routes-threads">..</div>`. The navbar API: ```gjs <Navbar as |navbar|> <navbar.BackButton /> <navbar.Title @title="Foo" /> <navbar.ChannelTitle @channel={{@channel}} /> <navbar.Actions as |action|> <action.CloseThreadButton /> </navbar.Actions> </navbar> ``` The full list of components is listed in `plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs` and `plugins/chat/assets/javascripts/discourse/components/navbar/actions.gjs`. Visually the header is not changing much, only in drawer mode the background has been removed. This commit also introduces a `<List />` component to facilitate rendering lists in chat plugin.
2023-12-19 00:49:58 +08:00
display: flex;
align-items: center;
FEATURE: my threads page (#24771) This commit adds a new "My threads" link in sidebar and drawer. This link will open the "/chat/threads" page which contains all threads where the current user is a member. It's ordered by activity (unread and then last message created). Moreover, the threads list of a channel page is now showing every threads of a channel, and not just the ones where you are a member.
2023-12-11 14:38:07 +08:00
}
Reference in New Issue Copy Permalink