mirror of
https://github.com/DaanVandenBosch/phantasmal-world.git
synced 2025-04-04 22:58:29 +08:00
BluePrint React components are now used everywhere instead of css classes. Styling is now done in css files instead of setting the style prop.
This commit is contained in:
Daan Vanden Bosch
parent
eed7b5d68e
commit
15883a13e1
@ -18,13 +18,8 @@
|
||||
margin-left: 2;
|
||||
}
|
||||
|
||||
.ApplicationComponent-file-upload {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
.ApplicationComponent-button-bar > * {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ApplicationComponent-main {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Button, Dialog, Intent } from '@blueprintjs/core';
|
||||
import { Button, Dialog, Intent, Classes, Navbar, NavbarGroup, NavbarHeading, FileInput, HTMLSelect, FormGroup, InputGroup } from '@blueprintjs/core';
|
||||
import { observer } from 'mobx-react';
|
||||
import React, { ChangeEvent, KeyboardEvent } from 'react';
|
||||
import { saveCurrentQuestToFile, setCurrentAreaId } from '../actions/appState';
|
||||
@ -24,49 +24,45 @@ export class ApplicationComponent extends React.Component<{}, {
|
||||
render() {
|
||||
const quest = appStateStore.currentQuest;
|
||||
const model = appStateStore.currentModel;
|
||||
const areas = quest ? Array.from(quest.areaVariants).map(a => a.area) : undefined;
|
||||
const areas = quest && Array.from(quest.areaVariants).map(a => a.area);
|
||||
const area = appStateStore.currentArea;
|
||||
const areaId = area ? String(area.id) : undefined;
|
||||
const areaId = area && String(area.id);
|
||||
|
||||
return (
|
||||
<div className="ApplicationComponent bp3-app bp3-dark">
|
||||
<nav className="bp3-navbar">
|
||||
<div className="bp3-navbar-group">
|
||||
<div className="ApplicationComponent-heading bp3-navbar-heading">
|
||||
Phantasmal Quest Editor
|
||||
<div className={`ApplicationComponent ${Classes.DARK}`}>
|
||||
<Navbar>
|
||||
<NavbarGroup className="ApplicationComponent-button-bar">
|
||||
<NavbarHeading className="ApplicationComponent-heading">
|
||||
Phantasmal World
|
||||
<sup className="ApplicationComponent-beta">BETA</sup>
|
||||
</div>
|
||||
<label className="bp3-file-input">
|
||||
<input
|
||||
type="file"
|
||||
accept=".nj, .qst, .xj"
|
||||
onChange={this.onFileChange} />
|
||||
<span className="bp3-file-upload-input">
|
||||
<span className="ApplicationComponent-file-upload">
|
||||
{this.state.filename || 'Choose file...'}
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
{areas
|
||||
? (
|
||||
<div className="bp3-select" style={{ marginLeft: 10 }}>
|
||||
<select
|
||||
onChange={this.onAreaSelectChange}
|
||||
defaultValue={areaId}>
|
||||
{areas.map(area =>
|
||||
<option key={area.id} value={area.id}>{area.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
) : null}
|
||||
{quest
|
||||
? <Button
|
||||
</NavbarHeading>
|
||||
<FileInput
|
||||
text={this.state.filename || 'Choose file...'}
|
||||
inputProps={{
|
||||
type: 'file',
|
||||
accept: '.nj, .qst, .xj',
|
||||
onChange: this.onFileChange
|
||||
}}
|
||||
/>
|
||||
{areas ? (
|
||||
<HTMLSelect
|
||||
onChange={this.onAreaSelectChange}
|
||||
defaultValue={areaId}
|
||||
>
|
||||
{areas.map(area =>
|
||||
<option key={area.id} value={area.id}>{area.name}</option>
|
||||
)}
|
||||
</HTMLSelect>
|
||||
) : null}
|
||||
{quest ? (
|
||||
<Button
|
||||
text="Save as..."
|
||||
icon="floppy-disk"
|
||||
style={{ marginLeft: 10 }}
|
||||
onClick={this.onSaveAsClick} />
|
||||
: null}
|
||||
</div>
|
||||
</nav>
|
||||
onClick={this.onSaveAsClick}
|
||||
/>
|
||||
) : null}
|
||||
</NavbarGroup>
|
||||
</Navbar>
|
||||
<div className="ApplicationComponent-main">
|
||||
<QuestInfoComponent
|
||||
quest={quest} />
|
||||
@ -79,27 +75,24 @@ export class ApplicationComponent extends React.Component<{}, {
|
||||
<Dialog
|
||||
title="Save as..."
|
||||
icon="floppy-disk"
|
||||
className="bp3-dark"
|
||||
className={Classes.DARK}
|
||||
style={{ width: 360 }}
|
||||
isOpen={this.state.saveDialogOpen}
|
||||
onClose={this.onSaveDialogClose}>
|
||||
<div className="bp3-dialog-body">
|
||||
<label className="bp3-label bp3-inline">
|
||||
Name:
|
||||
<input
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<FormGroup label="Name:" labelFor="file-name-input">
|
||||
<InputGroup
|
||||
id="file-name-input"
|
||||
autoFocus={true}
|
||||
className="bp3-input"
|
||||
style={{ width: 200, margin: '0 10px 0 10px' }}
|
||||
value={this.state.saveDialogFilename}
|
||||
maxLength={12}
|
||||
onChange={this.onSaveDialogNameChange}
|
||||
onKeyUp={this.onSaveDialogNameKeyUp}
|
||||
/>
|
||||
(.qst)
|
||||
</label>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div className="bp3-dialog-footer">
|
||||
<div className="bp3-dialog-footer-actions">
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button
|
||||
text="Save"
|
||||
style={{ marginLeft: 10 }}
|
||||
|
||||
@ -1,3 +1,14 @@
|
||||
.EntityInfoComponent-container {
|
||||
width: 200px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.EntityInfoComponent-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.EntityInfoComponent-coord input {
|
||||
text-align: right;
|
||||
padding-right: 10px !important;
|
||||
|
||||
@ -1,20 +1,9 @@
|
||||
import React, { CSSProperties } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { NumericInput } from '@blueprintjs/core';
|
||||
import { VisibleQuestEntity, QuestObject, QuestNpc } from '../domain';
|
||||
import { observer } from 'mobx-react';
|
||||
import React from 'react';
|
||||
import { QuestNpc, QuestObject, VisibleQuestEntity } from '../domain';
|
||||
import './EntityInfoComponent.css';
|
||||
|
||||
const containerStyle: CSSProperties = {
|
||||
width: 200,
|
||||
padding: 10,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
};
|
||||
|
||||
const tableStyle: CSSProperties = {
|
||||
borderCollapse: 'collapse'
|
||||
};
|
||||
|
||||
interface Props {
|
||||
entity?: VisibleQuestEntity
|
||||
}
|
||||
@ -62,8 +51,8 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
<table style={tableStyle}>
|
||||
<div className="EntityInfoComponent-container">
|
||||
<table className="EntityInfoComponent-table">
|
||||
<tbody>
|
||||
{name}
|
||||
<tr>
|
||||
@ -102,7 +91,7 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <div style={containerStyle} />;
|
||||
return <div className="EntityInfoComponent-container" />;
|
||||
}
|
||||
}
|
||||
|
||||
@ -120,7 +109,8 @@ export class EntityInfoComponent extends React.Component<Props, any> {
|
||||
<td>
|
||||
<NumericInput
|
||||
value={value}
|
||||
className="pt-fill EntityInfoComponent-coord"
|
||||
className="EntityInfoComponent-coord"
|
||||
fill={true}
|
||||
buttonPosition="none"
|
||||
onValueChange={(this.posChange as any)[posType][coord]}
|
||||
onBlur={this.coordInputBlurred} />
|
||||
|
||||
20
src/ui/QuestInfoComponent.css
Normal file
20
src/ui/QuestInfoComponent.css
Normal file
@ -0,0 +1,20 @@
|
||||
.QuestInfoComponent {
|
||||
width: 280px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.QuestInfoComponent table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.QuestInfoComponent table tbody th {
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.QuestInfoComponent-npc-counts-container {
|
||||
overflow: auto;
|
||||
}
|
||||
@ -1,31 +1,7 @@
|
||||
import React, { CSSProperties } from 'react';
|
||||
import React from 'react';
|
||||
import { NpcType, Quest } from '../domain';
|
||||
|
||||
const containerStyle: CSSProperties = {
|
||||
width: 280,
|
||||
padding: 10,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
};
|
||||
|
||||
const tableStyle: CSSProperties = {
|
||||
borderCollapse: 'collapse',
|
||||
width: '100%'
|
||||
};
|
||||
|
||||
const tableHeaderStyle: CSSProperties = {
|
||||
textAlign: 'right',
|
||||
paddingRight: 5
|
||||
};
|
||||
|
||||
const descriptionStyle: CSSProperties = {
|
||||
whiteSpace: 'pre-wrap',
|
||||
margin: '3px 0 3px 0'
|
||||
};
|
||||
|
||||
const npcCountsContainerStyle: CSSProperties = {
|
||||
overflow: 'auto'
|
||||
};
|
||||
import { Pre } from '@blueprintjs/core';
|
||||
import './QuestInfoComponent.css';
|
||||
|
||||
export function QuestInfoComponent({ quest }: { quest?: Quest }) {
|
||||
if (quest) {
|
||||
@ -53,31 +29,31 @@ export function QuestInfoComponent({ quest }: { quest?: Quest }) {
|
||||
});
|
||||
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
<table style={tableStyle}>
|
||||
<div className="QuestInfoComponent">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style={tableHeaderStyle}>Name:</th><td>{quest.name}</td>
|
||||
<th>Name:</th><td>{quest.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style={tableHeaderStyle}>Episode:</th><td>{episode}</td>
|
||||
<th>Episode:</th><td>{episode}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<pre className="bp3-code-block" style={descriptionStyle}>{quest.shortDescription}</pre>
|
||||
<Pre>{quest.shortDescription}</Pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<pre className="bp3-code-block" style={descriptionStyle}>{quest.longDescription}</pre>
|
||||
<Pre>{quest.longDescription}</Pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div style={npcCountsContainerStyle}>
|
||||
<table style={tableStyle}>
|
||||
<div className="QuestInfoComponent-npc-counts-container">
|
||||
<table >
|
||||
<thead>
|
||||
<tr><th>NPC Counts</th></tr>
|
||||
<tr><th colSpan={2}>NPC Counts</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{npcCountRows}
|
||||
@ -87,6 +63,6 @@ export function QuestInfoComponent({ quest }: { quest?: Quest }) {
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <div style={containerStyle} />;
|
||||
return <div className="QuestInfoComponent" />;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user