diff --git a/src/browser/components/zen-welcome/welcome.css b/src/browser/components/zen-welcome/welcome.css index dd7b413b8..ecbdf6944 100644 --- a/src/browser/components/zen-welcome/welcome.css +++ b/src/browser/components/zen-welcome/welcome.css @@ -16,14 +16,15 @@ body { width: 100%; height: 100%; overflow: hidden; - /*background: var(--zen-main-browser-background) !important;*/ transition: .1s; -moz-transform: scale(1.1); /* zoom */ } -.page { - display: none; +button { + padding: 10px 40px; +} +.page { display: flex; flex-direction: column; justify-content: center; @@ -34,11 +35,18 @@ body { margin: 32px; } +.page-split:not([hidden="true"]) { + display: flex; + margin: 12%; + flex-direction: row; + justify-content: space-between; +} + #enableFeatures .card { width: auto; } -.card h3 { +:not(#theme) .card h3 { margin: auto; text-align: center; } @@ -126,9 +134,12 @@ input[type='checkbox'] { margin-top: 20px; } -#search h1, +#search h1 { + margin-bottom: 50px; +} + #theme h1 { - margin-bottom: 30px; + margin: 25px 0; } .page[hidden="true"] { @@ -189,4 +200,27 @@ input[type='checkbox'] { .dot.active { background: light-dark(#000, #fff); -} \ No newline at end of file +} + +#colorList { + width: 500px; + border-radius: 99px; + height: 20px; + display: flex; + border: 2px solid var(--arrowpanel-border-color); +} + +#dragBall { + width: 17px; + height: 17px; + border-radius: 50%; + background: #fff; + position: absolute; + top: calc(5px / 2); +} + +#colorListWrapper { + position: relative; + width: 500px; + height: 20px; +} diff --git a/src/browser/components/zen-welcome/welcome.html b/src/browser/components/zen-welcome/welcome.html index 822c74d34..77afed094 100644 --- a/src/browser/components/zen-welcome/welcome.html +++ b/src/browser/components/zen-welcome/welcome.html @@ -27,6 +27,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. + +
@@ -42,46 +44,61 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. >
-
-

-

+
+
+

+

+
+
+ + + + +
+
-
- - +
+
+

+

+
+
+

+
+

+
+ +
+
+
+
+ +
+
+

+

+
+
+
- -
- -
-

-

-
- -
- -
-

-

-
- +
diff --git a/src/browser/components/zen-welcome/welcome.js b/src/browser/components/zen-welcome/welcome.js index 40b04ab8a..347ac6f2b 100644 --- a/src/browser/components/zen-welcome/welcome.js +++ b/src/browser/components/zen-welcome/welcome.js @@ -119,6 +119,7 @@ class Themes extends Page { } async loadThemes() { + window.addEventListener('DOMContentLoaded', this.setColorBar); await sleep(1000) const themes = (await AddonManager.getAddonsByTypes(['theme'])).filter( @@ -150,13 +151,62 @@ class Themes extends Page { const name = document.createElement('h3') name.textContent = theme.name - container.appendChild(img) + //container.appendChild(img) container.appendChild(name) themeList.appendChild(container) themeElements.push(container) }) } + + setColorBar() { + const colorList = document.getElementById('colorList'); + const ctx = colorList.getContext('2d'); + let gradient = ctx.createLinearGradient(0, 0, 500, 20); + + gradient.addColorStop(0.0, '#aac7ff'); + gradient.addColorStop(0.1, '#aac7ff'); + gradient.addColorStop(0.2, '#74d7cb'); + gradient.addColorStop(0.3, '#a0d490'); + gradient.addColorStop(0.4, '#dec663'); + gradient.addColorStop(0.5, '#ffb787'); + gradient.addColorStop(0.6, '#ffb1c0'); + gradient.addColorStop(0.7, '#ddbfc3'); + gradient.addColorStop(0.8, '#f6b0ea'); + gradient.addColorStop(0.9, '#d4bbff'); + + ctx.fillStyle = gradient; + ctx.fillRect(0, 0, 1000, 150); + + const dragBall = document.getElementById('dragBall'); + dragBall.style.left = `0px`; + dragBall.addEventListener('mousedown', (e) => { + const rect = colorList.getBoundingClientRect(); + e.preventDefault(); + + const onMouseMove = (ev) => { + var x = ev.clientX - rect.left; + const data = ctx.getImageData(x - 17, 1, 1, 1).data; + dragBall.style.left = `${x - 17/2}px`; + if (x < 17) { + dragBall.style.left = `${17/2}px`; + x = 17; + } else if (x > rect.width - 17) { + dragBall.style.left = `${rect.width - 17 - (17/2)}px`; + x = rect.width - 17 - (17/2); + } + Services.prefs.setStringPref('zen.theme.accent-color', `#${data[0].toString(16)}${data[1].toString(16)}${data[2].toString(16)}`); + } + + const onMouseUp = () => { + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + } + + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + }); + } } class Thanks extends Page { diff --git a/src/browser/locales/en-US/browser/zen-welcome.ftl b/src/browser/locales/en-US/browser/zen-welcome.ftl index c52f63b5d..04a3e0d21 100644 --- a/src/browser/locales/en-US/browser/zen-welcome.ftl +++ b/src/browser/locales/en-US/browser/zen-welcome.ftl @@ -16,6 +16,9 @@ welcome-dialog-theme = 🎨 Choose a theme welcome-dialog-theme-subtext = Personalize your experience with your favorite look! welcome-dialog-theme-action = Continue +welcome-dialog-theme-header-1 = 1. Choose A theme +welcome-dialog-theme-header-2 = 2. Find Your Perfect Color + welcome-dialog-search = 🔍 Choose a search engine welcome-dialog-search-subtext = Select your preferred search engine to tailor your browsing experience! welcome-dialog-search-action = Next