smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Allow color picker to be placed on top if needed

Browse source
This commit is contained in:
Guillermo Peralta Scura 2020-01-05 22:16:23 -03:00
parent f360c3cb33
commit 150994f4b5
2 changed files with 47 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/index.tsx
View file

@ -999,6 +999,7 @@ type AppState = {
scrollX: number; scrollX: number;
scrollY: number; scrollY: number;
name: string; name: string;
colorPickerPosition: "top" | "bottom";
}; };
const KEYS = { const KEYS = {
@ -1191,6 +1192,12 @@ function getSelectedBackgroundColor() {
return backgroundColors.length === 1 ? backgroundColors[0] : null; return backgroundColors.length === 1 ? backgroundColors[0] : null;
} }
function getColorPickerPosition(y: number) {
// The SketchPicker has a height of 300 px. We determine
// if it should be rendered on top of the button or below it.
return window.innerHeight - y < 300 ? "top" : "bottom";
}
const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5; const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
const ELEMENT_TRANSLATE_AMOUNT = 1; const ELEMENT_TRANSLATE_AMOUNT = 1;
@ -1226,7 +1233,8 @@ class App extends React.Component<{}, AppState> {
viewBackgroundColor: "#ffffff", viewBackgroundColor: "#ffffff",
scrollX: 0, scrollX: 0,
scrollY: 0, scrollY: 0,
name: DEFAULT_PROJECT_NAME name: DEFAULT_PROJECT_NAME,
colorPickerPosition: "bottom"
}; };
private onResize = () => { private onResize = () => {
@ -1478,24 +1486,28 @@ class App extends React.Component<{}, AppState> {
<h4>Canvas</h4> <h4>Canvas</h4>
<div className="panelColumn"> <div className="panelColumn">
<h5>Canvas Background Color</h5> <h5>Canvas Background Color</h5>
<div> <div className="swatch-container">
<button <button
className="swatch" className="swatch"
style={{ style={{
backgroundColor: this.state.viewBackgroundColor backgroundColor: this.state.viewBackgroundColor
}} }}
onClick={() => onClick={e => {
const y = e.clientY;
this.setState(s => ({ this.setState(s => ({
currentColorPicker: currentColorPicker:
s.currentColorPicker === ColorPicker.CANVAS_BACKGROUND s.currentColorPicker === ColorPicker.CANVAS_BACKGROUND
? null ? null
: ColorPicker.CANVAS_BACKGROUND : ColorPicker.CANVAS_BACKGROUND,
})) colorPickerPosition: getColorPickerPosition(y)
} }));
}}
/> />
{this.state.currentColorPicker === {this.state.currentColorPicker ===
ColorPicker.CANVAS_BACKGROUND ? ( ColorPicker.CANVAS_BACKGROUND ? (
<div className="popover"> <div
className={`popover popover-${this.state.colorPickerPosition}`}
>
<div <div
className="cover" className="cover"
onClick={() => this.setState({ currentColorPicker: null })} onClick={() => this.setState({ currentColorPicker: null })}
@ -1573,7 +1585,7 @@ class App extends React.Component<{}, AppState> {
<h4>Colors</h4> <h4>Colors</h4>
<div className="panelColumn"> <div className="panelColumn">
<h5>Shape Stroke Color</h5> <h5>Shape Stroke Color</h5>
<div> <div className="swatch-container">
<button <button
className="swatch" className="swatch"
style={{ style={{
@ -1581,18 +1593,22 @@ class App extends React.Component<{}, AppState> {
getSelectedStrokeColor() || getSelectedStrokeColor() ||
this.state.currentItemStrokeColor this.state.currentItemStrokeColor
}} }}
onClick={() => onClick={e => {
const y = e.clientY;
this.setState(s => ({ this.setState(s => ({
currentColorPicker: currentColorPicker:
s.currentColorPicker === ColorPicker.SHAPE_STROKE s.currentColorPicker === ColorPicker.SHAPE_STROKE
? null ? null
: ColorPicker.SHAPE_STROKE : ColorPicker.SHAPE_STROKE,
})) colorPickerPosition: getColorPickerPosition(y)
} }));
}}
/> />
{this.state.currentColorPicker === {this.state.currentColorPicker ===
ColorPicker.SHAPE_STROKE && ( ColorPicker.SHAPE_STROKE && (
<div className="popover"> <div
className={`popover popover-${this.state.colorPickerPosition}`}
>
<div <div
className="cover" className="cover"
onClick={() => onClick={() =>
@ -1620,7 +1636,7 @@ class App extends React.Component<{}, AppState> {
{someElementIsSelectedIsRectangleOrEllipseOrDiamond() && ( {someElementIsSelectedIsRectangleOrEllipseOrDiamond() && (
<div className="panelColumn"> <div className="panelColumn">
<h5>Shape Background Color</h5> <h5>Shape Background Color</h5>
<div> <div className="swatch-container">
<button <button
className="swatch" className="swatch"
style={{ style={{
@ -1628,19 +1644,23 @@ class App extends React.Component<{}, AppState> {
getSelectedBackgroundColor() || getSelectedBackgroundColor() ||
this.state.currentItemBackgroundColor this.state.currentItemBackgroundColor
}} }}
onClick={() => onClick={e => {
const y = e.clientY;
this.setState(s => ({ this.setState(s => ({
currentColorPicker: currentColorPicker:
s.currentColorPicker === s.currentColorPicker ===
ColorPicker.SHAPE_BACKGROUND ColorPicker.SHAPE_BACKGROUND
? null ? null
: ColorPicker.SHAPE_BACKGROUND : ColorPicker.SHAPE_BACKGROUND,
})) colorPickerPosition: getColorPickerPosition(y)
} }));
}}
/> />
{this.state.currentColorPicker === {this.state.currentColorPicker ===
ColorPicker.SHAPE_BACKGROUND ? ( ColorPicker.SHAPE_BACKGROUND ? (
<div className="popover"> <div
className={`popover popover-${this.state.colorPickerPosition}`}
>
<div <div
className="cover" className="cover"
onClick={() => onClick={() =>

8
src/styles.scss
View file

@ -163,6 +163,14 @@ button {
} }
} }
.popover-top {
top: -300px;
}
.swatch-container {
position: relative;
}
.swatch { .swatch {
height: 24px; height: 24px;
width: 24px; width: 24px;