diff --git a/configs/common/mozconfig b/configs/common/mozconfig index 95126184..33ca9266 100644 --- a/configs/common/mozconfig +++ b/configs/common/mozconfig @@ -22,10 +22,11 @@ export MOZ_SOURCE_REPO=https://github.com/zen-browser/desktop export MOZ_SOURCE_CHANGESET=${changeset} export MOZ_INCLUDE_SOURCE_INFO=1 -ac_add_options --enable-bootstrap ac_add_options --enable-application=browser if test "$ZEN_RELEASE"; then + ac_add_options --enable-bootstrap + ac_add_options --enable-release ac_add_options --disable-debug ac_add_options --disable-debug-symbols diff --git a/src/browser/components/zen-welcome/welcome.css b/src/browser/components/zen-welcome/welcome.css index 9a444833..07718a4e 100644 --- a/src/browser/components/zen-welcome/welcome.css +++ b/src/browser/components/zen-welcome/welcome.css @@ -15,21 +15,35 @@ body { width: 100%; height: 100%; overflow: hidden; - transition: .1s; + transition: 2s; -moz-transform: scale(1.1); /* zoom */ } +body.gradient-background { +} + #first-view { display: flex; - flex-direction: row; + flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); - border-radius: 10px; - margin: 20px; + border-radius: 15px; + margin: 15px; background: var(--zen-dialog-background); - width: 100%; + width: 55%; position: relative; + padding: 5% 4%; + overflow: hidden; +} + +#buttons-footer { + margin-top: auto; + padding: 10px; + width: -moz-available; + display: flex; + justify-content: space-between; + align-items: center; } #second-view { @@ -39,28 +53,37 @@ body { } button { - padding: 10px 40px; + padding: 8px; +} + +#footer-buttons button { + padding: 8px 0; } .page { display: flex; flex-direction: column; - justify-content: center; - align-items: center; - align-content: center; - width: 100%; - + justify-content: start; + width: -moz-available; + height: 100%; margin: 32px; } -.page-split:not([hidden="true"]) { - flex-direction: row; - margin: auto; - justify-content: space-around; +h2 { + font-size: 17px; + font-weight: 600; + margin: 35px 0 20px 0; + line-height: 1; } -#enableFeatures .card { - width: auto; +.page-split:not([hidden="true"]) { + flex-direction: column; + margin: auto; + justify-content: start; +} + +.page-split > div:first-child { + margin-bottom: 20px; } :not(#theme) .card h3 { @@ -127,6 +150,7 @@ p { display: inline-block; height: 82px; width: 82px; + margin-bottom: 20px; } .asset { @@ -199,59 +223,88 @@ input[type='checkbox'] { margin-top: 10px; } -#dots { +#circular-progress { + --size: 220px; + --half-size: calc(var(--size) / 2); + --stroke-width: 20px; + --radius: calc((var(--size) - var(--stroke-width)) / 2); + --circumference: calc(var(--radius) * pi * 2); + --dash: calc((var(--progress) * var(--circumference)) / 100); position: absolute; - bottom: 100px; - left: 50%; - transform: translateX(-50%); - display: flex; - gap: 12px; - align-items: center; + top: 15px; + right: 10px; + width: 55px; + height: 40px; } -.dot { - width: 8px; - height: 8px; - border-radius: 50%; - transition: all .1s; - background: light-dark(#000, #fff); - cursor: pointer; +#circular-progress circle { + cx: var(--half-size); + cy: var(--half-size); + r: var(--radius); + stroke-width: var(--stroke-width); + fill: none; + stroke-linecap: round; } -.dot.active { - background: var(--zen-primary-color); +#circular-progress circle.bg { + stroke: var(--zen-dialog-background); } -#colorList { - width: 500px; - border-radius: 99px; - height: 20px; - display: flex; - border: 1px solid var(--zen-colors-primary) !important; -} - -#dragBall { - width: 17px; - height: 17px; - border-radius: 50%; - background: #fff; - position: absolute; - top: calc(5px / 2); +#circular-progress circle.fg { + transform: rotate(-90deg); + transform-origin: var(--half-size) var(--half-size); + stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash)); + transition: stroke-dasharray 0.3s linear 0s; + stroke: var(--zen-primary-color); } #colorListWrapper { - position: relative; - width: 500px; - height: 20px; + display: flex; + align-items: center; } -#colorPreview { - margin-left: 10px; - border-radius: 5px; - width: 25px; - height: 25px; - position: absolute; - top: 50%; - right: -60px; - transform: translateY(-50%); +#colorListWrapper > div { + border-radius: 999px; + height: 20px; + width: 20px; + border: 3px solid transparent; + margin: 0 5px; +} + +#colorListWrapper > div.selected { + border: 3px solid light-dark(#000, #fff); +} + +#welcome { + justify-content: center; +} + +#themeList { + display: flex; + flex-wrap: nowrap; +} + +#themeList > svg { + border: 3px solid transparent; + border-radius: 15px; + height: -moz-available; +} + +#themeList > svg:nth-child(1) { + margin-right: 10px; +} + +#themeList > svg.selected { + border: 3px solid var(--zen-colors-primary); +} + +#searchList.cardGroup { + display: grid; + grid-template-columns: 1fr 1fr; +} + +#searchList .card { + width: -moz-available !important; + margin: 20px; + padding: 80px 0 !important; } diff --git a/src/browser/components/zen-welcome/welcome.html b/src/browser/components/zen-welcome/welcome.html index da866503..51758bb8 100644 --- a/src/browser/components/zen-welcome/welcome.html +++ b/src/browser/components/zen-welcome/welcome.html @@ -26,19 +26,14 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. - +

- - +
@@ -53,11 +48,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. id="importBrowser" data-l10n-id="welcome-dialog-import-action" > -
@@ -68,19 +58,70 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.

-

-
-

+

- -
-
- +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -91,21 +132,23 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
-

+
+ @@ -114,7 +157,13 @@ 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 1ae74203..a7e911fe 100644 --- a/src/browser/components/zen-welcome/welcome.js +++ b/src/browser/components/zen-welcome/welcome.js @@ -90,11 +90,6 @@ class Page { */ constructor(id) { this.element = document.getElementById(id) - this.nextEl = document.getElementById(`${id}Next`) - - this.nextEl.addEventListener('click', () => { - this.pages.next() - }) } /** @@ -117,7 +112,7 @@ class Page { class Themes extends Page { constructor(id) { super(id) - + this.loadThemes() } @@ -130,95 +125,40 @@ class Themes extends Page { ) const themeList = document.getElementById('themeList'); - const themeElements = [] + const themeElements = ["firefox-compact-light@mozilla.org", "firefox-compact-dark@mozilla.org"]; - themes.forEach((theme) => { - const container = document.createElement('div') - container.classList.add('card'); - container.classList.add('card-no-hover'); - - //if (theme.id == "firefox-compact-dream@mozilla.org" || theme.id == "firefox-compact-galaxy@mozilla.org") { - // container.setAttribute('disabled', 'true') - //} - - if (theme.isActive) { - container.classList.add('selected') - } - - container.addEventListener('click', () => { + themeElements.forEach((theme, i) => { + let container = themeList.children[i]; + container.addEventListener('click', (() => { if (container.hasAttribute('disabled')) { return } - document.body.classList.add('normal-background'); - themeElements.forEach((el) => el.classList.remove('selected')) + for (const el of themeList.children) { + el.classList.remove('selected') + } container.classList.add('selected') - theme.enable() - }) - - const img = document.createElement('img') - img.src = theme.icons['32'] - - const name = document.createElement('h3') - name.textContent = theme.name - - //container.appendChild(img) - container.appendChild(name) - - themeList.appendChild(container) - themeElements.push(container) + themes.find((t) => t.id === theme).enable() + }).bind(this, i, container, theme)) }) } setColorBar() { - const colorList = document.getElementById('colorList'); - const ctx = colorList.getContext('2d'); - let gradient = ctx.createLinearGradient(0, 0, 500, 20); - colorList.width = 500; - colorList.height = 20; + const colorList = document.getElementById('colorListWrapper'); + const colors = ['#aac7ff', '#74d7cb', '#a0d490', '#dec663', '#ffb787', + '#ffb1c0', '#ddbfc3', '#f6b0ea', '#d4bbff'] - 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 = `17px`; - dragBall.addEventListener('mousedown', (e) => { - const rect = colorList.getBoundingClientRect(); - e.preventDefault(); - - const onMouseMove = (ev) => { - var x = ev.clientX - rect.left; - 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); - } - const data = ctx.getImageData(x - 17, 1, 1, 1).data; - let color = `#${data[0].toString(16)}${data[1].toString(16)}${data[2].toString(16)}`; - document.getElementById("colorPreview").style.backgroundColor = color; + colors.forEach((color) => { + const container = document.createElement('div') + container.classList.add('color') + container.style.backgroundColor = color + container.setAttribute('data-color', color) + container.addEventListener('click', (() => { Services.prefs.setStringPref('zen.theme.accent-color', color); - } + colorList.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected')) + container.classList.add('selected') + }).bind(this, color, container)) - const onMouseUp = () => { - document.removeEventListener('mousemove', onMouseMove); - document.removeEventListener('mouseup', onMouseUp); - document.getElementById("colorPreview").style.backgroundColor = ''; - } - - document.addEventListener('mousemove', onMouseMove); - document.addEventListener('mouseup', onMouseUp); + colorList.appendChild(container) }); } } @@ -297,7 +237,6 @@ class Import extends Page { MigrationUtils.showMigrationWizard(window, { zenBlocking: true, }); - this.nextEl.click() }) } } @@ -316,19 +255,24 @@ class Pages { this.pages.forEach((page) => page.setPages(this)) - const dots = document.getElementById("dots"); - for (let i = 0; i < this.pages.length; i++) { - let dot = document.createElement("span"); - dot.classList.add("dot"); - dot.setAttribute("data-index", i); - dot.onclick = (e) => { - this.currentPage = parseInt(e.target.getAttribute("data-index")); - this._displayCurrentPage(); - } - dots.appendChild(dot); - } this._displayCurrentPage(); console.log("Welcome pages initialized.") + + this.nextEl = document.getElementById(`next`) + this.prevEl = document.getElementById(`back`) + + this.nextEl.addEventListener('click', () => { + this.next() + this.prevEl.removeAttribute('disabled') + }) + + this.prevEl.addEventListener('click', () => { + this.currentPage-- + this._displayCurrentPage() + if (this.pages.currentPage === 1) { + this.prevEl.setAttribute('disabled', 'true') + } + }); } next() { @@ -355,16 +299,16 @@ class Pages { } _displayCurrentPage() { - let dots = document.getElementsByClassName("dot"); - for (let i = 0; i < dots.length; i++) { - dots[i].classList.remove("active"); - } - dots[this.currentPage].classList.add("active"); - + let progress = document.getElementById('circular-progress'); + progress.style.setProperty('--progress', ((this.currentPage + 1) / this.pages.length) * 100); for (const page of this.pages) { page.hide() } - + if (this.currentPage >= 1) { + document.body.classList.remove('gradient-background') + } else { + document.body.classList.add('gradient-background') + } this.pages[this.currentPage].show() } } diff --git a/src/browser/locales/en-US/browser/zen-welcome.ftl b/src/browser/locales/en-US/browser/zen-welcome.ftl index 44308651..af5f058f 100644 --- a/src/browser/locales/en-US/browser/zen-welcome.ftl +++ b/src/browser/locales/en-US/browser/zen-welcome.ftl @@ -6,29 +6,21 @@ welcome-dialog-welcome = 👋 Welcome to { -brand-short-name } welcome-dialog-welcome-subtext = Fast. Beautiful. Private. welcome-dialog-get-started = Get started -welcome-dialog-skip = Not now - welcome-dialog-import = 😍 Bring your favourites to { -brand-short-name } welcome-dialog-import-subtext = Pick up where you left off in your last browser -welcome-dialog-import-action = Import +welcome-dialog-import-action = Import your data -welcome-dialog-theme = 🎨 Choose a theme +welcome-dialog-theme = Make yourself at home 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-theme-header-1 = Choose your perfect color +welcome-dialog-theme-header-2 = Choose your theme 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 welcome-dialog-thanks = Thanks You So Much! ❤️ welcome-dialog-thanks-subtext = Your appreciation means the world to us! -welcome-dialog-thanks-action = Start Browsing! -# About Welcome Page -welcome-page-description = An experimental Firefox fork that enhances focus and increases work productivity due to its hyper minimalistic UI and built-in tools -welcome-page-version = You are using { -brand-full-name } -welcome-page-build-id = Build { -build-id } -welcome-page-other-downloads = If this is not the release you want, feel free to checkout other downloads at https://pulsebrowser.app/download \ No newline at end of file +welcome-dialog-back-action = Back +welcome-dialog-next-action = Next diff --git a/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css b/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css index b5acf6ef..103310bd 100644 --- a/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css +++ b/src/toolkit/themes/shared/in-content/zen-common-shared-ui-override.css @@ -24,5 +24,5 @@ html|button:not(:is( )) { transition: .2s; border-radius: 6px !important; - min-width: 100px !important; + min-width: 80px !important; }