mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-05 09:26:34 +00:00
refactor media controls styling and improve workspace tab switching logic
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
#zen-media-controls-toolbar {
|
#zen-media-controls-toolbar {
|
||||||
--progress-height: 5px;
|
--progress-height: 4px;
|
||||||
--button-spacing: 2px;
|
--button-spacing: 2px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -50,8 +50,8 @@
|
|||||||
&::-moz-range-thumb {
|
&::-moz-range-thumb {
|
||||||
background: var(--zen-primary-color);
|
background: var(--zen-primary-color);
|
||||||
border: none;
|
border: none;
|
||||||
width: 14px;
|
width: calc(var(--progress-height) * 2.5);
|
||||||
height: 14px;
|
height:calc(var(--progress-height) * 2.5);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -84,7 +84,7 @@
|
|||||||
top: -50%;
|
top: -50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
z-index: -1;
|
z-index: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -93,21 +93,7 @@
|
|||||||
transition:
|
transition:
|
||||||
opacity 0.2s ease,
|
opacity 0.2s ease,
|
||||||
transform 0.2s ease;
|
transform 0.2s ease;
|
||||||
|
position: relative;
|
||||||
@container (max-width: 185px) {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
opacity: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin-right: -10%;
|
|
||||||
transform: translateX(-20px);
|
|
||||||
transition: margin 0.15s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@container (min-width: 185px) {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
toolbaritem {
|
toolbaritem {
|
||||||
@@ -119,7 +105,7 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border-radius: var(--border-radius-medium);
|
border-radius: var(--border-radius-medium);
|
||||||
background: light-dark(rgb(255, 255, 255), rgb(11, 11, 11)) !important;
|
background: light-dark(rgb(255, 255, 255), rgb(7, 7, 7)) !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
@@ -127,13 +113,13 @@
|
|||||||
.show-on-hover {
|
.show-on-hover {
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(5px);
|
transform: translateY(10px);
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
transition:
|
transition:
|
||||||
max-height 0.15s ease-in-out,
|
max-height 0.2s ease-out,
|
||||||
opacity 0.15s ease-in-out,
|
opacity 0.2s ease-out,
|
||||||
transform 0.1s ease-in-out,
|
transform 0.2s ease-out,
|
||||||
padding 0.1s ease-in-out;
|
padding 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-current-time,
|
#zen-media-current-time,
|
||||||
@@ -190,11 +176,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-info-vbox {
|
#zen-media-info-vbox {
|
||||||
|
transition-delay: 0.01s;
|
||||||
& label {
|
& label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
min-height: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -210,6 +198,7 @@
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
height: 1.1rem;
|
height: 1.1rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
padding-top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zen-media-controls-hbox {
|
#zen-media-controls-hbox {
|
||||||
|
@@ -2373,9 +2373,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
|||||||
|
|
||||||
async switchIfNeeded(browser, i) {
|
async switchIfNeeded(browser, i) {
|
||||||
const tab = gBrowser.getTabForBrowser(browser);
|
const tab = gBrowser.getTabForBrowser(browser);
|
||||||
const workspaceId = tab.getAttribute('zen-workspace-id');
|
await this.switchTabIfNeeded(tab);
|
||||||
if (!tab.hasAttribute('zen-essential') && workspaceId !== this.activeWorkspace) {
|
}
|
||||||
await this.changeWorkspace({ uuid: workspaceId });
|
|
||||||
|
async switchTabIfNeeded(tab) {
|
||||||
|
if (!tab.hasAttribute('zen-essential') && tab.getAttribute('zen-workspace-id') !== this.activeWorkspace) {
|
||||||
|
await this.changeWorkspace({ uuid: tab.getAttribute('zen-workspace-id') });
|
||||||
}
|
}
|
||||||
gBrowser.selectedTab = tab;
|
gBrowser.selectedTab = tab;
|
||||||
}
|
}
|
||||||
|
@@ -1,5 +1,5 @@
|
|||||||
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
|
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
|
||||||
index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad72079b02024 100644
|
index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f8a96152feea39b55c9b9cd14dff991bacb7b545 100644
|
||||||
--- a/browser/components/tabbrowser/content/tabbrowser.js
|
--- a/browser/components/tabbrowser/content/tabbrowser.js
|
||||||
+++ b/browser/components/tabbrowser/content/tabbrowser.js
|
+++ b/browser/components/tabbrowser/content/tabbrowser.js
|
||||||
@@ -412,11 +412,50 @@
|
@@ -412,11 +412,50 @@
|
||||||
@@ -578,6 +578,15 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..cd3ad53dbe399383178d0eff459ad720
|
|||||||
if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) {
|
if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) {
|
||||||
params.pinned = true;
|
params.pinned = true;
|
||||||
}
|
}
|
||||||
|
@@ -6513,7 +6661,7 @@
|
||||||
|
// preventDefault(). It will still raise the window if appropriate.
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
- this.selectedTab = tab;
|
||||||
|
+ ZenWorkspaces.switchTabIfNeeded(tab);
|
||||||
|
window.focus();
|
||||||
|
aEvent.preventDefault();
|
||||||
|
break;
|
||||||
@@ -7415,6 +7563,7 @@
|
@@ -7415,6 +7563,7 @@
|
||||||
aWebProgress.isTopLevel
|
aWebProgress.isTopLevel
|
||||||
) {
|
) {
|
||||||
|
Reference in New Issue
Block a user