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:
parent
98965ccc6f
commit
347419aee8
3 changed files with 56 additions and 4 deletions
|
@ -1,6 +1,7 @@
|
|||
@import "clean/mixins"
|
||||
|
||||
=context-button
|
||||
+awesome-button
|
||||
+awesome-button-color(#aaaaaa)
|
||||
+opacity(0.9)
|
||||
font-size: 80%
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import "../partials/clean/constants"
|
||||
@import "../partials/context_button"
|
||||
|
||||
support-outfit-viewer
|
||||
display: flex
|
||||
|
@ -11,6 +12,36 @@ support-outfit-viewer
|
|||
border: 1px solid $module-border-color
|
||||
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
|
||||
flex: 0 0 auto
|
||||
border-collapse: collapse
|
||||
|
@ -42,3 +73,6 @@ support-outfit-viewer
|
|||
--magic-magnifier-lens-width: 100px
|
||||
--magic-magnifier-lens-height: 100px
|
||||
--magic-magnifier-scale: 2.5
|
||||
|
||||
magic-magnifier-lens
|
||||
z-index: 2 // Be above things by default, but not by much!
|
||||
|
|
|
@ -1,7 +1,24 @@
|
|||
= content_tag "support-outfit-viewer", **html_options do
|
||||
-# Render an outfit viewer in a magnifier. Use SVG for maximum clarity!
|
||||
%magic-magnifier
|
||||
= outfit_viewer outfit, preferred_image_format: :svg
|
||||
= 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
|
||||
= 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
|
||||
%thead
|
||||
|
|
Loading…
Reference in a new issue