forked from OpenNeo/impress
Show alt style name in the pose picker button when selected
To help with space, I'm just showing the word "Nostalgic" (or "???" if it's from a series we don't recognize, this is hardcoded by ID), and trusting that from context it will be obvious that it's the "Nostalgic Faerie" case or whatever. (Moreover, in both the button and the select we're omitting the species name, by similar reasoning!) Note that this _still_ doesn't actually apply the style to the outfit whatsoever; this is all just local state as we're continuing to play with UI concepts. Actually applying it is probably next though! (Though there's a couple more UI things I want to do, like some affordances to clarify that a Style is applied and that Expression changes won't work.)
This commit is contained in:
parent
33bcabab83
commit
8e5939e408
5 changed files with 34 additions and 10 deletions
|
@ -12,7 +12,7 @@ class AltStylesController < ApplicationController
|
|||
format.html { render }
|
||||
format.json {
|
||||
render json: @alt_styles.as_json(
|
||||
methods: [:adjective_name, :thumbnail_url],
|
||||
methods: [:series_name, :adjective_name, :thumbnail_url],
|
||||
)
|
||||
}
|
||||
end
|
||||
|
|
|
@ -87,6 +87,9 @@ function PosePicker({
|
|||
const poseInfos = posesQuery.poseInfos;
|
||||
const altStyles = altStylesQuery.data ?? [];
|
||||
|
||||
const [styleId, setStyleId] = React.useState(null);
|
||||
const altStyle = altStyles.find((s) => s.id === styleId);
|
||||
|
||||
const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" });
|
||||
|
||||
// Resize the Popover when we toggle support mode, because it probably will
|
||||
|
@ -174,6 +177,7 @@ function PosePicker({
|
|||
<PopoverTrigger>
|
||||
<PosePickerButton
|
||||
pose={pose}
|
||||
altStyle={altStyle}
|
||||
isOpen={isOpen}
|
||||
loading={loading}
|
||||
{...props}
|
||||
|
@ -234,7 +238,9 @@ function PosePicker({
|
|||
</TabPanel>
|
||||
<TabPanel paddingX="4" paddingY="0">
|
||||
<StyleSelect
|
||||
selectedStyleId={styleId}
|
||||
altStyles={altStyles}
|
||||
onChange={setStyleId}
|
||||
initialFocusRef={initialFocusRef}
|
||||
/>
|
||||
<StyleExplanation />
|
||||
|
@ -250,9 +256,12 @@ function PosePicker({
|
|||
);
|
||||
}
|
||||
|
||||
function PosePickerButton({ pose, isOpen, loading, ...props }, ref) {
|
||||
function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
|
||||
const theme = useTheme();
|
||||
|
||||
const icon = altStyle != null ? twemojiSunglasses : getIcon(pose);
|
||||
const label = altStyle != null ? altStyle.seriesName : getLabel(pose);
|
||||
|
||||
return (
|
||||
<ClassNames>
|
||||
{({ css, cx }) => (
|
||||
|
@ -300,9 +309,9 @@ function PosePickerButton({ pose, isOpen, loading, ...props }, ref) {
|
|||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<EmojiImage src={getIcon(pose)} alt="Style" />
|
||||
<EmojiImage src={icon} alt="Style" />
|
||||
<Box width=".5em" />
|
||||
{getLabel(pose)}
|
||||
{label}
|
||||
<Box width=".5em" />
|
||||
<ChevronDownIcon />
|
||||
</Button>
|
||||
|
@ -586,9 +595,12 @@ function PosePickerEmptyExplanation() {
|
|||
);
|
||||
}
|
||||
|
||||
function StyleSelect({ altStyles, initialFocusRef }) {
|
||||
const [selectedStyleId, setSelectedStyleId] = React.useState(null);
|
||||
|
||||
function StyleSelect({
|
||||
selectedStyleId,
|
||||
altStyles,
|
||||
onChange,
|
||||
initialFocusRef,
|
||||
}) {
|
||||
const defaultStyle = { id: null, adjectiveName: "Default" };
|
||||
|
||||
const styles = [defaultStyle, ...altStyles];
|
||||
|
@ -607,7 +619,7 @@ function StyleSelect({ altStyles, initialFocusRef }) {
|
|||
key={altStyle.id}
|
||||
altStyle={altStyle}
|
||||
checked={selectedStyleId === altStyle.id}
|
||||
onChange={setSelectedStyleId}
|
||||
onChange={onChange}
|
||||
inputRef={selectedStyleId === altStyle.id ? initialFocusRef : null}
|
||||
/>
|
||||
))}
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#3B88C3" d="M14.57 27.673c2.814-1.692 6.635-3.807 9.899-7.071 7.03-7.029 12.729-16.97 11.314-18.385C34.369.803 24.428 6.502 17.398 13.531c-3.265 3.265-5.379 7.085-7.071 9.899l4.243 4.243z"/><path fill="#C1694F" d="M.428 34.744s7.071 1.414 12.021-3.536c2.121-2.121 2.121-4.949 2.121-4.949l-2.829-2.829s-3.535.708-4.95 2.122c-1.414 1.414-2.518 4.232-2.888 5.598-.676 2.502-3.475 3.594-3.475 3.594z"/><path fill="#CCD6DD" d="M17.882 25.328l-5.168-5.168c-.391-.391-.958-.326-1.27.145l-1.123 1.705c-.311.471-.271 1.142.087 1.501l4.122 4.123c.358.358 1.03.397 1.501.087l1.705-1.124c.472-.311.536-.878.146-1.269z"/><path fill="#A0041E" d="M11.229 32.26c-1.191.769-1.826.128-1.609-.609.221-.751-.12-1.648-1.237-1.414-1.117.233-1.856-.354-1.503-1.767.348-1.393-1.085-1.863-1.754-.435-.582 1.16-1.017 2.359-1.222 3.115-.677 2.503-3.476 3.595-3.476 3.595s5.988 1.184 10.801-2.485z"/></svg>
|
Before Width: | Height: | Size: 950 B |
|
@ -32,6 +32,7 @@ function normalizeAltStyle(altStyleData) {
|
|||
speciesId: altStyleData.species_id,
|
||||
colorId: altStyleData.color_id,
|
||||
bodyId: altStyleData.body_id,
|
||||
seriesName: altStyleData.series_name,
|
||||
adjectiveName: altStyleData.adjective_name,
|
||||
thumbnailUrl: altStyleData.thumbnail_url,
|
||||
};
|
||||
|
|
|
@ -6,13 +6,25 @@ class AltStyle < ApplicationRecord
|
|||
has_many :swf_assets, through: :parent_swf_asset_relationships
|
||||
has_many :contributions, as: :contributed, inverse_of: :contributed
|
||||
|
||||
SERIES_ID_RANGES = {
|
||||
nostalgic: (87249..87503)
|
||||
}
|
||||
|
||||
def name
|
||||
I18n.translate('pet_types.human_name', color_human_name: color.human_name,
|
||||
species_human_name: species.human_name)
|
||||
end
|
||||
|
||||
def series_name
|
||||
if SERIES_ID_RANGES[:nostalgic].include?(id)
|
||||
"Nostalgic"
|
||||
else
|
||||
"???"
|
||||
end
|
||||
end
|
||||
|
||||
def adjective_name
|
||||
"Nostalgic #{color.human_name}"
|
||||
"#{series_name} #{color.human_name}"
|
||||
end
|
||||
|
||||
def thumbnail_url
|
||||
|
|
Loading…
Reference in a new issue