Doodle palette, options, fill tool (#172)
This commit is contained in:
Ondřej Hruška
GitHub
parent
daa04c39b6
commit
531dadad86
@ -45,6 +45,8 @@ export const COMPOSE_UPLOAD_CHANGE_REQUEST = 'COMPOSE_UPLOAD_UPDATE_REQUEST'
|
||||
export const COMPOSE_UPLOAD_CHANGE_SUCCESS = 'COMPOSE_UPLOAD_UPDATE_SUCCESS';
|
||||
export const COMPOSE_UPLOAD_CHANGE_FAIL = 'COMPOSE_UPLOAD_UPDATE_FAIL';
|
||||
|
||||
export const COMPOSE_DOODLE_SET = 'COMPOSE_DOODLE_SET';
|
||||
|
||||
export function changeCompose(text) {
|
||||
return {
|
||||
type: COMPOSE_CHANGE,
|
||||
@ -158,6 +160,13 @@ export function submitComposeFail(error) {
|
||||
};
|
||||
};
|
||||
|
||||
export function doodleSet(options) {
|
||||
return {
|
||||
type: COMPOSE_DOODLE_SET,
|
||||
options: options,
|
||||
};
|
||||
};
|
||||
|
||||
export function uploadCompose(files) {
|
||||
return function (dispatch, getState) {
|
||||
if (getState().getIn(['compose', 'media_attachments']).size > 3) {
|
||||
|
||||
@ -22,6 +22,7 @@ export default class IconButton extends React.PureComponent {
|
||||
flip: PropTypes.bool,
|
||||
overlay: PropTypes.bool,
|
||||
tabIndex: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
@ -42,14 +43,18 @@ export default class IconButton extends React.PureComponent {
|
||||
}
|
||||
|
||||
render () {
|
||||
const style = {
|
||||
let style = {
|
||||
fontSize: `${this.props.size}px`,
|
||||
width: `${this.props.size * 1.28571429}px`,
|
||||
height: `${this.props.size * 1.28571429}px`,
|
||||
lineHeight: `${this.props.size}px`,
|
||||
...this.props.style,
|
||||
...(this.props.active ? this.props.activeStyle : {}),
|
||||
};
|
||||
if (!this.props.label) {
|
||||
style.width = `${this.props.size * 1.28571429}px`;
|
||||
} else {
|
||||
style.textAlign = 'left';
|
||||
}
|
||||
|
||||
const classes = ['icon-button'];
|
||||
|
||||
@ -102,6 +107,7 @@ export default class IconButton extends React.PureComponent {
|
||||
tabIndex={this.props.tabIndex}
|
||||
>
|
||||
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
|
||||
{this.props.label}
|
||||
</button>
|
||||
}
|
||||
</Motion>
|
||||
|
||||
@ -1,33 +1,15 @@
|
||||
import { connect } from 'react-redux';
|
||||
import DoodleButton from '../components/doodle_button';
|
||||
import { openModal } from '../../../actions/modal';
|
||||
import { uploadCompose } from '../../../actions/compose';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
|
||||
});
|
||||
|
||||
//https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f
|
||||
function dataURLtoFile(dataurl, filename) {
|
||||
let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
||||
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
||||
while(n--){
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
return new File([u8arr], filename, { type: mime });
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onOpenCanvas () {
|
||||
dispatch(openModal('DOODLE', {
|
||||
status,
|
||||
onDoodleSubmit: (b64data) => {
|
||||
dispatch(uploadCompose([dataURLtoFile(b64data, 'doodle.png')]));
|
||||
},
|
||||
}));
|
||||
dispatch(openModal('DOODLE', {}));
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(DoodleButton);
|
||||
|
||||
@ -3,55 +3,319 @@ import PropTypes from 'prop-types';
|
||||
import Button from '../../../components/button';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import Atrament from 'atrament'; // the doodling library
|
||||
import { connect } from 'react-redux';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { doodleSet, uploadCompose } from '../../../actions/compose';
|
||||
import IconButton from '../../../components/icon_button';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
// palette nicked from MyPaint, CC0
|
||||
const palette = [
|
||||
['rgb( 0, 0, 0)', 'Black'],
|
||||
['rgb( 38, 38, 38)', 'Gray 15'],
|
||||
['rgb( 77, 77, 77)', 'Grey 30'],
|
||||
['rgb(128, 128, 128)', 'Grey 50'],
|
||||
['rgb(171, 171, 171)', 'Grey 67'],
|
||||
['rgb(217, 217, 217)', 'Grey 85'],
|
||||
['rgb(255, 255, 255)', 'White'],
|
||||
['rgb(128, 0, 0)', 'Maroon'],
|
||||
['rgb(209, 0, 0)', 'English-red'],
|
||||
['rgb(255, 54, 34)', 'Tomato'],
|
||||
['rgb(252, 60, 3)', 'Orange-red'],
|
||||
['rgb(255, 140, 105)', 'Salmon'],
|
||||
['rgb(252, 232, 32)', 'Cadium-yellow'],
|
||||
['rgb(243, 253, 37)', 'Lemon yellow'],
|
||||
['rgb(121, 5, 35)', 'Dark crimson'],
|
||||
['rgb(169, 32, 62)', 'Deep carmine'],
|
||||
['rgb(255, 140, 0)', 'Orange'],
|
||||
['rgb(255, 168, 18)', 'Dark tangerine'],
|
||||
['rgb(217, 144, 88)', 'Persian orange'],
|
||||
['rgb(194, 178, 128)', 'Sand'],
|
||||
['rgb(255, 229, 180)', 'Peach'],
|
||||
['rgb(100, 54, 46)', 'Bole'],
|
||||
['rgb(108, 41, 52)', 'Dark cordovan'],
|
||||
['rgb(163, 65, 44)', 'Chestnut'],
|
||||
['rgb(228, 136, 100)', 'Dark salmon'],
|
||||
['rgb(255, 195, 143)', 'Apricot'],
|
||||
['rgb(255, 219, 188)', 'Unbleached silk'],
|
||||
['rgb(242, 227, 198)', 'Straw'],
|
||||
['rgb( 53, 19, 13)', 'Bistre'],
|
||||
['rgb( 84, 42, 14)', 'Dark chocolate'],
|
||||
['rgb(102, 51, 43)', 'Burnt sienna'],
|
||||
['rgb(184, 66, 0)', 'Sienna'],
|
||||
['rgb(216, 153, 12)', 'Yellow ochre'],
|
||||
['rgb(210, 180, 140)', 'Tan'],
|
||||
['rgb(232, 204, 144)', 'Dark wheat'],
|
||||
['rgb( 0, 49, 83)', 'Prussian blue'],
|
||||
['rgb( 48, 69, 119)', 'Dark grey blue'],
|
||||
['rgb( 0, 71, 171)', 'Cobalt blue'],
|
||||
['rgb( 31, 117, 254)', 'Blue'],
|
||||
['rgb(120, 180, 255)', 'Bright french blue'],
|
||||
['rgb(171, 200, 255)', 'Bright steel blue'],
|
||||
['rgb(208, 231, 255)', 'Ice blue'],
|
||||
['rgb( 30, 51, 58)', 'Medium jungle green'],
|
||||
['rgb( 47, 79, 79)', 'Dark slate grey'],
|
||||
['rgb( 74, 104, 93)', 'Dark grullo green'],
|
||||
['rgb( 0, 128, 128)', 'Teal'],
|
||||
['rgb( 67, 170, 176)', 'Turquoise'],
|
||||
['rgb(109, 174, 199)', 'Cerulean frost'],
|
||||
['rgb(173, 217, 186)', 'Tiffany green'],
|
||||
['rgb( 22, 34, 29)', 'Gray-asparagus'],
|
||||
['rgb( 36, 48, 45)', 'Medium dark teal'],
|
||||
['rgb( 74, 104, 93)', 'Xanadu'],
|
||||
['rgb(119, 198, 121)', 'Mint'],
|
||||
['rgb(175, 205, 182)', 'Timberwolf'],
|
||||
['rgb(185, 245, 246)', 'Celeste'],
|
||||
['rgb(193, 255, 234)', 'Aquamarine'],
|
||||
['rgb( 29, 52, 35)', 'Cal Poly Pomona'],
|
||||
['rgb( 1, 68, 33)', 'Forest green'],
|
||||
['rgb( 42, 128, 0)', 'Napier green'],
|
||||
['rgb(128, 128, 0)', 'Olive'],
|
||||
['rgb( 65, 156, 105)', 'Sea green'],
|
||||
['rgb(189, 246, 29)', 'Green-yellow'],
|
||||
['rgb(231, 244, 134)', 'Bright chartreuse'],
|
||||
['rgb(138, 23, 137)', 'Purple'],
|
||||
['rgb( 78, 39, 138)', 'Violet'],
|
||||
['rgb(193, 75, 110)', 'Dark thulian pink'],
|
||||
['rgb(222, 49, 99)', 'Cerise'],
|
||||
['rgb(255, 20, 147)', 'Deep pink'],
|
||||
['rgb(255, 102, 204)', 'Rose pink'],
|
||||
['rgb(255, 203, 219)', 'Pink'],
|
||||
['rgb(255, 255, 255)', 'White'],
|
||||
['rgb(229, 17, 1)', 'RGB Red'],
|
||||
['rgb( 0, 255, 0)', 'RGB Green'],
|
||||
['rgb( 0, 0, 255)', 'RGB Blue'],
|
||||
['rgb( 0, 255, 255)', 'CMYK Cyan'],
|
||||
['rgb(255, 0, 255)', 'CMYK Magenta'],
|
||||
['rgb(255, 255, 0)', 'CMYK Yellow'],
|
||||
];
|
||||
|
||||
// re-arrange to the right order for display
|
||||
let palReordered = [];
|
||||
for (let row = 0; row < 7; row++) {
|
||||
for (let col = 0; col < 11; col++) {
|
||||
palReordered.push(palette[col * 7 + row]);
|
||||
}
|
||||
palReordered.push(null); // null indicates a <br />
|
||||
}
|
||||
|
||||
// Utility for converting base64 image to binary for upload
|
||||
// https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f
|
||||
function dataURLtoFile(dataurl, filename) {
|
||||
let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
||||
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
||||
while(n--){
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
return new File([u8arr], filename, { type: mime });
|
||||
}
|
||||
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
options: state.getIn(['compose', 'doodle']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
setOpt: (opts) => dispatch(doodleSet(opts)),
|
||||
submit: (file) => dispatch(uploadCompose([file])),
|
||||
});
|
||||
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
export default class DoodleModal extends ImmutablePureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
static propTypes = {
|
||||
options: ImmutablePropTypes.map,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
setOpt: PropTypes.func.isRequired,
|
||||
submit: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
onDoodleSubmit: PropTypes.func.isRequired, // gets the base64 as argument
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
//region Option getters/setters
|
||||
|
||||
get fg () {
|
||||
return this.props.options.get('fg');
|
||||
}
|
||||
|
||||
set fg (value) {
|
||||
this.props.setOpt({ fg: value });
|
||||
}
|
||||
|
||||
get bg () {
|
||||
return this.props.options.get('bg');
|
||||
}
|
||||
|
||||
set bg (value) {
|
||||
this.props.setOpt({ bg: value });
|
||||
}
|
||||
|
||||
get mode () {
|
||||
return this.props.options.get('mode');
|
||||
}
|
||||
|
||||
set mode (value) {
|
||||
this.props.setOpt({ mode: value });
|
||||
}
|
||||
|
||||
get weight () {
|
||||
return this.props.options.get('weight');
|
||||
}
|
||||
|
||||
set weight (value) {
|
||||
this.props.setOpt({ weight: value });
|
||||
}
|
||||
|
||||
get opacity () {
|
||||
return this.props.options.get('opacity');
|
||||
}
|
||||
|
||||
set opacity (value) {
|
||||
this.props.setOpt({ opacity: value });
|
||||
}
|
||||
|
||||
get adaptiveStroke () {
|
||||
return this.props.options.get('adaptiveStroke');
|
||||
}
|
||||
|
||||
set adaptiveStroke (value) {
|
||||
this.props.setOpt({ adaptiveStroke: value });
|
||||
}
|
||||
|
||||
get smoothing () {
|
||||
return this.props.options.get('smoothing');
|
||||
}
|
||||
|
||||
set smoothing (value) {
|
||||
this.props.setOpt({ smoothing: value });
|
||||
}
|
||||
|
||||
//endregion
|
||||
|
||||
handleKeyUp = (e) => {
|
||||
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||||
e.preventDefault();
|
||||
this.clearScreen();
|
||||
}
|
||||
}
|
||||
|
||||
clearScreen () {
|
||||
this.sketcher.context.fillStyle = 'white';
|
||||
this.sketcher.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
}
|
||||
if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
this.undo();
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
window.addEventListener('keyup', this.handleKeyUp, false);
|
||||
};
|
||||
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener('keyup', this.handleKeyUp, false);
|
||||
}
|
||||
|
||||
clearScreen = () => {
|
||||
this.sketcher.context.fillStyle = this.bg;
|
||||
this.sketcher.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
this.undos = [];
|
||||
|
||||
this.doSaveUndo();
|
||||
};
|
||||
|
||||
handleDone = () => {
|
||||
this.props.onDoodleSubmit(this.sketcher.toImage());
|
||||
const dataUrl = this.sketcher.toImage();
|
||||
const file = dataURLtoFile(dataUrl, 'doodle.png');
|
||||
this.props.submit(file);
|
||||
|
||||
this.sketcher.destroy();
|
||||
this.props.onClose();
|
||||
};
|
||||
|
||||
updateSketcherSettings () {
|
||||
if (!this.sketcher) return;
|
||||
|
||||
this.sketcher.color = this.fg;
|
||||
this.sketcher.opacity = this.opacity;
|
||||
this.sketcher.weight = this.weight;
|
||||
this.sketcher.mode = this.mode;
|
||||
this.sketcher.smoothing = this.smoothing;
|
||||
this.sketcher.adaptiveStroke = this.adaptiveStroke;
|
||||
}
|
||||
|
||||
initSketcher (elem) {
|
||||
this.sketcher = new Atrament(elem, 500, 500);
|
||||
|
||||
this.mode = 'draw'; // Reset mode - it's confusing if left at 'fill'
|
||||
|
||||
this.updateSketcherSettings();
|
||||
this.clearScreen();
|
||||
}
|
||||
|
||||
setCanvasRef = (elem) => {
|
||||
this.canvas = elem;
|
||||
if (elem) {
|
||||
this.sketcher = new Atrament(elem, 500, 500, 'black');
|
||||
elem.addEventListener('dirty', () => {
|
||||
this.saveUndo();
|
||||
this.sketcher._dirty = false;
|
||||
});
|
||||
elem.addEventListener('click', () => {
|
||||
// sketcher bug - does not fire dirty on fill
|
||||
if (this.mode === 'fill') {
|
||||
this.saveUndo();
|
||||
}
|
||||
});
|
||||
|
||||
this.clearScreen();
|
||||
|
||||
// .smoothing looks good with mouse but works really poorly with a tablet
|
||||
this.sketcher.smoothing = false;
|
||||
|
||||
// There's a bunch of options we should add UI controls for later
|
||||
// ref: https://github.com/jakubfiala/atrament.js
|
||||
this.initSketcher(elem);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onPaletteClick = (e) => {
|
||||
this.fg = e.target.dataset.color;
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
setModeDraw = (e) => {
|
||||
this.mode = 'draw';
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
setModeFill = (e) => {
|
||||
this.mode = 'fill';
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
tglSmooth = (e) => {
|
||||
this.smoothing = !this.smoothing;
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
tglAdaptive = (e) => {
|
||||
this.adaptiveStroke = !this.adaptiveStroke;
|
||||
e.target.blur();
|
||||
};
|
||||
|
||||
setWeight = (e) => {
|
||||
this.weight = +e.target.value || 1;
|
||||
};
|
||||
|
||||
undo = () => {
|
||||
if (this.undos.length > 1) {
|
||||
this.undos.pop();
|
||||
const buf = this.undos.pop();
|
||||
|
||||
this.sketcher.clear();
|
||||
this.sketcher.context.putImageData(buf, 0, 0);
|
||||
this.doSaveUndo();
|
||||
}
|
||||
};
|
||||
|
||||
doSaveUndo = () => {
|
||||
this.undos.push(this.sketcher.context.getImageData(0, 0, this.canvas.width, this.canvas.height));
|
||||
};
|
||||
|
||||
saveUndo = debounce(() => {
|
||||
this.doSaveUndo();
|
||||
}, 100);
|
||||
|
||||
render () {
|
||||
this.updateSketcherSettings();
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal doodle-modal'>
|
||||
<div className='doodle-modal__container'>
|
||||
@ -60,6 +324,49 @@ export default class DoodleModal extends ImmutablePureComponent {
|
||||
|
||||
<div className='doodle-modal__action-bar'>
|
||||
<Button text='Done' onClick={this.handleDone} />
|
||||
<div className='filler' />
|
||||
<div className='doodle-toolbar with-inputs'>
|
||||
<div>
|
||||
<label htmlFor='dd_smoothing'>Smoothing</label>
|
||||
<span className='val'>
|
||||
<input type='checkbox' id='dd_smoothing' onChange={this.tglSmooth} checked={this.smoothing} />
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor='dd_adaptive'>Adaptive</label>
|
||||
<span className='val'>
|
||||
<input type='checkbox' id='dd_adaptive' onChange={this.tglAdaptive} checked={this.adaptiveStroke} />
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor='dd_weight'>Weight</label>
|
||||
<span className='val'>
|
||||
<input type='number' min={1} id='dd_weight' value={this.weight} onChange={this.setWeight} />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='doodle-toolbar'>
|
||||
<IconButton icon='pencil' label='Draw' onClick={this.setModeDraw} size={18} active={this.mode === 'draw'} inverted />
|
||||
<IconButton icon='bath' label='Fill' onClick={this.setModeFill} size={18} active={this.mode === 'fill'} inverted />
|
||||
<IconButton icon='undo' label='Undo' onClick={this.undo} size={18} inverted />
|
||||
<IconButton icon='trash' label='Clear' onClick={this.clearScreen} size={18} inverted />
|
||||
</div>
|
||||
<div className='doodle-palette'>
|
||||
{
|
||||
palReordered.map((c, i) =>
|
||||
c === null ?
|
||||
<br key={i} /> :
|
||||
<button
|
||||
key={i}
|
||||
style={{ backgroundColor: c[0] }}
|
||||
onClick={this.onPaletteClick}
|
||||
data-color={c[0]}
|
||||
title={c[1]}
|
||||
className={this.fg === c[0] ? 'selected' : ''}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -26,6 +26,7 @@ import {
|
||||
COMPOSE_UPLOAD_CHANGE_REQUEST,
|
||||
COMPOSE_UPLOAD_CHANGE_SUCCESS,
|
||||
COMPOSE_UPLOAD_CHANGE_FAIL,
|
||||
COMPOSE_DOODLE_SET,
|
||||
COMPOSE_RESET,
|
||||
} from '../actions/compose';
|
||||
import { TIMELINE_DELETE } from '../actions/timelines';
|
||||
@ -61,6 +62,15 @@ const initialState = ImmutableMap({
|
||||
default_sensitive: false,
|
||||
resetFileKey: Math.floor((Math.random() * 0x10000)),
|
||||
idempotencyKey: null,
|
||||
doodle: ImmutableMap({
|
||||
fg: 'rgb( 0, 0, 0)',
|
||||
bg: 'rgb(255, 255, 255)',
|
||||
mode: 'draw',
|
||||
weight: 2,
|
||||
opacity: 1,
|
||||
adaptiveStroke: true,
|
||||
smoothing: false,
|
||||
}),
|
||||
});
|
||||
|
||||
function statusToTextMentions(state, status) {
|
||||
@ -288,6 +298,8 @@ export default function compose(state = initialState, action) {
|
||||
|
||||
return item;
|
||||
}));
|
||||
case COMPOSE_DOODLE_SET:
|
||||
return state.mergeIn(['doodle'], action.options);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
||||
@ -3874,7 +3874,6 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.boost-modal,
|
||||
.doodle-modal,
|
||||
.confirmation-modal,
|
||||
.report-modal,
|
||||
.actions-modal,
|
||||
@ -3893,10 +3892,6 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
}
|
||||
|
||||
.doodle-modal {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.actions-modal {
|
||||
.status {
|
||||
background: $white;
|
||||
@ -3920,7 +3915,6 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
}
|
||||
|
||||
.doodle-modal__action-bar,
|
||||
.boost-modal__action-bar,
|
||||
.confirmation-modal__action-bar,
|
||||
.mute-modal__action-bar,
|
||||
@ -4785,3 +4779,5 @@ noscript {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import 'doodle';
|
||||
|
||||
70
app/javascript/styles/doodle.scss
Normal file
70
app/javascript/styles/doodle.scss
Normal file
@ -0,0 +1,70 @@
|
||||
.doodle-modal {
|
||||
@extend .boost-modal;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.doodle-modal__container {
|
||||
line-height: 0; // remove weird gap under canvas
|
||||
canvas {
|
||||
border: 5px solid #d9e1e8;
|
||||
}
|
||||
}
|
||||
|
||||
.doodle-modal__action-bar {
|
||||
@extend .boost-modal__action-bar;
|
||||
|
||||
.filler {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.doodle-toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 0;
|
||||
justify-content: space-around;
|
||||
|
||||
&.with-inputs {
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
text-align: right;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type="number"],input[type="text"] {
|
||||
width: 40px;
|
||||
}
|
||||
span.val {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doodle-palette {
|
||||
padding-right: 0 !important;
|
||||
border: 1px solid black;
|
||||
line-height: .2rem;
|
||||
flex-grow: 0;
|
||||
background: white;
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0; padding: 0;
|
||||
text-align: center;
|
||||
color: black;
|
||||
text-shadow: 0 0 1px white;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 1px rgba(white, .5);
|
||||
border: 1px solid black;
|
||||
|
||||
&.selected {
|
||||
outline-offset:-1px;
|
||||
outline: 1px dotted white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user