Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2026-04-25 16:35:21 +02:00
Code Issues Projects Releases Wiki Activity

Use inputgroup instead of editabletext (#251)

Browse source
This commit is contained in:
WithoutPants 2019-12-09 09:28:38 +11:00 committed by Leopere
parent 7dab3fcff7
commit c66d9fcc28
5 changed files with 107 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/v2/src/components/Studios/StudioDetails/Studio.tsx
View file

@ -183,7 +183,7 @@ export const Studio: FunctionComponent<IProps> = (props: IProps) => {
<HTMLTable style={{width: "100%"}}>
<tbody>
{TableUtils.renderEditableTextTableRow({title: "URL", value: url, isEditing, onChange: setUrl})}
{TableUtils.renderInputGroup({title: "URL", value: url, isEditing, onChange: setUrl})}
</tbody>
</HTMLTable>
</div>

48
ui/v2/src/components/performers/PerformerDetails/Performer.tsx
View file

@ -5,6 +5,7 @@ import {
EditableText,
HTMLTable,
Spinner,
FormGroup,
} from "@blueprintjs/core";
import _ from "lodash";
import React, { FunctionComponent, useEffect, useState } from "react";
@ -16,6 +17,7 @@ import { TableUtils } from "../../../utils/table";
import { ScrapePerformerSuggest } from "../../select/ScrapePerformerSuggest";
import { DetailsEditNavbar } from "../../Shared/DetailsEditNavbar";
import { ToastUtils } from "../../../utils/toasts";
import { EditableTextUtils } from "../../../utils/editabletext";
interface IPerformerProps extends IBaseProps {}
@ -299,7 +301,7 @@ export const Performer: FunctionComponent<IPerformerProps> = (props: IPerformerP
}
function maybeRenderScrapeButton() {
if (!url || !urlScrapable(url)) {
if (!url || !isEditing || !urlScrapable(url)) {
return undefined;
}
return (
@ -319,13 +321,9 @@ export const Performer: FunctionComponent<IPerformerProps> = (props: IPerformerP
{maybeRenderScrapeButton()}
</td>
<td>
<EditableText
disabled={!isEditing}
value={url}
placeholder="URL"
multiline={true}
onChange={(newValue) => setUrl(newValue)}
/>
{EditableTextUtils.renderInputGroup({
value: url, isEditing, onChange: setUrl, placeholder: "URL"
})}
</td>
</tr>
);
@ -360,13 +358,11 @@ export const Performer: FunctionComponent<IPerformerProps> = (props: IPerformerP
/>
</h1>
<h6 className="bp3-heading">
<span style={{fontWeight: 300}}>Aliases: </span>
<EditableText
disabled={!isEditing}
value={aliases}
placeholder="Aliases"
onChange={(value) => setAliases(value)}
/>
<FormGroup className="aliases-field" inline={true} label="Aliases:">
{EditableTextUtils.renderInputGroup({
value: aliases, isEditing: isEditing, placeholder: "Aliases", onChange: setAliases
})}
</FormGroup>
</h6>
<div>
<span style={{fontWeight: 300}}>Favorite:</span>
@ -381,29 +377,29 @@ export const Performer: FunctionComponent<IPerformerProps> = (props: IPerformerP
<HTMLTable id="performer-details" style={{width: "100%"}}>
<tbody>
{TableUtils.renderEditableTextTableRow(
{TableUtils.renderInputGroup(
{title: "Birthdate (YYYY-MM-DD)", value: birthdate, isEditing, onChange: setBirthdate})}
{renderEthnicity()}
{TableUtils.renderEditableTextTableRow(
{TableUtils.renderInputGroup(
{title: "Eye Color", value: eyeColor, isEditing, onChange: setEyeColor})}
{TableUtils.renderEditableTextTableRow(
{TableUtils.renderInputGroup(
{title: "Country", value: country, isEditing, onChange: setCountry})}
{TableUtils.renderEditableTextTableRow(
{TableUtils.renderInputGroup(
{title: "Height (CM)", value: height, isEditing, onChange: setHeight})}
{TableUtils.renderEditableTextTableRow(
{TableUtils.renderInputGroup(
{title: "Measurements", value: measurements, isEditing, onChange: setMeasurements})}
{TableUtils.renderEditableTextTableRow(
{TableUtils.renderInputGroup(
{title: "Fake Tits", value: fakeTits, isEditing, onChange: setFakeTits})}
{TableUtils.renderEditableTextTableRow(
{TableUtils.renderInputGroup(
{title: "Career Length", value: careerLength, isEditing, onChange: setCareerLength})}
{TableUtils.renderEditableTextTableRow(
{TableUtils.renderInputGroup(
{title: "Tattoos", value: tattoos, isEditing, onChange: setTattoos})}
{TableUtils.renderEditableTextTableRow(
{TableUtils.renderInputGroup(
{title: "Piercings", value: piercings, isEditing, onChange: setPiercings})}
{renderURLField()}
{TableUtils.renderEditableTextTableRow(
{TableUtils.renderInputGroup(
{title: "Twitter", value: twitter, isEditing, onChange: setTwitter})}
{TableUtils.renderEditableTextTableRow(
{TableUtils.renderInputGroup(
{title: "Instagram", value: instagram, isEditing, onChange: setInstagram})}
</tbody>
</HTMLTable>

4
ui/v2/src/index.scss
View file

@ -472,4 +472,8 @@ span.block {
& .bp3-slider {
min-width: 100%;
}
}
.aliases-field > label{
font-weight: 300;
}

71
ui/v2/src/utils/editabletext.tsx Normal file
View file

@ -0,0 +1,71 @@
import { HTMLSelect, InputGroup, IOptionProps, TextArea, Label } from "@blueprintjs/core";
import React from "react";
export class EditableTextUtils {
public static renderTextArea(options: {
value: string | undefined,
isEditing: boolean,
onChange: ((value: string) => void)
}) {
let element: JSX.Element;
if (options.isEditing) {
element = (
<TextArea
fill={true}
onChange={(newValue) => options.onChange(newValue.target.value)}
value={options.value}
/>
);
} else {
element = <p className="pre">{options.value}</p>;
}
return element;
}
public static renderInputGroup(options: {
value: string | undefined,
isEditing: boolean,
placeholder?: string,
onChange: ((value: string) => void),
}) {
let element: JSX.Element;
if (options.isEditing) {
element = (
<InputGroup
onChange={(newValue: any) => options.onChange(newValue.target.value)}
value={options.value}
placeholder={options.placeholder}
/>
);
} else {
element = <Label>{options.value}</Label>;
}
return element;
}
public static renderHtmlSelect(options: {
value: string | number | undefined,
isEditing: boolean,
onChange: ((value: string) => void),
selectOptions: Array<string | number | IOptionProps>,
}) {
let stringValue = options.value;
if (typeof stringValue === "number") {
stringValue = stringValue.toString();
}
let element: JSX.Element;
if (options.isEditing) {
element = (
<HTMLSelect
options={options.selectOptions}
onChange={(event) => options.onChange(event.target.value)}
value={stringValue}
/>
);
} else {
element = <span>{options.value}</span>;
}
return element;
}
}

52
ui/v2/src/utils/table.tsx
View file

@ -1,7 +1,9 @@
import { EditableText, HTMLSelect, InputGroup, IOptionProps, TextArea } from "@blueprintjs/core";
import React from "react";
import { EditableTextUtils } from "./editabletext";
import { FilterMultiSelect } from "../components/select/FilterMultiSelect";
import { FilterSelect } from "../components/select/FilterSelect";
import _ from "lodash";
export class TableUtils {
public static renderEditableTextTableRow(options: {
@ -36,23 +38,12 @@ export class TableUtils {
isEditing: boolean,
onChange: ((value: string) => void),
}) {
let element: JSX.Element;
if (options.isEditing) {
element = (
<TextArea
fill={true}
onChange={(newValue) => options.onChange(newValue.target.value)}
value={options.value}
/>
);
} else {
element = <p className="pre">{options.value}</p>;
}
return (
<tr>
<td>{options.title}</td>
<td>
{element}
{EditableTextUtils.renderTextArea(options)}
</td>
</tr>
);
@ -60,26 +51,18 @@ export class TableUtils {
public static renderInputGroup(options: {
title: string,
placeholder?: string,
value: string | undefined,
isEditing: boolean,
onChange: ((value: string) => void),
}) {
let element: JSX.Element;
if (options.isEditing) {
element = (
<InputGroup
onChange={(newValue: any) => options.onChange(newValue.target.value)}
value={options.value}
/>
);
} else {
element = <span>{options.value}</span>;
}
let optionsCopy = _.clone(options);
optionsCopy.placeholder = options.placeholder || options.title;
return (
<tr>
<td>{options.title}</td>
<td>
{element}
{EditableTextUtils.renderInputGroup(optionsCopy)}
</td>
</tr>
);
@ -92,28 +75,11 @@ export class TableUtils {
onChange: ((value: string) => void),
selectOptions: Array<string | number | IOptionProps>,
}) {
let stringValue = options.value;
if (typeof stringValue === "number") {
stringValue = stringValue.toString();
}
let element: JSX.Element;
if (options.isEditing) {
element = (
<HTMLSelect
options={options.selectOptions}
onChange={(event) => options.onChange(event.target.value)}
value={stringValue}
/>
);
} else {
element = <span>{options.value}</span>;
}
return (
<tr>
<td>{options.title}</td>
<td>
{element}
{EditableTextUtils.renderHtmlSelect(options)}
</td>
</tr>
);