From 32579ce377e0849f04966951fc3123aef8f751d9 Mon Sep 17 00:00:00 2001 From: Philip Bell Date: Fri, 18 Sep 2020 12:54:11 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8D=20System=20UI=20updates=20(#30279)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * System UI adjustments. * Update icons * Revise css * Remove extra whitespace. * Remove extra whitespace. * Importants. * Fix css RTL targeting of EQ. * Border-box for padding. --- .../amp-story/1.0/amp-story-system-layer.css | 61 ++++++++++--------- .../amp-story/1.0/amp-story-system-layer.js | 3 + extensions/amp-story/1.0/amp-story.css | 2 +- 3 files changed, 37 insertions(+), 29 deletions(-) diff --git a/extensions/amp-story/1.0/amp-story-system-layer.css b/extensions/amp-story/1.0/amp-story-system-layer.css index 5793cf28cbe5..e23cb9380eef 100644 --- a/extensions/amp-story/1.0/amp-story-system-layer.css +++ b/extensions/amp-story/1.0/amp-story-system-layer.css @@ -18,20 +18,22 @@ .i-amphtml-story-system-layer { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent) !important; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), transparent) !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; - height: 56px !important; /* 6px progress bar + 48px icons + 2px margin */ - opacity: 1 !important; + height: 54px !important; z-index: 100000 !important; - box-sizing: border-box !important; transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important; pointer-events: none !important; font-family: 'Roboto', sans-serif !important; } +[desktop] .i-amphtml-story-system-layer { + height: 96px !important; +} + .i-amphtml-story-bookend-active.i-amphtml-story-system-layer { opacity: 0.3 !important; z-index: 1 !important; @@ -52,10 +54,15 @@ } .i-amphtml-story-system-layer-buttons { - margin-top: 8px; /* 6px progress bar + 2px margin */ display: flex !important; flex-direction: row !important; justify-content: flex-end !important; + padding-top: 6px !important; + box-sizing: border-box !important; +} + +[desktop] .i-amphtml-story-system-layer-buttons { + padding: 8px 4px 0 !important; } .i-amphtml-story-button { @@ -64,23 +71,20 @@ height: 48px !important; width: 48px !important; cursor: pointer !important; - border-radius: 50% !important; - border-width: 0 !important; - box-sizing: border-box !important; - position: relative !important; + border: none !important; pointer-events: auto !important; - /* for svg backgrounds: */ background: center center no-repeat !important; + background-size: 30px 30px !important; } -.i-amphtml-story-button:active { - /* TODO(alanorozco): do we want material ripple effect? */ - background-color: rgba(0, 0, 0, 0.2) !important; +[desktop] .i-amphtml-story-button { + margin: 0 4px !important; + background-size: auto !important; } -.i-amphtml-story-system-layer .i-amphtml-story-button { - float: left !important; +.i-amphtml-story-button:active { + background-color: rgba(0, 0, 0, 0.2) !important; } .i-amphtml-story-progress-bar { @@ -215,7 +219,7 @@ .i-amphtml-story-mute-audio-control, .i-amphtml-story-unmute-audio-control, .i-amphtml-paused-display, -.i-amphtml-story-pause-control, +.i-amphtml-story-pause-control, .i-amphtml-story-play-control, .i-amphtml-story-mute-text, .i-amphtml-story-unmute-sound-text, @@ -233,7 +237,7 @@ display: block !important; } -.i-amphtml-story-desktop-panels .i-amphtml-paused-display, .i-amphtml-story-desktop-fullbleed .i-amphtml-paused-display { +[desktop] .i-amphtml-paused-display { display: block !important; } @@ -259,19 +263,21 @@ } .i-amphtml-story-unmute-audio-control { - background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-size: 28px 28px !important; } .i-amphtml-story-mute-audio-control { - background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-size: 28px 28px !important; } .i-amphtml-story-pause-control { - background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-image: url('data:image/svg+xml;charset=utf-8,') !important; } .i-amphtml-story-play-control { - background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-image: url('data:image/svg+xml;charset=utf-8,') !important; } .i-amphtml-story-sidebar-control { @@ -279,18 +285,18 @@ } .i-amphtml-story-share-control { - background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-image: url('data:image/svg+xml;charset=utf-8,') !important; } [ios] .i-amphtml-story-share-control { - background-image: url('data:image/svg+xml;charset=utf-8,') !important; - /** Visual hack to make the icon looks aligned. */ - background-position-y: calc(50% - 2px) !important; + background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-size: auto !important; } .i-amphtml-story-info-control { - background-image: url('data:image/svg+xml;charset=utf-8,') !important; + background-image: url('data:image/svg+xml;charset=utf-8,') !important; display: none !important; + background-size: auto !important; } .i-amphtml-story-has-new-page-notification-container { @@ -398,8 +404,7 @@ transform-origin: right !important; } -.i-amphtml-story-desktop-panels .i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar, -.i-amphtml-story-desktop-fullbleed .i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar { +[desktop] .i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar { width: 3px !important; } diff --git a/extensions/amp-story/1.0/amp-story-system-layer.js b/extensions/amp-story/1.0/amp-story-system-layer.js index cb16f046f20f..89c589b46f70 100644 --- a/extensions/amp-story/1.0/amp-story-system-layer.js +++ b/extensions/amp-story/1.0/amp-story-system-layer.js @@ -731,12 +731,15 @@ export class SystemLayer { shadowRoot.classList.remove('i-amphtml-story-desktop-fullbleed'); shadowRoot.classList.remove('i-amphtml-story-desktop-panels'); + shadowRoot.removeAttribute('desktop'); switch (uiState) { case UIType.DESKTOP_PANELS: + shadowRoot.setAttribute('desktop', ''); shadowRoot.classList.add('i-amphtml-story-desktop-panels'); break; case UIType.DESKTOP_FULLBLEED: + shadowRoot.setAttribute('desktop', ''); shadowRoot.classList.add('i-amphtml-story-desktop-fullbleed'); break; } diff --git a/extensions/amp-story/1.0/amp-story.css b/extensions/amp-story/1.0/amp-story.css index 4a176ec1ca9d..835f457e0a07 100644 --- a/extensions/amp-story/1.0/amp-story.css +++ b/extensions/amp-story/1.0/amp-story.css @@ -664,7 +664,7 @@ amp-story .amp-video-eq, bottom: 12px !important; } -[dir=rtl]amp-story .amp-video-eq, +[dir=rtl] amp-story .amp-video-eq, [dir=rtl] .i-amphtml-story-spinner { left: 12px !important; right: auto !important;