external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-15 18:19:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

two-up closer design match & smaller line

Browse Source
This commit is contained in:
Jake Archibald
2018-10-16 12:14:14 +01:00
parent a27f76397a
commit f42427cf13
2 changed files with 47 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Output/custom-els/TwoUp/index.ts
View File

@@ -68,12 +68,14 @@ export default class TwoUp extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
this._handle.innerHTML = `<div class="${styles.scrubber}">${
'<svg viewBox="0 0 20 10" fill="currentColor"><path d="M8 0v10L0 5zM12 0v10l8-5z"/></svg>'
}</div>`;
this._childrenChange(); this._childrenChange();
if (!this._everConnected) { if (!this._everConnected) {
this._handle.innerHTML = `<div class="${styles.scrubber}">${
`<svg viewBox="0 0 27 20" fill="currentColor">${
'<path d="M17 19.2l9.5-9.6L16.9 0zM9.6 0L0 9.6l9.6 9.6z"/>'
}</svg>`
}</div>`;
this._resetPosition(); this._resetPosition();
this._everConnected = true; this._everConnected = true;
} }

66
src/components/Output/custom-els/TwoUp/styles.css
View File

@@ -6,29 +6,41 @@ two-up {
--track-color: var(--accent-color); --track-color: var(--accent-color);
--thumb-background: #fff; --thumb-background: #fff;
--thumb-color: var(--accent-color); --thumb-color: var(--accent-color);
--thumb-size: 62px;
--bar-size: 6px;
--bar-touch-size: 30px;
} }
two-up > * { two-up > * {
/* Overlay all children on top of each other, and let /* Overlay all children on top of each other, and let two-up's layout contain all of them. */
two-up's layout contain all of them. */
grid-area: 1/1; grid-area: 1/1;
} }
two-up[legacy-clip-compat] > :not(.twoUpHandle) { two-up[legacy-clip-compat] > :not(.two-up-handle) {
/* Legacy mode uses clip rather than clip-path (Edge doesn't support clip-path), but clip requires
elements to be positioned absolutely */
position: absolute; position: absolute;
} }
.twoUpHandle { .two-up-handle {
touch-action: none; touch-action: none;
position: relative; position: relative;
width: 10px; width: var(--bar-touch-size);
background: var(--track-color);
transform: translateX(var(--split-point)) translateX(-50%); transform: translateX(var(--split-point)) translateX(-50%);
box-shadow: inset 4px 0 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
will-change: transform; will-change: transform;
cursor: ew-resize; cursor: ew-resize;
} }
.two-up-handle::before {
content: '';
display: block;
height: 100%;
width: var(--bar-size);
margin: 0 auto;
box-shadow: inset calc(var(--bar-size) / 2) 0 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
background: var(--track-color);
}
.scrubber { .scrubber {
display: flex; display: flex;
position: absolute; position: absolute;
@@ -36,51 +48,55 @@ two-up[legacy-clip-compat] > :not(.twoUpHandle) {
left: 50%; left: 50%;
transform-origin: 50% 50%; transform-origin: 50% 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 62px; width: var(--thumb-size);
height: 56px; height: calc(var(--thumb-size) * 0.9);
background: var(--thumb-background); background: var(--thumb-background);
border: 1px solid rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.2);
border-radius: 5px; border-radius: calc(var(--thumb-size) * 0.08);
box-shadow: 0 1px 4px rgba(0,0,0,0.1); box-shadow: 0 1px 4px rgba(0,0,0,0.1);
color: var(--thumb-color); color: var(--thumb-color);
} }
.scrubber svg { .scrubber svg {
flex: 1; flex: 1;
margin: 0 10px; margin: 0 25%;
} }
two-up[orientation='vertical'] .twoUpHandle { two-up[orientation='vertical'] .two-up-handle {
width: auto; width: auto;
height: 7px; height: var(--bar-touch-size);
transform: translateY(var(--split-point)) translateY(-50%); transform: translateY(var(--split-point)) translateY(-50%);
box-shadow: inset 0 3px 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
cursor: ns-resize; cursor: ns-resize;
} }
two-up[orientation='vertical'] .two-up-handle::before {
width: auto;
height: var(--bar-size);
box-shadow: inset 0 calc(var(--bar-size) / 2) 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
margin: calc((var(--bar-touch-size) - var(--bar-size)) / 2) 0 0 0;
}
two-up[orientation='vertical'] .scrubber { two-up[orientation='vertical'] .scrubber {
width: 46px;
height: 40px;
font-size: 18px;
box-shadow: 1px 0 4px rgba(0,0,0,0.1); box-shadow: 1px 0 4px rgba(0,0,0,0.1);
transform: translate(-50%, -50%) rotate(-90deg); transform: translate(-50%, -50%) rotate(-90deg);
} }
two-up > :nth-child(1):not(.twoUpHandle) { two-up > :nth-child(1):not(.two-up-handle) {
-webkit-clip-path: inset(0 calc(100% - var(--split-point)) 0 0); -webkit-clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
clip-path: inset(0 calc(100% - var(--split-point)) 0 0); clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
} }
two-up > :nth-child(2):not(.twoUpHandle) { two-up > :nth-child(2):not(.two-up-handle) {
-webkit-clip-path: inset(0 0 0 var(--split-point)); -webkit-clip-path: inset(0 0 0 var(--split-point));
clip-path: inset(0 0 0 var(--split-point)); clip-path: inset(0 0 0 var(--split-point));
} }
two-up[orientation='vertical'] > :nth-child(1):not(.twoUpHandle) { two-up[orientation='vertical'] > :nth-child(1):not(.two-up-handle) {
-webkit-clip-path: inset(0 0 calc(100% - var(--split-point)) 0); -webkit-clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
clip-path: inset(0 0 calc(100% - var(--split-point)) 0); clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
} }
two-up[orientation='vertical'] > :nth-child(2):not(.twoUpHandle) { two-up[orientation='vertical'] > :nth-child(2):not(.two-up-handle) {
-webkit-clip-path: inset(var(--split-point) 0 0 0); -webkit-clip-path: inset(var(--split-point) 0 0 0);
clip-path: inset(var(--split-point) 0 0 0); clip-path: inset(var(--split-point) 0 0 0);
} }
@@ -90,19 +106,19 @@ two-up[orientation='vertical'] > :nth-child(2):not(.twoUpHandle) {
It performs way better in Safari. It performs way better in Safari.
*/ */
@supports not ((clip-path: inset(0 0 0 0)) or (-webkit-clip-path: inset(0 0 0 0))) { @supports not ((clip-path: inset(0 0 0 0)) or (-webkit-clip-path: inset(0 0 0 0))) {
two-up[legacy-clip-compat] > :nth-child(1):not(.twoUpHandle) { two-up[legacy-clip-compat] > :nth-child(1):not(.two-up-handle) {
clip: rect(auto var(--split-point) auto auto); clip: rect(auto var(--split-point) auto auto);
} }
two-up[legacy-clip-compat] > :nth-child(2):not(.twoUpHandle) { two-up[legacy-clip-compat] > :nth-child(2):not(.two-up-handle) {
clip: rect(auto auto auto var(--split-point)); clip: rect(auto auto auto var(--split-point));
} }
two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(1):not(.twoUpHandle) { two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(1):not(.two-up-handle) {
clip: rect(auto auto var(--split-point) auto); clip: rect(auto auto var(--split-point) auto);
} }
two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(2):not(.twoUpHandle) { two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(2):not(.two-up-handle) {
clip: rect(var(--split-point) auto auto auto); clip: rect(var(--split-point) auto auto auto);
} }
} }