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:
parent
3a18820d05
commit
96215c037a
4 changed files with 45 additions and 0 deletions
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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?
|
||||||
|
|
|
@ -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|
|
||||||
|
|
Loading…
Reference in a new issue