github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-26 01:39:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
discourse/app/assets/stylesheets/common/select-kit/email-group-user-chooser.scss

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

48 lines
902 B
SCSS
Raw Normal View History

DEV: {{user-selector}} replacement (#11726) This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are: 1. It's called `{{user-selector}}`, but in reality in can also select groups and emails. 2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](https://github.com/discourse/discourse/blob/6c155dba775441ccef9ac21c770102857978286d/app/assets/javascripts/discourse/app/components/user-selector.js#L179-L185). 3. We now have select kit which does very similar things but a lot better. This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit. Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.
2021-02-01 13:07:11 +03:00
.select-kit.email-group-user-chooser {
DEV: Deprecate {{user-selector}} and replace it with {{email-group-user-chooser}} (#12042) `{{user-selector}}` is now deprecated and it will be removed from core in Discourse 2.8. All instances of `{{user-selector}}` has been replaced with `{{email-group-user-chooser}}`.
2021-02-12 13:51:36 +03:00
&.full-width-wrap {
width: unset;
}
FIX: Set fixed width for email group chooser dropdown to prevent resizing based on content (#30740) This PR addresses an issue where the dropdown container width was inconsistent, resizing based on its content. **Changes included:** - Added a fixed width for the dropdown container. - Adjusted margin spacing by applying it to the `.identifier` class instead of `.name`. This prevents awkward spacing when either contains a large number of characters. Internal topic: /t/143862
2025-01-13 19:00:09 -07:00
&.is-expanded .select-kit-body {
width: 300px;
}
DEV: {{user-selector}} replacement (#11726) This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are: 1. It's called `{{user-selector}}`, but in reality in can also select groups and emails. 2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](https://github.com/discourse/discourse/blob/6c155dba775441ccef9ac21c770102857978286d/app/assets/javascripts/discourse/app/components/user-selector.js#L179-L185). 3. We now have select kit which does very similar things but a lot better. This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit. Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.
2021-02-01 13:07:11 +03:00
.select-kit-row.email-group-user-chooser-row {
.identifier {
color: var(--primary);
white-space: nowrap;
UX: avoid overflow clipping descenders (#20643)
2023-03-10 16:49:06 -05:00
line-height: var(--line-height-medium);
FIX: Set fixed width for email group chooser dropdown to prevent resizing based on content (#30740) This PR addresses an issue where the dropdown container width was inconsistent, resizing based on its content. **Changes included:** - Added a fixed width for the dropdown container. - Adjusted margin spacing by applying it to the `.identifier` class instead of `.name`. This prevents awkward spacing when either contains a large number of characters. Internal topic: /t/143862
2025-01-13 19:00:09 -07:00
margin-right: 0.5em;
DEV: {{user-selector}} replacement (#11726) This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are: 1. It's called `{{user-selector}}`, but in reality in can also select groups and emails. 2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](https://github.com/discourse/discourse/blob/6c155dba775441ccef9ac21c770102857978286d/app/assets/javascripts/discourse/app/components/user-selector.js#L179-L185). 3. We now have select kit which does very similar things but a lot better. This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit. Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.
2021-02-01 13:07:11 +03:00
}
DEV: Introduce stylelint (#29852) Stylelint is a css linter: https://stylelint.io/ As part of this change we have added two javascript scripts: ``` pnpm lint:css pnpm lint:css:fix ``` Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for configuration in VSCode. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2025-01-20 15:27:42 +00:00
DEV: {{user-selector}} replacement (#11726) This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are: 1. It's called `{{user-selector}}`, but in reality in can also select groups and emails. 2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](https://github.com/discourse/discourse/blob/6c155dba775441ccef9ac21c770102857978286d/app/assets/javascripts/discourse/app/components/user-selector.js#L179-L185). 3. We now have select kit which does very similar things but a lot better. This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit. Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.
2021-02-01 13:07:11 +03:00
.name {
color: var(--primary-high);
DEV: Use css var font sizes (#18518) For consistency and and the ability to change all font sizes at once in the dev tools
2022-10-12 15:31:59 +02:00
font-size: var(--font-down-1);
UX: avoid overflow clipping descenders (#20643)
2023-03-10 16:49:06 -05:00
@include ellipsis;
DEV: {{user-selector}} replacement (#11726) This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are: 1. It's called `{{user-selector}}`, but in reality in can also select groups and emails. 2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](https://github.com/discourse/discourse/blob/6c155dba775441ccef9ac21c770102857978286d/app/assets/javascripts/discourse/app/components/user-selector.js#L179-L185). 3. We now have select kit which does very similar things but a lot better. This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit. Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.
2021-02-01 13:07:11 +03:00
}
DEV: Introduce stylelint (#29852) Stylelint is a css linter: https://stylelint.io/ As part of this change we have added two javascript scripts: ``` pnpm lint:css pnpm lint:css:fix ``` Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for configuration in VSCode. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2025-01-20 15:27:42 +00:00
DEV: {{user-selector}} replacement (#11726) This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are: 1. It's called `{{user-selector}}`, but in reality in can also select groups and emails. 2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](https://github.com/discourse/discourse/blob/6c155dba775441ccef9ac21c770102857978286d/app/assets/javascripts/discourse/app/components/user-selector.js#L179-L185). 3. We now have select kit which does very similar things but a lot better. This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit. Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.
2021-02-01 13:07:11 +03:00
.avatar,
.d-icon {
margin-left: 0;
margin-right: 0.5em;
}
}
DEV: Introduce stylelint (#29852) Stylelint is a css linter: https://stylelint.io/ As part of this change we have added two javascript scripts: ``` pnpm lint:css pnpm lint:css:fix ``` Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for configuration in VSCode. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2025-01-20 15:27:42 +00:00
DEV: {{user-selector}} replacement (#11726) This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are: 1. It's called `{{user-selector}}`, but in reality in can also select groups and emails. 2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](https://github.com/discourse/discourse/blob/6c155dba775441ccef9ac21c770102857978286d/app/assets/javascripts/discourse/app/components/user-selector.js#L179-L185). 3. We now have select kit which does very similar things but a lot better. This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit. Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.
2021-02-01 13:07:11 +03:00
.select-kit-header {
.x-more-item {
background: var(--primary-low);
padding: 0.25em;
flex: 1;
align-items: center;
display: flex;
justify-content: space-between;
box-sizing: border-box;
DEV: Introduce stylelint (#29852) Stylelint is a css linter: https://stylelint.io/ As part of this change we have added two javascript scripts: ``` pnpm lint:css pnpm lint:css:fix ``` Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for configuration in VSCode. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2025-01-20 15:27:42 +00:00
margin: 2px 0 0 3px;
DEV: {{user-selector}} replacement (#11726) This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are: 1. It's called `{{user-selector}}`, but in reality in can also select groups and emails. 2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](https://github.com/discourse/discourse/blob/6c155dba775441ccef9ac21c770102857978286d/app/assets/javascripts/discourse/app/components/user-selector.js#L179-L185). 3. We now have select kit which does very similar things but a lot better. This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit. Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.
2021-02-01 13:07:11 +03:00
float: left;
height: 30px;
color: inherit;
outline: none;
}
}
}
Reference in New Issue Copy Permalink