Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 9fefeef

Browse files
t3chguyt3chguy
authored
Spaces quick settings (#7196)
1 parent 138f668 commit 9fefeef

File tree

10 files changed

+366
-32
lines changed

10 files changed

+366
-32
lines changed

Diff for: ‎res/css/_components.scss

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
@import "./structures/_MyGroups.scss";
2323
@import "./structures/_NonUrgentToastContainer.scss";
2424
@import "./structures/_NotificationPanel.scss";
25+
@import "./structures/_QuickSettingsButton.scss";
2526
@import "./structures/_RightPanel.scss";
2627
@import "./structures/_RoomDirectory.scss";
2728
@import "./structures/_RoomSearch.scss";

Diff for: ‎res/css/structures/_QuickSettingsButton.scss

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
/*
2+
Copyright 2021 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_QuickSettingsButton {
18+
flex: 0 0 auto;
19+
width: 32px;
20+
height: 32px;
21+
border-radius: 8px;
22+
position: relative;
23+
margin: 12px auto;
24+
25+
&::before {
26+
content: "";
27+
position: absolute;
28+
width: inherit;
29+
height: inherit;
30+
mask-image: url('$(res)/img/element-icons/settings.svg');
31+
mask-repeat: no-repeat;
32+
mask-position: center;
33+
mask-size: 16px;
34+
background: $secondary-content;
35+
}
36+
37+
&:hover {
38+
background-color: $quaternary-content;
39+
40+
&::before {
41+
background-color: $primary-content;
42+
}
43+
}
44+
}
45+
46+
.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu {
47+
padding: 16px;
48+
width: max-content;
49+
min-width: 200px;
50+
contain: unset; // let the dropdown paint beyond the context menu
51+
52+
> div > h2 {
53+
font-weight: $font-semi-bold;
54+
font-size: $font-15px;
55+
line-height: $font-24px;
56+
color: $primary-content;
57+
margin: 0 0 16px;
58+
}
59+
60+
.mx_AccessibleButton_kind_primary_outline {
61+
display: block;
62+
}
63+
64+
> div > h4 {
65+
font-weight: $font-semi-bold;
66+
font-size: $font-12px;
67+
line-height: $font-15px;
68+
text-transform: uppercase;
69+
color: $tertiary-content;
70+
margin: 20px 0 12px;
71+
}
72+
73+
.mx_QuickSettingsButton_pinToSidebarHeading {
74+
padding-left: 24px;
75+
position: relative;
76+
77+
&::before {
78+
background-color: $secondary-content;
79+
content: "";
80+
mask-repeat: no-repeat;
81+
mask-position: center;
82+
mask-size: contain;
83+
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
84+
width: 16px;
85+
height: 16px;
86+
position: absolute;
87+
left: 0;
88+
top: 50%;
89+
transform: translateY(-50%);
90+
}
91+
}
92+
93+
.mx_Checkbox {
94+
margin-bottom: 8px;
95+
}
96+
97+
.mx_QuickSettingsButton_favouritesCheckbox,
98+
.mx_QuickSettingsButton_peopleCheckbox {
99+
.mx_Checkbox_background + div {
100+
padding-left: 22px;
101+
position: relative;
102+
margin-left: 6px;
103+
font-size: $font-15px;
104+
line-height: $font-24px;
105+
color: $secondary-content;
106+
107+
&::before {
108+
background-color: $secondary-content;
109+
content: "";
110+
mask-repeat: no-repeat;
111+
mask-position: center;
112+
mask-size: contain;
113+
width: 16px;
114+
height: 16px;
115+
position: absolute;
116+
left: 0;
117+
top: 50%;
118+
transform: translateY(-50%);
119+
}
120+
}
121+
}
122+
123+
.mx_QuickSettingsButton_favouritesCheckbox .mx_Checkbox_background + div::before {
124+
mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
125+
}
126+
127+
.mx_QuickSettingsButton_peopleCheckbox .mx_Checkbox_background + div::before {
128+
mask-image: url('$(res)/img/element-icons/room/members.svg');
129+
}
130+
131+
.mx_QuickSettingsButton_moreOptionsButton {
132+
padding-left: 22px;
133+
margin-left: 22px;
134+
font-size: $font-15px;
135+
line-height: $font-24px;
136+
color: $secondary-content;
137+
position: relative;
138+
margin-bottom: 16px;
139+
140+
&::before {
141+
background-color: $secondary-content;
142+
content: "";
143+
mask-repeat: no-repeat;
144+
mask-position: center;
145+
mask-size: contain;
146+
width: 16px;
147+
height: 16px;
148+
position: absolute;
149+
left: 0;
150+
top: 50%;
151+
transform: translateY(-50%);
152+
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
153+
}
154+
}
155+
156+
.mx_QuickSettingsButton_themePicker {
157+
display: flex;
158+
align-items: center;
159+
160+
> h4 {
161+
font-weight: $font-semi-bold;
162+
font-size: $font-12px;
163+
line-height: $font-15px;
164+
color: $secondary-content;
165+
text-transform: uppercase;
166+
display: inline-block;
167+
margin: 0;
168+
}
169+
170+
.mx_Dropdown {
171+
min-width: 100px;
172+
margin-left: auto;
173+
height: min-content;
174+
}
175+
}
176+
}

Diff for: ‎res/css/structures/_SpacePanel.scss

-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ $activeBorderColor: $secondary-content;
4848
mask-size: 32px;
4949
mask-repeat: no-repeat;
5050
margin-left: $gutterSize;
51-
margin-bottom: 12px;
5251
background-color: $tertiary-content;
5352
mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
5453

Diff for: ‎src/components/views/elements/Dropdown.tsx

+6-12
Original file line numberDiff line numberDiff line change
@@ -178,26 +178,20 @@ export default class Dropdown extends React.Component<IProps, IState> {
178178
this.ignoreEvent = ev;
179179
};
180180

181-
private onChevronClick = (ev: React.MouseEvent) => {
182-
if (this.state.expanded) {
183-
this.setState({ expanded: false });
184-
ev.stopPropagation();
185-
ev.preventDefault();
186-
}
187-
};
188-
189181
private onAccessibleButtonClick = (ev: ButtonEvent) => {
190182
if (this.props.disabled) return;
191183

192184
if (!this.state.expanded) {
193-
this.setState({
194-
expanded: true,
195-
});
185+
this.setState({ expanded: true });
196186
ev.preventDefault();
197187
} else if ((ev as React.KeyboardEvent).key === Key.ENTER) {
198188
// the accessible button consumes enter onKeyDown for firing onClick, so handle it here
199189
this.props.onOptionChange(this.state.highlightedOption);
200190
this.close();
191+
} else if (!(ev as React.KeyboardEvent).key) {
192+
// collapse on other non-keyboard event activations
193+
this.setState({ expanded: false });
194+
ev.preventDefault();
201195
}
202196
};
203197

@@ -383,7 +377,7 @@ export default class Dropdown extends React.Component<IProps, IState> {
383377
onKeyDown={this.onKeyDown}
384378
>
385379
{ currentValue }
386-
<span onClick={this.onChevronClick} className="mx_Dropdown_arrow" />
380+
<span className="mx_Dropdown_arrow" />
387381
{ menu }
388382
</AccessibleButton>
389383
</div>;

Diff for: ‎src/components/views/settings/ThemeChoicePanel.tsx

+4-12
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ limitations under the License.
1717
import React from 'react';
1818
import { _t } from "../../../languageHandler";
1919
import SettingsStore from "../../../settings/SettingsStore";
20-
import { enumerateThemes, findHighContrastTheme, findNonHighContrastTheme, isHighContrastTheme } from "../../../theme";
20+
import { findHighContrastTheme, findNonHighContrastTheme, getOrderedThemes, isHighContrastTheme } from "../../../theme";
2121
import ThemeWatcher from "../../../settings/watchers/ThemeWatcher";
2222
import AccessibleButton from "../elements/AccessibleButton";
2323
import dis from "../../../dispatcher/dispatcher";
@@ -28,7 +28,6 @@ import Field from '../elements/Field';
2828
import StyledRadioGroup from "../elements/StyledRadioGroup";
2929
import { SettingLevel } from "../../../settings/SettingLevel";
3030
import { replaceableComponent } from "../../../utils/replaceableComponent";
31-
import { compare } from "../../../utils/strings";
3231

3332
import { logger } from "matrix-js-sdk/src/logger";
3433

@@ -58,13 +57,13 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
5857
super(props);
5958

6059
this.state = {
61-
...this.calculateThemeState(),
60+
...ThemeChoicePanel.calculateThemeState(),
6261
customThemeUrl: "",
6362
customThemeMessage: { isError: false, text: "" },
6463
};
6564
}
6665

67-
private calculateThemeState(): IThemeState {
66+
public static calculateThemeState(): IThemeState {
6867
// We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
6968
// show the right values for things.
7069

@@ -238,14 +237,7 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
238237
);
239238
}
240239

241-
// XXX: replace any type here
242-
const themes = Object.entries<any>(enumerateThemes())
243-
.map(p => ({ id: p[0], name: p[1] })) // convert pairs to objects for code readability
244-
.filter(p => !isHighContrastTheme(p.id));
245-
const builtInThemes = themes.filter(p => !p.id.startsWith("custom-"));
246-
const customThemes = themes.filter(p => !builtInThemes.includes(p))
247-
.sort((a, b) => compare(a.name, b.name));
248-
const orderedThemes = [...builtInThemes, ...customThemes];
240+
const orderedThemes = getOrderedThemes();
249241
return (
250242
<div className="mx_SettingsTab_section mx_ThemeChoicePanel">
251243
<span className="mx_SettingsTab_subheading">{ _t("Theme") }</span>

Diff for: ‎src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import StyledCheckbox from "../../../elements/StyledCheckbox";
2323
import { useSettingValue } from "../../../../../hooks/useSettings";
2424
import { MetaSpace } from "../../../../../stores/spaces";
2525

26-
const onMetaSpaceChangeFactory = (metaSpace: MetaSpace) => (e: ChangeEvent<HTMLInputElement>) => {
26+
export const onMetaSpaceChangeFactory = (metaSpace: MetaSpace) => (e: ChangeEvent<HTMLInputElement>) => {
2727
const currentValue = SettingsStore.getValue("Spaces.enabledMetaSpaces");
2828
SettingsStore.setValue("Spaces.enabledMetaSpaces", null, SettingLevel.ACCOUNT, {
2929
...currentValue,

0 commit comments

Comments
 (0)