Skip to content

Commit

Permalink
feat(app): improve application UI, docs
Browse files Browse the repository at this point in the history
  • Loading branch information
stuf committed Oct 12, 2019
1 parent d1ac10d commit 40fb374
Show file tree
Hide file tree
Showing 22 changed files with 198 additions and 43 deletions.
Binary file modified public/favicon.ico
Binary file not shown.
3 changes: 3 additions & 0 deletions src/App.d.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { FunctionComponent } from 'react';
import { Property } from 'kefir';

import { IState } from './core/state.d';
Expand All @@ -9,3 +10,5 @@ export interface Props {
menuItems: Model.IMenuItem[];
env: { [key: string]: string };
}

export interface Component extends FunctionComponent<Props> {}
17 changes: 10 additions & 7 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import Canvas from './components/ui/Canvas';
import Palette from './components/ui/Palette';
import Details from './components/ui/Details';
import Bitmap from './components/ui/Bitmap';
import ColorStats from './components/ui/ColorStats';
import TimeControlButton from './components/ui/TimeControlButton';

import LayoutHeader from './components/layout/Header';
Expand All @@ -26,17 +25,25 @@ import styles from './App.module.scss';

/**
* @param {T.Props} props
* @return {T.Component}
*/
function App({ state, canvasData, menuItems }) {
const { canvas, color } = U.destructure(state);
const { canvas, color, currentFile } = U.destructure(state);
const { size, scale } = U.destructure(canvas);
const { currentColor, currentPalette, palettes } = U.destructure(color);

const selectedPalette = U.view(currentPalette, palettes);

return (
<main className={styles.root}>
<LayoutHeader {...{ menuItems, className: styles.top }} />
<LayoutHeader
{...{
menuItems,
className: styles.top,
name: M.nameIn(currentFile),
isEditing: M.isEditingIn(currentFile),
}}
/>

<div className={styles.left}>
<Details title="Tools">
Expand Down Expand Up @@ -139,10 +146,6 @@ function App({ state, canvasData, menuItems }) {
<Field label="Height" value={U.view([1, M.wNumber], size)} />
<Field label="Scale" value={U.view(M.wNumber, scale)} />
</Details>

<Details title="Stats">
<ColorStats data={U.view(Z.present, canvasData)} />
</Details>
</div>
</main>
);
Expand Down
20 changes: 20 additions & 0 deletions src/assets/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 0 additions & 10 deletions src/components/Input.js

This file was deleted.

3 changes: 0 additions & 3 deletions src/components/Input.module.scss

This file was deleted.

3 changes: 2 additions & 1 deletion src/components/form/Range/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import * as React from 'karet';
import * as U from 'karet.util';

import * as T from './index.d';
import styles from './index.module.scss';

/**
* @param {T.Props} props
*/
function Range({ value, min, max, step, onChange }) {
return (
<div>
<div className={styles.root}>
<U.Input {...{ type: 'range', value, min, max, step, onChange }} />
</div>
);
Expand Down
2 changes: 2 additions & 0 deletions src/components/form/Range/index.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.root {
}
9 changes: 9 additions & 0 deletions src/components/layout/Header/_/ImageName/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { FunctionComponent } from 'react';
import { Property } from 'kefir';

export interface Props {
name: Property<string, any>;
editing: Property<boolean, any>;
}

export interface Component extends FunctionComponent<Props> {}
35 changes: 35 additions & 0 deletions src/components/layout/Header/_/ImageName/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/**
* @module ImageName
* @namespace components.layout.Header._
*/
import * as React from 'karet';
import * as U from 'karet.util';
import * as R from 'kefir.ramda';

import * as T from './index.d';
import styles from './index.module.scss';

/**
* @param {T.Props} props
* @return {T.Component}
*/
function ImageName({ name, isEditing }) {
const toggleFlag = U.doModify(isEditing, R.not);

return (
<div className={styles.root}>
{U.stringify({ isEditing })}
{U.ifElse(
isEditing,
<div>
<U.Input value={name} />
</div>,
<span className={styles.nameLabel} onClick={toggleFlag}>
{name}
</span>,
)}
</div>
);
}

export default ImageName;
11 changes: 11 additions & 0 deletions src/components/layout/Header/_/ImageName/index.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.root {
}

.nameLabel {
border-bottom: dotted 1px #f00;
text-decoration: dotted underline #00f;
cursor: pointer;
background: rgba(0, 0, 0, 0.2);
display: inline-block;
padding: 0.1rem 0.2rem;
}
10 changes: 10 additions & 0 deletions src/components/layout/Header/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { FunctionComponent } from 'react';
import { IMenuItem } from '../../../core/models';

export interface Props {
menuItems: IMenuItem[];
name: string;
isEditing: boolean;
}

export interface Component extends FunctionComponent<Props> {}
33 changes: 33 additions & 0 deletions src/components/layout/Header/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/* eslint no-unused-vars: [1, {"varsIgnorePattern": "[K|T|Model]"}] */
import * as React from 'karet';
import * as U from 'karet.util';

import Menu from '../../ui/Menu';
import ImageName from './_/ImageName';

import * as T from './index.d';
import styles from './index.module.scss';

import logo from '../../../assets/logo.svg';

/**
* @type {T.Props} props
* @return {T.Component}
*/
function Header({ menuItems, className, name, isEditing }) {
return (
<header className={U.cns(styles.root, className)}>
<div className={styles.logoWrapper}>
<img className={styles.logo} src={logo} />
</div>

<div className={styles.wrapper}>
<Menu items={menuItems} />

<ImageName {...{ name, isEditing }} />
</div>
</header>
);
}

export default Header;
26 changes: 26 additions & 0 deletions src/components/layout/Header/index.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.root {
overflow: hidden;
display: grid;
grid-template-columns: 5rem auto;
}

.wrapper {
display: grid;
grid-template-columns: 1fr auto 1fr;
}

.logoWrapper {
// border: solid 3px #f00;
height: 100%;
// width: 4rem;
position: relative;
}

.logo {
// border: solid 1px #f00;
max-width: 100%;
position: absolute;
top: 50%;
left: 0.5rem;
transform: rotateZ(-20deg) translateY(-50%);
}
Empty file added src/components/panels/.gitkeep
Empty file.
21 changes: 5 additions & 16 deletions src/components/ui/ColorStats/index.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
/* eslint no-unused-vars: [1, {"varsIgnorePattern": "[K|T]"}] */
import * as React from 'karet';
import * as U from 'karet.util';
import * as R from 'kefir.ramda';
import * as L from 'kefir.partial.lenses';
// import * as U from 'karet.util';
// import * as R from 'kefir.ramda';
// import * as L from 'kefir.partial.lenses';

import * as S from '../../../shared';
// import * as S from '../../../shared';

import * as T from './index.d';
import styles from './index.module.scss';
Expand All @@ -13,18 +13,7 @@ import styles from './index.module.scss';
* @param {T.Props} props
*/
function ColorStats({ data }) {
const pixels = U.thru(
data,
U.mapValue(
R.pipe(
R.splitEvery(4),
R.map(S.toHex),
L.counts(L.elems),
),
),
);

pixels.log('pixels');
data.log();

return <div className={styles.root}>stats</div>;
}
Expand Down
4 changes: 1 addition & 3 deletions src/components/ui/Palette/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@ function Palette({ name, items, currentColor }) {
<button
style={{ backgroundColor: it, color: H.yiqFor(it) }}
onClick={U.doSet(currentColor, i)}
>
{it}
</button>
/>
</li>
);
}),
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/Palette/index.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
display: grid;
grid-gap: 1px;
grid-auto-rows: 1.5rem;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);

button {
display: block;
Expand Down
1 change: 1 addition & 0 deletions src/core/state.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export interface ICanvasState {
export interface ICurrentFileState {
name: string;
createdAt: Date;
isEditing: boolean;
}

export interface IPalette {
Expand Down
3 changes: 2 additions & 1 deletion src/core/state.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* eslint no-unused-vars: [1, {"varsIgnorePattern": "[KT]"}] */
/* eslint no-unused-vars: [1, {"varsIgnorePattern": "[K|T]"}] */
/**
* @module state
* @namespace core
Expand All @@ -20,6 +20,7 @@ const initialState = {
currentFile: {
name: 'Untitled',
createdAt: new Date(),
isEditing: false,
},
color: {
currentColor: 0,
Expand Down
2 changes: 2 additions & 0 deletions src/meta.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export const selectedColorIn = U.view(

export const nameIn = U.view('name');

export const isEditingIn = U.view('isEditing');

//

export const wNumber = L.rewrite(n => parseInt(n, 10));
26 changes: 25 additions & 1 deletion src/settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,34 @@
* Settings related to undo/redo functinality
*/
export const history = {
maxCount: 10,
/**
* How many history entries should be retained
*/
maxCount: 20,

/**
* Should equal states be pushed into the history stack.
*
* N.B. This will count towards `maxCount`!
*/
pushEquals: false,

/**
* Debounce saving of history by this amount of milliseconds.
*/
replacePeriod: 200,
};

/**
* Settings related to the drawing canvas
*/
export const canvas = {
/**
* How many per-pixel color channels there are.
*
* Even though this is configurable, changing this will most likely
* break drawing, as `HTMLCanvasElement`s are forced to use four
* color channels per pixel.
*/
colorChannels: 4,
};

0 comments on commit 40fb374

Please sign in to comment.