From 26954a3bf2ab8cc6262c7296950e45ce4d8e4284 Mon Sep 17 00:00:00 2001 From: Matchu Date: Mon, 8 Jul 2024 17:19:14 -0700 Subject: [PATCH] Restyle play/pause button for new item page preview --- app/assets/stylesheets/items/_show.sass | 40 +++++++++++++++++++++++- app/views/items/_outfit_viewer.html.haml | 7 +++-- 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass index d672515f..627cbd6f 100644 --- a/app/assets/stylesheets/items/_show.sass +++ b/app/assets/stylesheets/items/_show.sass @@ -74,10 +74,48 @@ body.items-show left: 8px bottom: 8px display: none + align-items: center + justify-content: center + color: white + background: rgba(0, 0, 0, 0.64) + width: 2.5em + height: 2.5em + border-radius: 100% + border: 2px solid transparent + transition: all .25s + + .playing-label, .paused-label + display: none + width: 1em + height: 1em + + .play-pause-toggle + // Visually hidden + clip: rect(0 0 0 0) + clip-path: inset(50%) + height: 1px + overflow: hidden + position: absolute + white-space: nowrap + width: 1px + + &:checked ~ .playing-label + display: block + + &:not(:checked) ~ .paused-label + display: block + + &:hover, &:has(.play-pause-toggle:focus) + border: 2px solid $module-border-color + background: $module-bg-color + color: $text-color + + &:active + transform: translateY(2px) &:has(outfit-layer:state(has-animations)) .play-pause-button - display: block + display: flex .error-indicator font-size: 85% diff --git a/app/views/items/_outfit_viewer.html.haml b/app/views/items/_outfit_viewer.html.haml index 1848f3c8..23f7693f 100644 --- a/app/views/items/_outfit_viewer.html.haml +++ b/app/views/items/_outfit_viewer.html.haml @@ -1,12 +1,15 @@ %outfit-viewer .loading-indicator= render partial: "hanger_spinner" - %label.play-pause-button + %label.play-pause-button{title: "Pause/play animations"} %input.play-pause-toggle{ type: "checkbox", checked: outfit_viewer_is_playing, } - Play/pause + %svg.playing-label{viewBox: "0 0 24 24", "aria-hidden": "true", "aria-label": "Pause"} + %path{fill: "currentColor", d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z"} + %svg.paused-label{viewBox: "0 0 24 24", "aria-hidden": "true", "aria-label": "Play"} + %path{fill: "currentColor", d: "M8 5v14l11-7z"} - outfit.visible_layers.each do |swf_asset| %outfit-layer{