Skip to content

Commit 1f18bf7

Browse files
borsbors
committed
Auto merge of #4368 - Turbo87:appearance-settings, r=Turbo87
Replace "Toggle Design" button with new `/settings/appearance` route Just like the "Toggle Design" button before, this route is only visible in development mode, or to be more precise: the link to this route is only visible in development mode, so that we can test this out in production too. This should be seen as a first step towards implementing a "dark color scheme" mode (see #3585), roughly inspired by how GitHub has implemented it in their user settings. <img width="1000" alt="Bildschirmfoto 2021-12-26 um 19 34 12" src="https://user-images.githubusercontent.com/141300/147417178-16083d7d-6f57-47e0-b980-820ee5af1acf.png">
2 parents 1eccc92 + 48b5e14 commit 1f18bf7

13 files changed

+214
-44
lines changed

‎app/components/footer.module.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
:root {
1+
:root, [data-theme="classic"] {
22
--footer-bg-color: var(--green800);
33
--footer-header-color: var(--yellow500);
44
--footer-header-shadow-color: var(--green900);
@@ -7,6 +7,10 @@
77
--footer-link-hover-shadow-color: var(--green900);
88
}
99

10+
[data-theme="new-design"] {
11+
--footer-bg-color: var(--grey900);
12+
}
13+
1014
.footer {
1115
display: grid;
1216
justify-items: center;

‎app/components/radio-button.hbs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<input
2+
type="radio"
3+
checked={{eq @groupValue @value}}
4+
...attributes
5+
{{on "change" (fn @onChange @value)}}
6+
/>

‎app/components/settings-page.hbs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<div local-class="page" ...attributes>
22
<SideMenu as |menu|>
33
<menu.Item @link={{link "settings.profile"}}>Profile</menu.Item>
4+
{{#if this.design.showToggleButton}}
5+
<menu.Item @link={{link "settings.appearance"}}>Appearance</menu.Item>
6+
{{/if}}
47
<menu.Item @link={{link "settings.email-notifications"}}>Email Notifications</menu.Item>
58
<menu.Item @link={{link "settings.tokens"}}>API Tokens</menu.Item>
69
</SideMenu>

‎app/components/settings-page.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { inject as service } from '@ember/service';
2+
import Component from '@glimmer/component';
3+
4+
export default class SettingsPage extends Component {
5+
@service design;
6+
}

‎app/components/theme-preview.hbs

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div local-class="preview" data-theme={{@theme}} ...attributes>
2+
<div local-class="header">
3+
<div local-class="logo"></div>
4+
<div local-class="title"></div>
5+
</div>
6+
7+
<div local-class="main">
8+
<div local-class="text"></div>
9+
<div local-class="text"></div>
10+
<div local-class="box">
11+
<div local-class="text"></div>
12+
<div local-class="text"></div>
13+
</div>
14+
</div>
15+
16+
<div local-class="footer">
17+
<div local-class="title"></div>
18+
<div local-class="link"></div>
19+
</div>
20+
</div>

‎app/components/theme-preview.module.css

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
.preview {
2+
display: grid;
3+
grid-template-rows: 1fr 4fr 2fr;
4+
background-color: var(--main-bg);
5+
border: 1px solid var(--main-bg-dark);
6+
border-radius: 4px;
7+
overflow: hidden;
8+
}
9+
10+
.header {
11+
display: flex;
12+
align-items: center;
13+
background-color: var(--header-bg-color);
14+
15+
.logo {
16+
margin-left: 5%;
17+
height: 35%;
18+
aspect-ratio: 1;
19+
border-radius: 99999px;
20+
background-color: var(--yellow500);
21+
}
22+
23+
.title {
24+
margin-left: 5%;
25+
height: 35%;
26+
width: 40%;
27+
border-radius: 99999px;
28+
background-color: white;
29+
}
30+
}
31+
32+
.main {
33+
background-color: var(--main-bg);
34+
35+
.text {
36+
margin-top: 4%;
37+
margin-left: 5%;
38+
height: calc(35% / 4);
39+
width: 70%;
40+
border-radius: 99999px;
41+
background-color: var(--main-color);
42+
43+
& + .text {
44+
width: 50%;
45+
}
46+
}
47+
48+
.box {
49+
display: inline-block;
50+
margin-top: 5%;
51+
margin-left: 5%;
52+
height: 40%;
53+
width: 50%;
54+
border-radius: 2px;
55+
background-color: white;
56+
57+
.text {
58+
margin-top: 7%;
59+
margin-left: 5%;
60+
height: calc(35% / (4 * 0.4));
61+
width: 50%;
62+
border-radius: 99999px;
63+
background-color: var(--main-color);
64+
65+
& + .text {
66+
width: 70%;
67+
background-color: var(--main-color-light);
68+
}
69+
}
70+
}
71+
}
72+
73+
.footer {
74+
background-color: var(--footer-bg-color);
75+
76+
.title {
77+
margin-top: 4%;
78+
margin-left: 5%;
79+
height: calc(35% / 3);
80+
width: 15%;
81+
border-radius: 99999px;
82+
background-color: var(--footer-header-color);
83+
}
84+
85+
.link {
86+
margin-top: 4%;
87+
margin-left: 5%;
88+
height: calc(35% / 3);
89+
width: 25%;
90+
border-radius: 99999px;
91+
background-color: var(--footer-link-color);
92+
}
93+
}

‎app/controllers/settings/appearance.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Controller from '@ember/controller';
2+
import { action } from '@ember/object';
3+
import { inject as service } from '@ember/service';
4+
5+
import { alias } from 'macro-decorators';
6+
7+
export default class AppearanceSettingsController extends Controller {
8+
@service design;
9+
10+
@alias('design.theme') theme;
11+
12+
@action setTheme(theme) {
13+
this.theme = theme;
14+
}
15+
}

‎app/router.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ Router.map(function () {
3232
this.route('pending-invites');
3333
});
3434
this.route('settings', function () {
35+
this.route('appearance');
3536
this.route('email-notifications');
3637
this.route('profile');
3738
this.route('tokens');

‎app/services/design.js

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
1-
import { action } from '@ember/object';
21
import Service, { inject as service } from '@ember/service';
32
import { tracked } from '@glimmer/tracking';
43

5-
import window from 'ember-window-mock';
6-
74
import config from '../config/environment';
85
import * as localStorage from '../utils/local-storage';
96

7+
const KNOWN_THEMES = new Set(['classic', 'new-design']);
8+
109
export default class DesignService extends Service {
1110
@service fastboot;
1211

13-
@tracked useNewDesign = !this.fastboot.isFastBoot && localStorage.getItem('use-new-design') === 'true';
14-
@tracked showToggleButton = config.environment === 'development';
12+
@tracked _theme = localStorage.getItem('theme');
13+
@tracked showToggleButton = config.environment === 'development' || config.environment === 'test';
1514

16-
constructor() {
17-
super(...arguments);
18-
window.toggleDesign = () => this.toggle();
15+
get theme() {
16+
return KNOWN_THEMES.has(this._theme) ? this._theme : 'classic';
1917
}
2018

21-
@action
22-
toggle() {
23-
this.useNewDesign = !this.useNewDesign;
24-
localStorage.setItem('use-new-design', String(this.useNewDesign));
19+
set theme(theme) {
20+
this._theme = theme;
21+
localStorage.setItem('theme', theme);
2522
}
2623
}

‎app/styles/application.module.css

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
:root {
1+
:root, [data-theme="classic"] {
22
--violet800: hsl(252, 44%, 24%);
33
--grey900: hsl(200, 15%, 19%);
44
--grey700: hsl(200, 11%, 43%);
@@ -29,10 +29,9 @@
2929
--placeholder-bg2: hsl(213, 16%, 75%);
3030
}
3131

32-
:root[data-theme="new-design"] {
32+
[data-theme="new-design"] {
3333
--header-bg-color: var(--violet800);
3434
--main-bg: white;
35-
--footer-bg-color: var(--grey900);
3635
}
3736

3837
* {
@@ -122,23 +121,3 @@ noscript {
122121
margin: 15px 0;
123122
padding: 0 15px;
124123
}
125-
126-
.toggle-design-button {
127-
position: fixed;
128-
bottom: 30px;
129-
left: 30px;
130-
z-index: 100;
131-
padding: 10px;
132-
border: none;
133-
border-radius: 5px;
134-
background: white;
135-
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
136-
color: black;
137-
font-family: sans-serif;
138-
cursor: pointer;
139-
140-
&:hover {
141-
background: #f7f7f7;
142-
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
143-
}
144-
}

‎app/styles/settings/appearance.module.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.themes-form {
2+
display: flex;
3+
gap: 8px;
4+
flex-wrap: wrap;
5+
}
6+
7+
.theme-label {
8+
display: inline-block;
9+
padding: 16px;
10+
background: white;
11+
border-radius: 6px;
12+
box-shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
13+
}
14+
15+
.theme-preview {
16+
width: 200px;
17+
height: 160px;
18+
margin-bottom: 16px;
19+
}

‎app/templates/application.hbs

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<HeadLayout />
22

33
{{page-title "crates.io: Rust Package Registry" separator=' - ' prepend=true}}
4-
{{set-theme (if this.design.useNewDesign "new-design")}}
4+
{{set-theme this.design.theme}}
55

66
<ProgressBar/>
77
<NotificationContainer @position="top-right"/>
@@ -14,10 +14,4 @@
1414
</div>
1515
</main>
1616

17-
<Footer/>
18-
19-
{{#if this.design.showToggleButton}}
20-
<button type="button" local-class="toggle-design-button" {{on "click" this.design.toggle}}>
21-
Toggle Design
22-
</button>
23-
{{/if}}
17+
<Footer/>

‎app/templates/settings/appearance.hbs

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{{page-title 'Settings'}}
2+
3+
<PageHeader @title="Account Settings" @icon="gear"/>
4+
5+
<SettingsPage>
6+
<h2>Appearance</h2>
7+
8+
<form local-class="themes-form">
9+
<label local-class="theme-label">
10+
<ThemePreview @theme="classic" local-class="theme-preview" />
11+
12+
<RadioButton
13+
@groupValue={{this.theme}}
14+
@value="classic"
15+
@onChange={{this.setTheme}}
16+
/>
17+
18+
Classic
19+
</label>
20+
21+
<label local-class="theme-label">
22+
<ThemePreview @theme="new-design" local-class="theme-preview" />
23+
24+
<RadioButton
25+
@groupValue={{this.theme}}
26+
@value="new-design"
27+
@onChange={{this.setTheme}}
28+
/>
29+
30+
Purple
31+
</label>
32+
</form>
33+
</SettingsPage>

0 commit comments

Comments
 (0)