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

Added toast notification when enabling split view rearanging

Browse Source
This commit is contained in:
mauro-balades
2024-10-06 18:15:28 +02:00
parent 174fafcb45
commit 5e1a5fc498
5 changed files with 93 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
l10n

Submodule l10n updated: 49e9f50d0b...297206a6de

2
src/browser/base/content/zen-components

Submodule src/browser/base/content/zen-components updated: 8213592bb2...7d54599ba3

71
src/browser/base/content/zen-popupset.inc.xhtml
View File

@@ -15,6 +15,7 @@
orient="vertical"
role="alertdialog"
type="arrow"
onpopupshowing="gZenViewSplitter.disableTabRearrangeView();"
aria-labelledby="zen-split-view-modifier-header"
tabspecific="true">
<panelmultiview id="zenSplitViewModifierMultiview"
@@ -24,34 +25,48 @@
role="document"
mainview-with-header="true"
has-custom-header="true">
<vbox>
<box class="zen-split-view-modifier-preview grid">
<box></box>
<box></box>
<box></box>
</box>
<p>Grid Layout</p>
</vbox>
<vbox>
<box class="zen-split-view-modifier-preview hsep">
<box></box>
<box></box>
</box>
<p>Horizontal</p>
</vbox>
<vbox>
<box class="zen-split-view-modifier-preview vsep">
<box></box>
<box></box>
</box>
<p>Vertical</p>
</vbox>
<vbox>
<box class="zen-split-view-modifier-preview unsplit">
<box></box>
</box>
<p>Unsplit</p>
</vbox>
<box id="zenSplitViewModifierHeader"
class="panel-header panel-header-with-additional-element panel-header-with-info-button">
<html:h1>
<html:span data-l10n-id="zen-split-view-modifier-header"></html:span>
</html:h1>
<toolbarbutton id="zenSplitViewModifierActivateReallocation"
class="panel-info-button"
oncommand="gZenViewSplitter.enableTabRearrangeView();"
data-l10n-id="zen-split-view-modifier-activate-reallocation">
<image/>
</toolbarbutton>
</box>
<hbox id="zenSplitViewModifierContent">
<vbox>
<box class="zen-split-view-modifier-preview grid">
<box></box>
<box></box>
<box></box>
</box>
<p>Grid Layout</p>
</vbox>
<vbox>
<box class="zen-split-view-modifier-preview vsep">
<box></box>
<box></box>
</box>
<p>Vertical</p>
</vbox>
<vbox>
<box class="zen-split-view-modifier-preview hsep">
<box></box>
<box></box>
</box>
<p>Horizontal</p>
</vbox>
<vbox>
<box class="zen-split-view-modifier-preview unsplit">
<box></box>
</box>
<p>Unsplit</p>
</vbox>
</hbox>
</panelview>
</panelmultiview>
</panel>

64
src/browser/base/content/zen-styles/zen-decks.css
View File

@@ -59,8 +59,6 @@
margin-left: calc(var(--zen-split-row-gap)/-2);
}
margin-top: calc(-var(--zen-split-row-gap)/2);
margin-left: calc(-var(--zen-split-row-gap)/2);
#tabbrowser-tabpanels[zen-split-view] {
.zen-split-view-splitter {
display: inherit;
@@ -111,22 +109,26 @@ margin-left: calc(-var(--zen-split-row-gap)/2);
min-width: 180px;
min-height: 180px;
padding: 15px;
padding-top: 12px;
}
#zenSplitViewModifierContent {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
padding: 15px;
gap: 15px;
}
#zenSplitViewModifierViewDefault > vbox {
#zenSplitViewModifierContent > vbox {
display: flex;
align-items: center;
flex-direction: column;
cursor: pointer;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview {
#zenSplitViewModifierContent .zen-split-view-modifier-preview {
border-radius: 5px;
border: 1px solid var(--zen-colors-border);
width: 100px;
@@ -137,51 +139,73 @@ margin-left: calc(-var(--zen-split-row-gap)/2);
font-weight: 500;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.active {
#zenSplitViewModifierContent .zen-split-view-modifier-preview.active {
box-shadow: 0 0 0 2px var(--zen-primary-color);
border-width: 0px;
}
#zenSplitViewModifierViewDefault p {
#zenSplitViewModifierContent p {
margin-top: 5px;
margin-bottom: 0;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview box {
background-color: var(--zen-colors-secondary);
border-radius: 3px;
width: 100%;
height: 100%;
#zenSplitViewModifierContent .zen-split-view-modifier-preview {
& box {
background-color: var(--zen-colors-secondary);
border-radius: 3px;
width: 100%;
height: 100%;
transition: .1s;
}
&:hover box {
background-color: var(--zen-primary-color);
}
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep {
#zenSplitViewModifierContent .zen-split-view-modifier-preview.hsep {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep box:last-child {
#zenSplitViewModifierContent .zen-split-view-modifier-preview.hsep box:last-child {
margin-top: 5px;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.vsep box:last-child {
#zenSplitViewModifierContent .zen-split-view-modifier-preview.vsep box:last-child {
margin-left: 5px;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid {
#zenSplitViewModifierContent .zen-split-view-modifier-preview.grid {
display: grid;
grid-template-areas: 'a b' 'c b';
gap: 5px;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(1) {
#zenSplitViewModifierContent .zen-split-view-modifier-preview.grid box:nth-child(1) {
grid-area: a;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(2) {
#zenSplitViewModifierContent .zen-split-view-modifier-preview.grid box:nth-child(2) {
grid-area: b;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(3) {
#zenSplitViewModifierContent .zen-split-view-modifier-preview.grid box:nth-child(3) {
grid-area: c;
}
#zenSplitViewModifierHeader {
min-height: 0;
padding: 0;
margin: 0;
margin-bottom: 12px;
}
#zenSplitViewModifierEnabledToast {
display: none;
}
#zenSplitViewModifier:not([has-enabled-realloc])[toast] #zenSplitViewModifierEnabledToast {
display: revert;
}

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

@@ -19,6 +19,10 @@
list-style-image: url('back.svg') !important;
}
#zenSplitViewModifierActivateReallocation > image {
list-style-image: url('move-tab.svg') !important;
}
#forward-button,
#zen-sidebar-web-panel-forward {
list-style-image: url('forward.svg') !important;