Merge pull request #181 from cocopon/improve-appearance

Improve appearance
cocopon · Mar 6, 2021 · 7191dba · 7191dba
2 parents 778490c + 744b304
commit 7191dba
Show file tree

Hide file tree

Showing 17 changed files with 166 additions and 102 deletions.
diff --git a/lib/plugin/common/dom-util.ts b/lib/plugin/common/dom-util.ts
@@ -42,13 +42,15 @@ export function getCanvasContext(
 	return isBrowser() ? canvasElement.getContext('2d') : null;
 }
 
-type IconId = 'p2dpad';
-
-const ICON_ID_TO_INNER_HTML_MAP: {[key in IconId]: string} = {
+const ICON_ID_TO_INNER_HTML_MAP: {[key in string]: string} = {
+	check: '<path d="M2 8l4 4l8 -8"/>',
+	dropdown: '<path d="M5 7h6l-3 3 z"/>',
 	p2dpad:
-		'<path d="M8 2V14" stroke="currentColor" stroke-width="1.5"/><path d="M2 8H14" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="8" r="2" fill="currentColor"/>',
+		'<path d="M8 4v8"/><path d="M4 8h8"/><circle cx="12" cy="12" r="1.2"/>',
 };
 
+type IconId = keyof typeof ICON_ID_TO_INNER_HTML_MAP;
+
 export function createSvgIconElement(
 	document: Document,
 	iconId: IconId,

diff --git a/lib/plugin/input-bindings/boolean/view.ts b/lib/plugin/input-bindings/boolean/view.ts
@@ -1,3 +1,4 @@
+import {createSvgIconElement} from '../../common/dom-util';
 import {Value} from '../../common/model/value';
 import {ClassName} from '../../common/view/class-name';
 import {ValueView} from '../../common/view/value';
@@ -32,9 +33,12 @@ export class CheckboxView implements ValueView<boolean> {
 		labelElem.appendChild(inputElem);
 		this.inputElement = inputElem;
 
-		const markElem = doc.createElement('div');
-		markElem.classList.add(className('m'));
-		labelElem.appendChild(markElem);
+		const wrapperElem = doc.createElement('div');
+		wrapperElem.classList.add(className('w'));
+		labelElem.appendChild(wrapperElem);
+
+		const markElem = createSvgIconElement(doc, 'check');
+		wrapperElem.appendChild(markElem);
 
 		config.value.emitter.on('change', this.onValueChange_);
 		this.value = config.value;

diff --git a/lib/plugin/input-bindings/color/view/color-text.ts b/lib/plugin/input-bindings/color/view/color-text.ts
@@ -1,4 +1,5 @@
 import {createNumberFormatter} from '../../../common/converter/number';
+import {createSvgIconElement} from '../../../common/dom-util';
 import {Value} from '../../../common/model/value';
 import {ClassName} from '../../../common/view/class-name';
 import {ValueView} from '../../../common/view/value';
@@ -60,6 +61,7 @@ export class ColorTextView implements ValueView<Color> {
 
 		const modeMarkerElem = doc.createElement('div');
 		modeMarkerElem.classList.add(className('mm'));
+		modeMarkerElem.appendChild(createSvgIconElement(doc, 'dropdown'));
 		modeElem.appendChild(modeMarkerElem);
 
 		this.element.appendChild(modeElem);

diff --git a/lib/plugin/input-bindings/number/controller/slider.ts b/lib/plugin/input-bindings/number/controller/slider.ts
@@ -64,12 +64,12 @@ export class SliderController implements ValueController<number> {
 			value: this.value,
 		});
 
-		this.ptHandler_ = new PointerHandler(this.view.outerElement);
+		this.ptHandler_ = new PointerHandler(this.view.trackElement);
 		this.ptHandler_.emitter.on('down', this.onPointerDown_);
 		this.ptHandler_.emitter.on('move', this.onPointerMove_);
 		this.ptHandler_.emitter.on('up', this.onPointerUp_);
 
-		this.view.outerElement.addEventListener('keydown', this.onKeyDown_);
+		this.view.trackElement.addEventListener('keydown', this.onKeyDown_);
 	}
 
 	private handlePointerEvent_(d: PointerData): void {

diff --git a/lib/plugin/input-bindings/number/view/slider.ts b/lib/plugin/input-bindings/number/view/slider.ts
@@ -16,8 +16,8 @@ const className = ClassName('sld');
  */
 export class SliderView implements ValueView<number> {
 	public readonly element: HTMLElement;
-	public readonly innerElement: HTMLDivElement;
-	public readonly outerElement: HTMLDivElement;
+	public readonly knobElement: HTMLDivElement;
+	public readonly trackElement: HTMLDivElement;
 	public readonly value: Value<number>;
 	private maxValue_: number;
 	private minValue_: number;
@@ -31,16 +31,16 @@ export class SliderView implements ValueView<number> {
 		this.element = doc.createElement('div');
 		this.element.classList.add(className());
 
-		const outerElem = doc.createElement('div');
-		outerElem.classList.add(className('o'));
-		outerElem.tabIndex = 0;
-		this.element.appendChild(outerElem);
-		this.outerElement = outerElem;
+		const trackElem = doc.createElement('div');
+		trackElem.classList.add(className('t'));
+		trackElem.tabIndex = 0;
+		this.element.appendChild(trackElem);
+		this.trackElement = trackElem;
 
-		const innerElem = doc.createElement('div');
-		innerElem.classList.add(className('i'));
-		this.outerElement.appendChild(innerElem);
-		this.innerElement = innerElem;
+		const knobElem = doc.createElement('div');
+		knobElem.classList.add(className('k'));
+		this.trackElement.appendChild(knobElem);
+		this.knobElement = knobElem;
 
 		config.value.emitter.on('change', this.onValueChange_);
 		this.value = config.value;
@@ -54,7 +54,7 @@ export class SliderView implements ValueView<number> {
 			0,
 			100,
 		);
-		this.innerElement.style.width = `${p}%`;
+		this.knobElement.style.width = `${p}%`;
 	}
 
 	private onValueChange_(): void {

diff --git a/lib/plugin/monitor-bindings/common/view/list.ts b/lib/plugin/monitor-bindings/common/view/list.ts
@@ -1,4 +1,5 @@
 import {ListItem} from '../../../common/constraint/list';
+import {createSvgIconElement} from '../../../common/dom-util';
 import {Value} from '../../../common/model/value';
 import {ClassName} from '../../../common/view/class-name';
 import {ValueView} from '../../../common/view/value';
@@ -42,6 +43,7 @@ export class ListView<T> implements ValueView<T> {
 
 		const markElem = doc.createElement('div');
 		markElem.classList.add(className('m'));
+		markElem.appendChild(createSvgIconElement(doc, 'dropdown'));
 		this.element.appendChild(markElem);
 
 		config.value.emitter.on('change', this.onValueChange_);

diff --git a/lib/sass/view/_checkbox.scss b/lib/sass/view/_checkbox.scss
@@ -11,7 +11,7 @@
 		position: absolute;
 		top: 0;
 	}
-	&_m {
+	&_w {
 		background-color: var(--input-background-color);
 		border-radius: $inner-border-radius;
 		cursor: pointer;
@@ -20,29 +20,35 @@
 		position: relative;
 		width: var(--unit-size);
 
-		&::before {
-			background-color: var(--input-foreground-color);
-			border-radius: $inner-border-radius;
-			bottom: 4px;
-			content: '';
+		svg {
+			bottom: 0;
 			display: block;
-			left: 4px;
+			height: 16px;
+			left: 0;
+			margin: auto;
 			opacity: 0;
 			position: absolute;
-			right: 4px;
-			top: 4px;
+			right: 0;
+			top: 0;
+			width: 16px;
+
+			path {
+				fill: none;
+				stroke: var(--input-foreground-color);
+				stroke-width: 2;
+			}
 		}
 	}
-	&_i:hover + &_m {
+	&_i:hover + &_w {
 		background-color: var(--input-background-color-hover);
 	}
-	&_i:focus + &_m {
+	&_i:focus + &_w {
 		background-color: var(--input-background-color-focus);
 	}
-	&_i:active + &_m {
+	&_i:active + &_w {
 		background-color: var(--input-background-color-active);
 	}
-	&_i:checked + &_m::before {
+	&_i:checked + &_w svg {
 		opacity: 1;
 	}
 }
diff --git a/lib/sass/view/_color-text.scss b/lib/sass/view/_color-text.scss
@@ -3,8 +3,9 @@
 	width: 100%;
 
 	&_m {
+		@extend %list;
+
 		margin-right: 4px;
-		position: relative;
 	}
 	&_ms {
 		@extend %resetUserAgent;
@@ -27,13 +28,9 @@
 		}
 	}
 	&_mm {
-		@include list_arrow(var(--label-foreground-color), 6px);
+		@extend %list_arrow;
 
-		bottom: 0;
-		margin: auto;
-		position: absolute;
-		right: 6px;
-		top: 3px;
+		color: var(--label-foreground-color);
 	}
 	&_w {
 		@extend %texts;

diff --git a/lib/sass/view/_graph-log.scss b/lib/sass/view/_graph-log.scss
@@ -1,4 +1,5 @@
 .#{$prefix}-grlv {
+	overflow: hidden;
 	position: relative;
 
 	&_g {

diff --git a/lib/sass/view/_list.scss b/lib/sass/view/_list.scss
@@ -1,19 +1,15 @@
 .#{$prefix}-lstv {
-	position: relative;
+	@extend %list;
 
 	&_s {
-		@extend %button;
+		@extend %list_select;
 
-		padding: 0 (6px * 2 + 6px) 0 4px;
+		padding: 0 (16px + 2px * 2) 0 4px;
 		width: 100%;
 	}
 	&_m {
-		@include list_arrow(var(--button-foreground-color), 6px);
+		@extend %list_arrow;
 
-		bottom: 0;
-		margin: auto;
-		position: absolute;
-		right: 6px;
-		top: 3px;
+		color: var(--button-foreground-color);
 	}
 }
diff --git a/lib/sass/view/_point-2d-pad-text.scss b/lib/sass/view/_point-2d-pad-text.scss
@@ -18,6 +18,14 @@
 			position: absolute;
 			top: 50%;
 			width: 16px;
+
+			path {
+				stroke: currentColor;
+				stroke-width: 2;
+			}
+			circle {
+				fill: currentColor;
+			}
 		}
 	}
 	&_p {

diff --git a/lib/sass/view/_root.scss b/lib/sass/view/_root.scss
@@ -4,7 +4,7 @@
 
 %themeVariables {
 	$base-hue: 230;
-	$color-exdark: hsl($base-hue, 7%, 16%);
+	$color-exdark: hsl($base-hue, 7%, 0%);
 	$color-dark: hsl($base-hue, 7%, 20%);
 	$color-light: hsl($base-hue, 7%, 70%);
 	$color-exlight: hsl($base-hue, 7%, 80%);
@@ -56,14 +56,14 @@
 	@include themeVariable('input-background-color-focus', rgba($fg-color, 0.2));
 	@include themeVariable('input-background-color-hover', rgba($fg-color, 0.15));
 	@include themeVariable('input-foreground-color', $fg-color);
-	@include themeVariable('input-guide-color', rgba($bg-color, 0.5));
+	@include themeVariable('input-guide-color', rgba($color-exdark, 0.2));
 
 	@include themeVariable('label-foreground-color', rgba($fg-color, 0.7));
 
-	@include themeVariable('monitor-background-color', $color-exdark);
+	@include themeVariable('monitor-background-color', rgba($color-exdark, 0.2));
 	@include themeVariable('monitor-foreground-color', rgba($fg-color, 0.7));
 
-	@include themeVariable('separator-color', $color-exdark);
+	@include themeVariable('separator-color', rgba($color-exdark, 0.2));
 }
 
 .#{$prefix}-rotv {
@@ -85,6 +85,8 @@
 		border-bottom-right-radius: $outer-border-radius;
 		border-top-left-radius: $outer-border-radius;
 		border-top-right-radius: $outer-border-radius;
+		padding-right: (4px + 24px);
+		text-align: center;
 	}
 	&#{&}-expanded &_t {
 		border-bottom-left-radius: 0;

diff --git a/lib/sass/view/_slider.scss b/lib/sass/view/_slider.scss
@@ -1,5 +1,5 @@
 .#{$prefix}-sldv {
-	&_o {
+	&_t {
 		box-sizing: border-box;
 		cursor: pointer;
 		height: var(--unit-size);
@@ -21,33 +21,48 @@
 			top: 0;
 		}
 	}
-	&_i {
+	&_k {
 		height: 100%;
 		left: 0;
 		position: absolute;
 		top: 0;
 
 		&::before {
+			background-color: var(--input-foreground-color);
+			border-radius: 1px;
+			bottom: 0;
+			content: '';
+			display: block;
+			height: 2px;
+			left: 0;
+			margin-bottom: auto;
+			margin-top: auto;
+			position: absolute;
+			right: 0;
+			top: 0;
+		}
+		&::after {
 			background-color: var(--button-background-color);
 			border-radius: $inner-border-radius;
 			bottom: 0;
 			content: '';
 			display: block;
 			height: $slider-knob-size;
-			margin: auto;
+			margin-bottom: auto;
+			margin-top: auto;
 			position: absolute;
 			right: -$slider-knob-size / 2;
 			top: 0;
 			width: $slider-knob-size;
 		}
 	}
-	&_o:hover &_i::before {
+	&_t:hover &_k::after {
 		background-color: var(--button-background-color-hover);
 	}
-	&_o:focus &_i::before {
+	&_t:focus &_k::after {
 		background-color: var(--button-background-color-focus);
 	}
-	&_o:active &_i::before {
+	&_t:active &_k::after {
 		background-color: var(--button-background-color-active);
 	}
 }

diff --git a/lib/sass/view/common/_list.scss b/lib/sass/view/common/_list.scss
@@ -1,9 +1,32 @@
-@mixin list_arrow($color, $size) {
-	border-color: $color transparent transparent;
-	border-style: solid;
-	border-width: $size / 2;
-	box-sizing: border-box;
-	height: $size;
-	pointer-events: none;
-	width: $size;
+%list {
+	position: relative;
+}
+
+%list_select {
+	@extend %button;
+
+	padding: 0 (16px + 2px * 2) 0 4px;
+	width: 100%;
+}
+
+%list_arrow {
+	bottom: 0;
+	margin: auto;
+	position: absolute;
+	right: 2px;
+	top: 0;
+
+	svg {
+		bottom: 0;
+		height: 16px;
+		margin: auto;
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 16px;
+
+		path {
+			fill: currentColor;
+		}
+	}
 }