mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-10 18:15:30 +02:00
Changed UI for preferences page (#14)
This commit is contained in:
Mauro Balades
parent
6b17d35b36
commit
43e5b07bf4
7 changed files with 206 additions and 19 deletions
|
|
@ -86,20 +86,26 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
_changeSidebarLocation(value) {
|
_changeSidebarLocation(value) {
|
||||||
|
const kElementsToAppend = [
|
||||||
|
"sidebar-splitter",
|
||||||
|
"sidebar-box",
|
||||||
|
"navigator-toolbox",
|
||||||
|
];
|
||||||
const kInlineIndicatorElements = [
|
const kInlineIndicatorElements = [
|
||||||
"nav-bar",
|
"nav-bar",
|
||||||
"tabbrowser-tabbox"
|
"tabbrowser-tabbox",
|
||||||
]
|
...kElementsToAppend,
|
||||||
const sidebar = document.getElementById("sidebar-box");
|
];
|
||||||
const toolbox = document.getElementById("navigator-toolbox");
|
|
||||||
const wrapper = document.getElementById("zen-tabbox-wrapper");
|
const wrapper = document.getElementById("zen-tabbox-wrapper");
|
||||||
const appWrapepr = document.getElementById("zen-sidebar-box-container");
|
const appWrapepr = document.getElementById("zen-sidebar-box-container");
|
||||||
if (value <= 0) {
|
if (value <= 0) {
|
||||||
wrapper.prepend(sidebar);
|
for (let id of kElementsToAppend) {
|
||||||
wrapper.prepend(toolbox);
|
const elem = document.getElementById(id);
|
||||||
|
if (elem) {
|
||||||
|
wrapper.prepend(elem);
|
||||||
|
}
|
||||||
|
}
|
||||||
appWrapepr.setAttribute("hidden", "true");
|
appWrapepr.setAttribute("hidden", "true");
|
||||||
sidebar.setAttribute("inlinedwithtoolbox", "true");
|
|
||||||
toolbox.setAttribute("inlinedwithsidebar", "true");
|
|
||||||
for (let id of kInlineIndicatorElements) {
|
for (let id of kInlineIndicatorElements) {
|
||||||
const elem = document.getElementById(id);
|
const elem = document.getElementById(id);
|
||||||
if (elem) {
|
if (elem) {
|
||||||
|
|
@ -107,11 +113,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
appWrapepr.appendChild(toolbox);
|
for (let i = kElementsToAppend.length - 1; i >= 0; i--) {
|
||||||
appWrapepr.appendChild(sidebar);
|
const elem = document.getElementById(kElementsToAppend[i]);
|
||||||
|
if (elem) {
|
||||||
|
wrapper.appendChild(elem);
|
||||||
|
}
|
||||||
|
}
|
||||||
appWrapepr.removeAttribute("hidden");
|
appWrapepr.removeAttribute("hidden");
|
||||||
sidebar.removeAttribute("inlinedwithtoolbox");
|
|
||||||
toolbox.removeAttribute("inlinedwithsidebar");
|
|
||||||
for (let id of kInlineIndicatorElements) {
|
for (let id of kInlineIndicatorElements) {
|
||||||
const elem = document.getElementById(id);
|
const elem = document.getElementById(id);
|
||||||
if (elem) {
|
if (elem) {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,16 @@
|
||||||
diff --git a/browser/components/preferences/preferences.xhtml b/browser/components/preferences/preferences.xhtml
|
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
|
--- a/browser/components/preferences/preferences.xhtml
|
||||||
+++ b/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 @@
|
@@ -43,6 +43,8 @@
|
||||||
/>
|
/>
|
||||||
<link rel="stylesheet" href="chrome://browser/skin/preferences/privacy.css" />
|
<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="branding/brand.ftl"/>
|
||||||
<link rel="localization" href="browser/browser.ftl"/>
|
<link rel="localization" href="browser/browser.ftl"/>
|
||||||
<!-- Used by fontbuilder.js -->
|
<!-- 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>
|
<label class="category-name" flex="1" data-l10n-id="pane-general-title"></label>
|
||||||
</richlistitem>
|
</richlistitem>
|
||||||
|
|
||||||
|
|
@ -29,7 +51,23 @@ index eee227822a772bec128d6adbe4f6aca90ed810f6..54d0f2df0c422a7d8ae0fbe10ef6c072
|
||||||
<richlistitem id="category-home"
|
<richlistitem id="category-home"
|
||||||
class="category"
|
class="category"
|
||||||
value="paneHome"
|
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 sync.inc.xhtml
|
||||||
#include experimental.inc.xhtml
|
#include experimental.inc.xhtml
|
||||||
#include moreFromMozilla.inc.xhtml
|
#include moreFromMozilla.inc.xhtml
|
||||||
|
|
|
||||||
13
src/browser/themes/shared/preferences/preferences-css.patch
Normal file
13
src/browser/themes/shared/preferences/preferences-css.patch
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
@ -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 {
|
#category-zen-looks > .category-icon {
|
||||||
list-style-image: url("chrome://browser/skin/customize.svg");
|
list-style-image: url("chrome://browser/skin/customize.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Look and feel */
|
|
||||||
|
|
||||||
#zenLooksAndFeelColorOptions {
|
#zenLooksAndFeelColorOptions {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, 108px);
|
grid-template-columns: repeat(auto-fill, 108px);
|
||||||
|
|
|
||||||
|
|
@ -421,6 +421,6 @@ panelmultiview {
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav-bar[inlinedwithsidebar="true"] #urlbar[breakout]:not([breakout-extend="true"]) {
|
#urlbar[breakout]:not([breakout-extend="true"]) {
|
||||||
top: unset;
|
top: unset;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,10 @@
|
||||||
width: 1px !important;
|
width: 1px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#sidebar-splitter[inlinedwithsidebar="true"] {
|
||||||
|
background-color: -moz-dialog !important;
|
||||||
|
}
|
||||||
|
|
||||||
#sidebar-box[positionend] {
|
#sidebar-box[positionend] {
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
|
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
|
--- a/toolkit/themes/shared/in-content/common-shared.css
|
||||||
+++ b/toolkit/themes/shared/in-content/common-shared.css
|
+++ b/toolkit/themes/shared/in-content/common-shared.css
|
||||||
@@ -5,6 +5,8 @@
|
@@ -5,6 +5,8 @@
|
||||||
|
|
@ -11,3 +11,12 @@ index d123d3c3b01addc4373abc58834b1c27af818faa..534ad607939998e34e489915e51827cd
|
||||||
@namespace html "http://www.w3.org/1999/xhtml";
|
@namespace html "http://www.w3.org/1999/xhtml";
|
||||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
@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);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue