aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/views/InkingControl.scss8
-rw-r--r--src/client/views/InkingControl.tsx16
-rw-r--r--src/client/views/Main.scss10
-rw-r--r--src/client/views/MainView.tsx17
4 files changed, 23 insertions, 28 deletions
diff --git a/src/client/views/InkingControl.scss b/src/client/views/InkingControl.scss
index 2c53dc031..465e14d07 100644
--- a/src/client/views/InkingControl.scss
+++ b/src/client/views/InkingControl.scss
@@ -1,7 +1,5 @@
@import "globalCssVariables";
.inking-control {
- position: absolute;
- right: 0px;
bottom: 20px;
margin: 0;
padding: 0;
@@ -63,10 +61,9 @@
margin-top: 4px;
}
.ink-panel {
- margin: 6px 12px 6px 0;
- height: 30px;
+ height: 24px;
vertical-align: middle;
- line-height: 36px;
+ line-height: 28px;
padding: 0 10px;
color: $intermediate-color;
&:first {
@@ -114,7 +111,6 @@
border-radius: 11px;
width: 22px;
height: 22px;
- margin-top: 6px;
cursor: pointer;
text-align: center; // span {
// color: $light-color;
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index d1a6eb7fd..e7f0968af 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -57,16 +57,10 @@ export class InkingControl extends React.Component {
return this._selectedWidth;
}
- selected = (tool: InkTool) => {
- if (this._selectedTool === tool) {
- return { color: "#61aaa3" };
- }
- return {};
- }
-
@action
toggleDisplay = () => {
this._open = !this._open;
+ this.switchTool(this._open ? InkTool.Pen : InkTool.None);
}
@@ -78,14 +72,6 @@ export class InkingControl extends React.Component {
render() {
return (
<ul className="inking-control" style={this._open ? { display: "flex" } : { display: "none" }}>
- <li className="ink-tools ink-panel">
- <div className="ink-tool-buttons">
- <button onClick={() => this.switchTool(InkTool.Pen)} style={this.selected(InkTool.Pen)}><FontAwesomeIcon icon="pen" size="lg" title="Pen" /></button>
- <button onClick={() => this.switchTool(InkTool.Highlighter)} style={this.selected(InkTool.Highlighter)}><FontAwesomeIcon icon="highlighter" size="lg" title="Highlighter" /></button>
- <button onClick={() => this.switchTool(InkTool.Eraser)} style={this.selected(InkTool.Eraser)}><FontAwesomeIcon icon="eraser" size="lg" title="Eraser" /></button>
- <button onClick={() => this.switchTool(InkTool.None)} style={this.selected(InkTool.None)}><FontAwesomeIcon icon="ban" size="lg" title="Pointer" /></button>
- </div>
- </li>
<li className="ink-color ink-panel">
<label>COLOR: </label>
<div className="ink-color-display" style={{ backgroundColor: this._selectedColor }}
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 57a53c999..c3acd9790 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -133,7 +133,7 @@ button:hover {
bottom: 22px;
left: 24px;
- label {
+ > label {
background: $dark-color;
color: $light-color;
display: inline-block;
@@ -155,15 +155,15 @@ button:hover {
transform: scale(1.15);
}
- input {
+ > input {
display: none;
}
- input:not(:checked)~#add-options-content {
+ > input:not(:checked)~#add-options-content {
display: none;
}
- input:checked~label {
+ > input:checked~label {
transform: rotate(45deg);
transition: transform 0.5s;
cursor: pointer;
@@ -207,7 +207,7 @@ ul#add-options-list {
list-style: none;
padding: 5 0 0 0;
- li {
+ > li {
display: inline-block;
padding: 0;
}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 4b328f286..8a6790677 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -32,6 +32,8 @@ import { listSpec } from '../../new_fields/Schema';
import { Id } from '../../new_fields/FieldSymbols';
import { HistoryUtil } from '../util/History';
import { CollectionBaseView } from './collections/CollectionBaseView';
+import { InkTool } from '../../new_fields/InkField';
+import { InkingCanvas } from './InkingCanvas';
@observer
@@ -217,6 +219,14 @@ export class MainView extends React.Component {
</Measure>;
}
+ selected = (tool: InkTool) => {
+ if (!InkingControl.Instance || InkingControl.Instance.selectedTool === InkTool.None) return { display: "none" };
+ if (InkingControl.Instance.selectedTool === tool) {
+ return { color: "#61aaa3", fontSize: "50%" };
+ }
+ return { fontSize: "50%" };
+ }
+
/* for the expandable add nodes menu. Not included with the miscbuttons because once it expands it expands the whole div with it, making canvas interactions limited. */
nodesMenu() {
@@ -247,7 +257,11 @@ export class MainView extends React.Component {
<FontAwesomeIcon icon={btn[1]} size="sm" />
</button>
</div></li>)}
- <li key="ink"><button className="toolbar-button round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /></button></li>
+ <li key="ink" style={{ paddingRight: "6px" }}><button className="toolbar-button round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /> </button></li>
+ <li key="pen"><button onClick={() => InkingControl.Instance.switchTool(InkTool.Pen)} style={this.selected(InkTool.Pen)}><FontAwesomeIcon icon="pen" size="lg" title="Pen" /></button></li>
+ <li key="marker"><button onClick={() => InkingControl.Instance.switchTool(InkTool.Highlighter)} style={this.selected(InkTool.Highlighter)}><FontAwesomeIcon icon="highlighter" size="lg" title="Pen" /></button></li>
+ <li key="eraser"><button onClick={() => InkingControl.Instance.switchTool(InkTool.Eraser)} style={this.selected(InkTool.Eraser)}><FontAwesomeIcon icon="eraser" size="lg" title="Pen" /></button></li>
+ <li key="inkControls"><InkingControl /></li>
</ul>
</div>
</div >;
@@ -295,7 +309,6 @@ export class MainView extends React.Component {
<ContextMenu />
{this.nodesMenu()}
{this.miscButtons}
- <InkingControl />
<MainOverlayTextBox />
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 21:12:34 +0000