Add Customize More button back to item pages

Oh right, forgot about this lol!

The specific effect on Impress 2020 where the button label expands is,
kinda hard to implement in normal CSS/JS, and so I'm not in the mood
and I'm settling for the `title` attribute lol
This commit is contained in:
Emi Matchu 2024-09-06 17:12:11 -07:00
parent 3a18820d05
commit 96215c037a
4 changed files with 45 additions and 0 deletions

View file

@ -40,6 +40,23 @@ body.items-show
.preview-area .preview-area
margin: 0 auto margin: 0 auto
position: relative
.customize-more
position: absolute
top: 1em
right: 1em
display: flex
align-items: center
text-decoration: none
background: #EDF2F7
padding: .75em
border-radius: .375em
min-height: 2rem
min-width: 2rem
box-sizing: border-box
outfit-viewer outfit-viewer
display: block display: block

View file

@ -101,6 +101,12 @@ module ApplicationHelper
"matchu@openneo.net" "matchu@openneo.net"
end end
EDIT_ICON_SVG_SOURCE = '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></g>'.html_safe
def edit_icon(alt: "Edit")
content_tag :svg, EDIT_ICON_SVG_SOURCE, alt:, class: "icon",
viewBox: "0 0 24 24", style: "width: 1em; height: 1em"
end
# SVG icon source from Chakra UI! # SVG icon source from Chakra UI!
EXTERNAL_LINK_SVG_SOURCE = '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path></g>'.html_safe EXTERNAL_LINK_SVG_SOURCE = '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path></g>'.html_safe
def external_link_icon def external_link_icon

View file

@ -1,9 +1,15 @@
class Outfit < ApplicationRecord class Outfit < ApplicationRecord
has_many :item_outfit_relationships, :dependent => :destroy has_many :item_outfit_relationships, :dependent => :destroy
has_many :worn_item_outfit_relationships, -> { where(is_worn: true) }, has_many :worn_item_outfit_relationships, -> { where(is_worn: true) },
class_name: 'ItemOutfitRelationship' class_name: 'ItemOutfitRelationship'
has_many :worn_items, through: :worn_item_outfit_relationships, source: :item has_many :worn_items, through: :worn_item_outfit_relationships, source: :item
has_many :closeted_item_outfit_relationships, -> { where(is_worn: false) },
class_name: 'ItemOutfitRelationship'
has_many :closeted_items, through: :closeted_item_outfit_relationships,
source: :item
belongs_to :alt_style, optional: true belongs_to :alt_style, optional: true
belongs_to :pet_state, optional: true # We validate presence below! belongs_to :pet_state, optional: true # We validate presence below!
belongs_to :user, optional: true belongs_to :user, optional: true
@ -231,6 +237,18 @@ class Outfit < ApplicationRecord
(pet_layers + item_layers).sort_by(&:depth) (pet_layers + item_layers).sort_by(&:depth)
end end
def wardrobe_params
{
name: name,
color: color_id,
species: species_id,
pose: pose,
state: pet_state_id,
objects: worn_item_ids,
closet: closeted_item_ids,
}
end
def ensure_unique_name def ensure_unique_name
# If no name was provided, start with "Untitled outfit". # If no name was provided, start with "Untitled outfit".
self.name = "Untitled outfit" if name.blank? self.name = "Untitled outfit" if name.blank?

View file

@ -19,6 +19,10 @@
= render partial: "outfit_viewer", locals: {outfit: @preview_outfit} = render partial: "outfit_viewer", locals: {outfit: @preview_outfit}
.error-indicator .error-indicator
💥 We couldn't load all of this outfit. Try again? 💥 We couldn't load all of this outfit. Try again?
= link_to wardrobe_path(params: @preview_outfit.wardrobe_params),
class: "customize-more", target: "_blank",
title: "Customize more", "aria-label": "Customize more" do
= edit_icon
%species-color-picker %species-color-picker
= form_for item_path(@item), method: :get, data: {"is-valid": @preview_error.nil?} do |f| = form_for item_path(@item), method: :get, data: {"is-valid": @preview_error.nil?} do |f|