mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-29 06:28:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changed UI for preferences page (#14)

Browse Source
This commit is contained in:
Mauro Balades
2024-04-21 14:25:25 +02:00
parent 6b17d35b36
commit 43e5b07bf4
7 changed files with 206 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/browser/base/content/zenThemeModifier.js
View File

@@ -86,20 +86,26 @@
},
_changeSidebarLocation(value) {
const kElementsToAppend = [
"sidebar-splitter",
"sidebar-box",
"navigator-toolbox",
];
const kInlineIndicatorElements = [
"nav-bar",
"tabbrowser-tabbox"
]
const sidebar = document.getElementById("sidebar-box");
const toolbox = document.getElementById("navigator-toolbox");
"tabbrowser-tabbox",
...kElementsToAppend,
];
const wrapper = document.getElementById("zen-tabbox-wrapper");
const appWrapepr = document.getElementById("zen-sidebar-box-container");
if (value <= 0) {
wrapper.prepend(sidebar);
wrapper.prepend(toolbox);
for (let id of kElementsToAppend) {
const elem = document.getElementById(id);
if (elem) {
wrapper.prepend(elem);
}
}
appWrapepr.setAttribute("hidden", "true");
sidebar.setAttribute("inlinedwithtoolbox", "true");
toolbox.setAttribute("inlinedwithsidebar", "true");
for (let id of kInlineIndicatorElements) {
const elem = document.getElementById(id);
if (elem) {
@@ -107,11 +113,13 @@
}
}
} else {
appWrapepr.appendChild(toolbox);
appWrapepr.appendChild(sidebar);
for (let i = kElementsToAppend.length - 1; i >= 0; i--) {
const elem = document.getElementById(kElementsToAppend[i]);
if (elem) {
wrapper.appendChild(elem);
}
}
appWrapepr.removeAttribute("hidden");
sidebar.removeAttribute("inlinedwithtoolbox");
toolbox.removeAttribute("inlinedwithsidebar");
for (let id of kInlineIndicatorElements) {
const elem = document.getElementById(id);
if (elem) {

44
src/browser/components/preferences/preferences-xhtml.patch
View File

@@ -1,7 +1,16 @@
diff --git a/browser/components/preferences/preferences.xhtml b/browser/components/preferences/preferences.xhtml
index eee227822a772bec128d6adbe4f6aca90ed810f6..54d0f2df0c422a7d8ae0fbe10ef6c072bd7d6453 100644
index eee227822a772bec128d6adbe4f6aca90ed810f6..dbe59dc683c157fda716033da8a402f7d4435d19 100644
--- a/browser/components/preferences/preferences.xhtml
+++ b/browser/components/preferences/preferences.xhtml
@@ -12,7 +12,7 @@
<head>
<!-- @CSP: We should remove 'unsafe-inline' from style-src, see Bug 1579160 -->
- <meta http-equiv="Content-Security-Policy" content="default-src chrome:; img-src chrome: moz-icon: https: blob: data:; style-src chrome: data: 'unsafe-inline'; object-src 'none'" />
+ <meta http-equiv="Content-Security-Policy" content="default-src chrome:; img-src chrome: moz-icon: https: blob: data:; style-src chrome: data:; object-src 'none'" />
<title data-l10n-id="settings-page-title"></title>
@@ -43,6 +43,8 @@
/>
<link rel="stylesheet" href="chrome://browser/skin/preferences/privacy.css" />
@@ -11,7 +20,20 @@ index eee227822a772bec128d6adbe4f6aca90ed810f6..54d0f2df0c422a7d8ae0fbe10ef6c072
<link rel="localization" href="branding/brand.ftl"/>
<link rel="localization" href="browser/browser.ftl"/>
<!-- Used by fontbuilder.js -->
@@ -112,6 +114,17 @@
@@ -99,6 +101,12 @@
<hbox flex="1">
<vbox class="navigation">
+ <search-textbox
+ id="searchInput"
+ data-l10n-id="search-input-box2"
+ data-l10n-attrs="placeholder, style"
+ hidden="true"/>
+
<!-- category list -->
<richlistbox id="categories" data-l10n-id="category-list" data-l10n-attrs="aria-label">
<richlistitem id="category-general"
@@ -112,6 +120,17 @@
<label class="category-name" flex="1" data-l10n-id="pane-general-title"></label>
</richlistitem>
@@ -29,7 +51,23 @@ index eee227822a772bec128d6adbe4f6aca90ed810f6..54d0f2df0c422a7d8ae0fbe10ef6c072
<richlistitem id="category-home"
class="category"
value="paneHome"
@@ -248,6 +261,7 @@
@@ -220,6 +239,7 @@
<vbox class="main-content" flex="1" align="start">
<vbox class="pane-container">
+#if 0
<hbox class="sticky-container">
<hbox class="sticky-inner-container" pack="end" align="start">
<hbox id="policies-container" class="info-box-container smaller-font-size" flex="1" hidden="true">
@@ -237,6 +257,7 @@
hidden="true"/>
</hbox>
</hbox>
+#endif
<vbox id="mainPrefPane">
#include searchResults.inc.xhtml
#include main.inc.xhtml
@@ -248,6 +269,7 @@
#include sync.inc.xhtml
#include experimental.inc.xhtml
#include moreFromMozilla.inc.xhtml

13
src/browser/themes/shared/preferences/preferences-css.patch Normal file
View File

@@ -0,0 +1,13 @@
diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css
index 8f2652f030b9990de83bbffb891f2a52731f478b..322d7e43a516f80de5964b0e25a455c8806fef1a 100644
--- a/browser/themes/shared/preferences/preferences.css
+++ b/browser/themes/shared/preferences/preferences.css
@@ -33,7 +33,7 @@
display: flex;
flex-direction: column;
- --main-pane-width: 664px;
+ --main-pane-width: 750px;
}
/*

119
src/browser/themes/shared/preferences/zen-preferences.css
View File

@@ -1,10 +1,125 @@
:root {
--zen-settings-secondary-background: #F2F4F4;
}
.main-content {
background: var(--zen-settings-secondary-background);
padding-left: 100px;
padding-top: 40px !important;
}
groupbox {
background: light-dark(white, #363636);
padding-inline: unset !important;
padding: 20px 30px !important;
margin-bottom: 0 !important;
position: relative;
}
.subcategory + groupbox {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
margin-top: 5px;
}
groupbox:last-of-type,
groupbox:has(+ .subcategory) {
border-bottom-left-radius: 15px !important;
border-bottom-right-radius: 15px !important;
}
.subcategory {
border-top: none !important;
}
.navigation {
padding: 50px;
}
groupbox button {
border-radius: 5px !important;
padding: 5px 10px !important;
}
groupbox button,
groupbox menulist {
background-color: light-dark(#f1f1f1, #363636) !important;
color: light-dark(black, white) !important;
}
groupbox h2 {
opacity: .7;
font-size: 15px;
}
#categories {
margin: 0 !important;
}
#categories > .category {
margin-left: 0 !important;
min-height: 40px !important;
position: relative;
padding-inline: 20px !important;
}
#categories > .category[selected]::before {
content: "";
display: block;
height: 70%;
width: 5px;
background-color: var(--zen-primary-color);
position: absolute;
left: -3px;
border-radius: 5px;
}
#languagesGroup::before {
content: "";
display: block;
height: 1px;
background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
margin: 10px 0;
transform: translateY(-50%);
position: absolute;
top: -5px;
width: calc(100% - 40px);
margin-left: 20px;
left: 0;
}
#searchInput {
width: 100% !important;
border: none;
outline: none;
min-height: 40px;
border-radius: 10px;
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
padding-inline: 15px;
}
.textbox-search-sign {
margin-right: 15px;
}
.sidebar-footer-list {
margin-left: 0 !important;
}
.category-icon {
width: 20px;
height: 20px;
margin-right: 5px;
}
/* Look and feel */
#category-zen-looks > .category-icon {
list-style-image: url("chrome://browser/skin/customize.svg");
}
/* Look and feel */
#zenLooksAndFeelColorOptions {
display: grid;
grid-template-columns: repeat(auto-fill, 108px);

2
src/browser/themes/shared/zen-browser-shared.css
View File

@@ -421,6 +421,6 @@ panelmultiview {
padding-bottom: 5px;
}
#nav-bar[inlinedwithsidebar="true"] #urlbar[breakout]:not([breakout-extend="true"]) {
#urlbar[breakout]:not([breakout-extend="true"]) {
top: unset;
}

4
src/browser/themes/shared/zen-sidebar.css
View File

@@ -38,6 +38,10 @@
width: 1px !important;
}
#sidebar-splitter[inlinedwithsidebar="true"] {
background-color: -moz-dialog !important;
}
#sidebar-box[positionend] {
margin-left: 0 !important;
}

11
src/toolkit/themes/shared/in-content/common-shared-css.patch
View File

@@ -1,5 +1,5 @@
diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
index d123d3c3b01addc4373abc58834b1c27af818faa..534ad607939998e34e489915e51827cdba325d4f 100644
index c8f4f3efd231d007e024f039170efd58a8a9de86..f5e3296d20580afc0973cc87685d2ac35b6cfc10 100644
--- a/toolkit/themes/shared/in-content/common-shared.css
+++ b/toolkit/themes/shared/in-content/common-shared.css
@@ -5,6 +5,8 @@
@@ -11,3 +11,12 @@ index d123d3c3b01addc4373abc58834b1c27af818faa..534ad607939998e34e489915e51827cd
@namespace html "http://www.w3.org/1999/xhtml";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
@@ -63,7 +65,7 @@
--in-content-table-border-color: var(--in-content-box-border-color);
--in-content-table-header-background: var(--in-content-primary-button-background);
--in-content-table-header-color: var(--in-content-primary-button-text-color);
- --in-content-sidebar-width: 240px;
+ --in-content-sidebar-width: 340px;
--dialog-warning-text-color: var(--red-60);