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
|
=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%
|
||||||
|
|
||||||
|
|
|
@ -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!
|
||||||
|
|
|
@ -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
|
||||||
%magic-magnifier
|
%div
|
||||||
= outfit_viewer outfit, preferred_image_format: :svg
|
-# 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
|
%table
|
||||||
%thead
|
%thead
|
||||||
|
|
Loading…
Reference in a new issue