mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-05 09:26:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Started rewriting the welcome screen

Browse Source
This commit is contained in:
Mauro Balades
2024-06-03 22:02:58 +02:00
parent 6a07f87358
commit 753fbe26b0
4 changed files with 146 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/browser/components/zen-welcome/welcome.css
View File

@@ -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);
}
}
#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;
}

85
src/browser/components/zen-welcome/welcome.html
View File

@@ -27,6 +27,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<link rel="localization" href="branding/brand.ftl" />
<link rel="localization" href="browser/zen-welcome.ftl" />
<script src="chrome://browser/content/zenThemeModifier.js"></script>
</head>
<body>
<div class="page" id="welcome">
@@ -42,46 +44,61 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
></button>
</div>
<div class="page" id="import">
<h1 data-l10n-id="welcome-dialog-import"></h1>
<p data-l10n-id="welcome-dialog-import-subtext"></p>
<div class="page page-split" id="import">
<div>
<h1 data-l10n-id="welcome-dialog-import"></h1>
<p data-l10n-id="welcome-dialog-import-subtext"></p>
</div>
<div>
<hbox>
<button
class="primary"
id="importBrowser"
data-l10n-id="welcome-dialog-import-action"
></button>
<button
class="text-link ghost-button"
id="importNext"
data-l10n-id="welcome-dialog-skip"
></button>
</hbox>
</div>
</div>
<br />
<hbox>
<div class="page page-split" id="theme">
<div>
<h1 data-l10n-id="welcome-dialog-theme"></h1>
<p data-l10n-id="welcome-dialog-theme-subtext"></p>
</div>
<div>
<h1 data-l10n-id="welcome-dialog-theme-header-1"></h1>
<div id="themeList" class="cardGroup"></div>
<h1 data-l10n-id="welcome-dialog-theme-header-2"></h1>
<div id="colorListWrapper">
<canvas id="colorList" class="cardGroup"></canvas>
<div id="dragBall"></div>
</div>
<button
id="themeNext"
class="primary"
id="importBrowser"
data-l10n-id="welcome-dialog-import-action"
data-l10n-id="welcome-dialog-theme-action"
></button>
</div>
</div>
<div class="page page-split" id="search">
<div>
<h1 data-l10n-id="welcome-dialog-search"></h1>
<p data-l10n-id="welcome-dialog-search-subtext"></p>
</div>
<div>
<div id="searchList" class="cardGroup"></div>
<button
class="text-link ghost-button"
id="importNext"
data-l10n-id="welcome-dialog-skip"
id="searchNext"
class="primary"
data-l10n-id="welcome-dialog-search-action"
></button>
</hbox>
</div>
<div class="page" id="theme">
<h1 data-l10n-id="welcome-dialog-theme"></h1>
<p data-l10n-id="welcome-dialog-theme-subtext"></p>
<div id="themeList" class="cardGroup"></div>
<button
id="themeNext"
class="primary"
data-l10n-id="welcome-dialog-theme-action"
></button>
</div>
<div class="page" id="search">
<h1 data-l10n-id="welcome-dialog-search"></h1>
<p data-l10n-id="welcome-dialog-search-subtext"></p>
<div id="searchList" class="cardGroup"></div>
<button
id="searchNext"
class="primary"
data-l10n-id="welcome-dialog-search-action"
></button>
</div>
</div>
<div class="page" id="thanks">

52
src/browser/components/zen-welcome/welcome.js
View File

@@ -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 {