github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-02 17:34:02 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
aa89acbda6
discourse/plugins/chat/assets/stylesheets/common/chat-notices.scss

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

44 lines
753 B
SCSS
Raw Normal View History

DEV: Introduce Chat Notices with publishing method (#22369)
2023-07-06 21:26:25 +08:00
.chat-notices {
display: flex;
flex-direction: column;
gap: 0.5em;
position: absolute;
top: 0;
z-index: 10;
UX: different way of centering chat notice to accommodate longer texts (#22779) * UX: different way of centering chat notice to accommodate longer * linting * UX: keep close button in top right corner
2023-07-27 21:53:43 +08:00
width: 100%;
.full-page-chat & {
padding-inline: 1rem;
box-sizing: border-box;
}
DEV: Introduce Chat Notices with publishing method (#22369)
2023-07-06 21:26:25 +08:00
&__notice,
.chat-retention-reminder {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--tertiary-low);
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
padding: 0.5rem;
DEV: Introduce Chat Notices with publishing method (#22369)
2023-07-06 21:26:25 +08:00
color: var(--primary);
UX: different way of centering chat notice to accommodate longer texts (#22779) * UX: different way of centering chat notice to accommodate longer * linting * UX: keep close button in top right corner
2023-07-27 21:53:43 +08:00
min-width: 280px;
margin-left: auto;
margin-right: 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
gap: 0.25rem;
FIX: ensures chat panel can't have an invalid width (#27876) Prior to this fix the following sequence would cause an overflow: - open a thread - expand thread panel to maximum width - close panel - reduce window width - open thread again - :boom: The fix is now ensuring that we never use or set a width which would cause the main panel + side panel to be larger than the chat container. We also removed the service as it was overkill for this case and it's easier to have all the implementation at one place. This commit also uses JS animation api to set the width of the panel. <!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2024-07-12 02:27:30 +08:00
box-sizing: border-box;
DEV: Introduce Chat Notices with publishing method (#22369)
2023-07-06 21:26:25 +08:00
}
UX: different way of centering chat notice to accommodate longer texts (#22779) * UX: different way of centering chat notice to accommodate longer * linting * UX: keep close button in top right corner
2023-07-27 21:53:43 +08:00
.dismiss-btn {
DEV: Introduce Chat Notices with publishing method (#22369)
2023-07-06 21:26:25 +08:00
color: var(--primary-medium);
UX: different way of centering chat notice to accommodate longer texts (#22779) * UX: different way of centering chat notice to accommodate longer * linting * UX: keep close button in top right corner
2023-07-27 21:53:43 +08:00
align-self: flex-start;
DEV: Introduce Chat Notices with publishing method (#22369)
2023-07-06 21:26:25 +08:00
&:hover,
&:focus {
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
background: var(--tertiary-medium);
DEV: Introduce Chat Notices with publishing method (#22369)
2023-07-06 21:26:25 +08:00
}
}
}
.full-page-chat .chat-notices {
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
top: 2rem;
DEV: Introduce Chat Notices with publishing method (#22369)
2023-07-06 21:26:25 +08:00
}
Reference in New Issue Copy Permalink