forked from ZenBrowserMirrors/zen-desktop
feat: implement settings window with styling and layout adjustments
This commit is contained in:
parent
1ceb5d6248
commit
04f14c0d2f
4 changed files with 89 additions and 10 deletions
|
@ -268,11 +268,11 @@ var gZenUIManager = {
|
|||
|
||||
openSettingsWindow() {
|
||||
window.openDialog(
|
||||
"chrome://browser/content/zen-components/windows/zen-settings.xhtml",
|
||||
"",
|
||||
"centerscreen,chrome,modal,titlebar",
|
||||
'chrome://browser/content/zen-components/windows/zen-settings.xhtml',
|
||||
'_blank',
|
||||
'centerscreen,chrome,dialog=no,resizable=no,titlebar'
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var gZenVerticalTabsManager = {
|
||||
|
|
|
@ -52,6 +52,8 @@
|
|||
content/browser/zen-styles/zen-welcome.css (content/zen-styles/zen-welcome.css)
|
||||
content/browser/zen-styles/zen-media-controls.css (content/zen-styles/zen-media-controls.css)
|
||||
|
||||
content/browser/zen-styles/windows/zen-settings.css (content/zen-styles/windows/zen-settings.css)
|
||||
|
||||
content/browser/zen-styles/zen-panels/bookmarks.css (content/zen-styles/zen-panels/bookmarks.css)
|
||||
content/browser/zen-styles/zen-panels/extensions.css (content/zen-styles/zen-panels/extensions.css)
|
||||
content/browser/zen-styles/zen-panels/print.css (content/zen-styles/zen-panels/print.css)
|
||||
|
|
48
src/browser/base/content/zen-styles/windows/zen-settings.css
Normal file
48
src/browser/base/content/zen-styles/windows/zen-settings.css
Normal file
|
@ -0,0 +1,48 @@
|
|||
@namespace html 'http://www.w3.org/1999/xhtml';
|
||||
@namespace xul 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
font: message-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
background: var(--zen-themed-toolbar-bg-transparent);
|
||||
@supports (-moz-osx-font-smoothing: auto) {
|
||||
appearance: -moz-window-titlebar;
|
||||
}
|
||||
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
pointer-events: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
gap: 0.6rem;
|
||||
|
||||
.section-content {
|
||||
width: 100%;
|
||||
background: var(--zen-toolbar-element-bg);
|
||||
border-radius: var(--zen-native-content-radius);
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
|
@ -4,11 +4,40 @@
|
|||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
|
||||
<!DOCTYPE window>
|
||||
|
||||
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
||||
<html xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
||||
xmlns:html="http://www.w3.org/1999/xhtml"
|
||||
id="zenSettingsWindow"
|
||||
style="min-width: 40em;">
|
||||
style="min-width: 35em; max-width: 35em; min-height: 40em;">
|
||||
<head>
|
||||
<linkset>
|
||||
<html:link
|
||||
rel="stylesheet"
|
||||
href="chrome://browser/content/zen-styles/zen-theme.css"
|
||||
/>
|
||||
<html:link
|
||||
rel="stylesheet"
|
||||
href="chrome://browser/content/zen-styles/windows/zen-settings.css"
|
||||
/>
|
||||
|
||||
</window>
|
||||
<html:link rel="localization" href="browser/preferences/preferences.ftl" />
|
||||
<html:link rel="localization" href="browser/preferences/zen-preferences.ftl" />
|
||||
</linkset>
|
||||
|
||||
<script src="chrome://browser/content/zenThemeModifier.js"></script>
|
||||
</head>
|
||||
|
||||
<html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
<vbox id="main-content">
|
||||
<vbox class="section">
|
||||
<html:h2 data-l10n-id="pane-general-title"/>
|
||||
<div class="section-content">
|
||||
</div>
|
||||
</vbox>
|
||||
<vbox class="section">
|
||||
<html:h2 data-l10n-id="pane-general-title"/>
|
||||
<div class="section-content">
|
||||
</div>
|
||||
</vbox>
|
||||
</vbox>
|
||||
</html:body>
|
||||
</html>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue