Skip to content

Commit fe4e0a2

Browse files
committed
Auto merge of #2482 - Turbo87:theme-switcher, r=pichfl
Add theme switcher in development mode This will add a "Toggle Design" button to the development mode that toggles the color scheme and fonts to a new design proposal. This will allow us to incrementally improve the design and eventually switch over. r? @pichfl
2 parents 9023f82 + 2ae350d commit fe4e0a2

File tree

7 files changed

+93
-4
lines changed

7 files changed

+93
-4
lines changed

app/components/footer.module.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
display: flex;
33
justify-content: center;
44
width: 100%;
5+
background: var(--footer-bg-color);
56
}
67

78
.sep {

app/controllers/application.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ import Controller from '@ember/controller';
22
import { inject as service } from '@ember/service';
33

44
export default Controller.extend({
5+
design: service(),
56
flashMessages: service(),
67
});

app/helpers/add-html-class.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Helper from '@ember/component/helper';
2+
3+
export default class extends Helper {
4+
cssClass = null;
5+
6+
compute(positional, options) {
7+
this.cssClass = options.class;
8+
document.documentElement.classList.add(this.cssClass);
9+
}
10+
11+
willDestroy() {
12+
document.documentElement.classList.remove(this.cssClass);
13+
}
14+
}

app/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
1515
<link rel="stylesheet" href="{{rootURL}}assets/cargo.css">
16+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,600;0,800;1,400;1,600;1,800&display=swap">
1617

1718
<link rel="manifest" href="{{rootURL}}manifest.webmanifest">
1819
<meta name="msapplication-config" content="{{rootURL}}browserconfig.xml">

app/services/design.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { action } from '@ember/object';
2+
import Service, { inject as service } from '@ember/service';
3+
import { tracked } from '@glimmer/tracking';
4+
5+
import window from 'ember-window-mock';
6+
7+
import config from '../config/environment';
8+
9+
export default class DesignService extends Service {
10+
@service fastboot;
11+
12+
@tracked useNewDesign = !this.fastboot.isFastBoot && window.localStorage.getItem('use-new-design') === 'true';
13+
@tracked showToggleButton = config.environment === 'development';
14+
15+
constructor() {
16+
super(...arguments);
17+
window.toggleDesign = () => this.toggle();
18+
}
19+
20+
@action
21+
toggle() {
22+
this.useNewDesign = !this.useNewDesign;
23+
window.localStorage.setItem('use-new-design', String(this.useNewDesign));
24+
}
25+
}

app/styles/application.module.css

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
:root {
2+
--violet: #2e2359;
3+
--dark-grey: #2a3439;
4+
--dark-green: #3b6837;
5+
6+
--header-bg-color: var(--dark-green);
7+
--footer-bg-color: var(--dark-green);
8+
9+
/* Use the modern font stack inspired by Bootstrap 4 */
10+
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
11+
212
--main-color: #383838;
313
--main-color-light: #858585;
414
--main-bg: #f9f7ec;
@@ -9,21 +19,28 @@
919
--separator-color: #284725;
1020
}
1121

22+
:global(.new-design) {
23+
--header-bg-color: var(--violet);
24+
--main-bg: white;
25+
--footer-bg-color: var(--dark-grey);
26+
27+
--font-family: "Fira Sans", sans-serif;
28+
}
29+
1230
* {
1331
box-sizing: border-box;
1432
}
1533

1634
html {
17-
background-color: #3b6837;
35+
background-color: var(--header-bg-color);
1836
}
1937

2038
html, body {
2139
margin: 0;
2240
}
2341

2442
body {
25-
/* Use the modern font stack inspired by Bootstrap 4 */
26-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
43+
font-family: var(--font-family);
2744
font-size: 16px;
2845
display: flex;
2946
flex-direction: column;
@@ -94,3 +111,23 @@ noscript {
94111
display: none;
95112
}
96113
}
114+
115+
.toggle-design-button {
116+
position: fixed;
117+
bottom: 30px;
118+
left: 30px;
119+
z-index: 100;
120+
padding: 10px;
121+
border: none;
122+
border-radius: 5px;
123+
background: white;
124+
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
125+
color: black;
126+
font-family: sans-serif;
127+
cursor: pointer;
128+
129+
&:hover {
130+
background: #f7f7f7;
131+
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
132+
}
133+
}

app/templates/application.hbs

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,14 @@
1616

1717
<a href='https://github.com/rust-lang/crates.io' local-class='fork-me'>
1818
<img src='/assets/forkme.png' alt="Fork me on GitHub">
19-
</a>
19+
</a>
20+
21+
{{#if this.design.showToggleButton}}
22+
<button type="button" local-class="toggle-design-button" {{on "click" this.design.toggle}}>
23+
Toggle Design
24+
</button>
25+
{{/if}}
26+
{{#if this.design.useNewDesign}}
27+
{{! template-lint-disable no-curly-component-invocation }}
28+
{{add-html-class class="new-design"}}
29+
{{/if}}

0 commit comments

Comments
 (0)