Add SVG/PNG picker when editing pet appearances

I've known there are bugs in the SVGs pretty often, because they're not
very well attended-to—I noticed pretty quick that the Marble Eyrie, for
example, has its Body asset saved correctly in PNG, but its SVG is just
another copy of the head, oops!

I think SVG is still a nice default for this UI, but I added a little
form to switch to PNG, to give us a debugging method and escape hatch
if it starts to get weird.
This commit is contained in:
Emi Matchu 2024-12-07 12:16:52 -08:00
parent 98965ccc6f
commit 347419aee8
3 changed files with 56 additions and 4 deletions

View file

@ -1,6 +1,7 @@
@import "clean/mixins"
=context-button =context-button
+awesome-button +awesome-button
+awesome-button-color(#aaaaaa) +awesome-button-color(#aaaaaa)
+opacity(0.9) +opacity(0.9)
font-size: 80% font-size: 80%

View file

@ -1,4 +1,5 @@
@import "../partials/clean/constants" @import "../partials/clean/constants"
@import "../partials/context_button"
support-outfit-viewer support-outfit-viewer
display: flex display: flex
@ -11,6 +12,36 @@ support-outfit-viewer
border: 1px solid $module-border-color border: 1px solid $module-border-color
border-radius: 1em border-radius: 1em
.outfit-viewer-controls
margin-block: .5em
isolation: isolate // Avoid z-index weirdness with our buttons vs the lens
display: flex
align-items: center
justify-content: center
gap: .5em
font-size: .85em
fieldset
display: contents
legend
font-weight: bold
&::after
content: ":"
label
display: flex
align-items: center
gap: .25em
input[type=radio]
margin: 0
[type=submit]
+context-button
> table > table
flex: 0 0 auto flex: 0 0 auto
border-collapse: collapse border-collapse: collapse
@ -42,3 +73,6 @@ support-outfit-viewer
--magic-magnifier-lens-width: 100px --magic-magnifier-lens-width: 100px
--magic-magnifier-lens-height: 100px --magic-magnifier-lens-height: 100px
--magic-magnifier-scale: 2.5 --magic-magnifier-scale: 2.5
magic-magnifier-lens
z-index: 2 // Be above things by default, but not by much!

View file

@ -1,7 +1,24 @@
= content_tag "support-outfit-viewer", **html_options do = content_tag "support-outfit-viewer", **html_options do
-# Render an outfit viewer in a magnifier. Use SVG for maximum clarity! = turbo_frame_tag "support-outfit-viewer-preview" do
%div
-# Render an outfit viewer in a magnifier. Use SVG by default for clarity,
-# but also offer an option to switch to PNG if it looks wrong.
%magic-magnifier %magic-magnifier
= outfit_viewer outfit, preferred_image_format: :svg = outfit_viewer outfit,
preferred_image_format: params[:preferred_image_format] == "png" ? :png : :svg
= form_with method: :get, class: "outfit-viewer-controls" do |f|
%fieldset
%legend Format
%label
= f.radio_button "preferred_image_format", "svg",
checked: params[:preferred_image_format] != "png"
SVG
%label
= f.radio_button "preferred_image_format", "png",
checked: params[:preferred_image_format] == "png"
PNG
= f.submit "Update"
%table %table
%thead %thead