Merge pull request #28 from cocopon/update-color-picker-layout

Update layout of color picker
cocopon · Jan 21, 2020 · 587746d · 587746d
2 parents 33f417c + 3cea2eb
commit 587746d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 24 deletions.
diff --git a/src/main/js/view/input/rgb-text.ts b/src/main/js/view/input/rgb-text.ts
@@ -12,7 +12,6 @@ interface Config {
 	value: InputValue<Color>;
 }
 
-const COMPONENT_LABELS: [string, string, string] = ['R', 'G', 'B'];
 const className = ClassName('rgbtxt', 'input');
 
 /**
@@ -34,26 +33,24 @@ export class RgbTextInputView extends View implements InputView<Color> {
 
 		this.element.classList.add(className());
 
-		const labelElems = COMPONENT_LABELS.map((text) => {
-			const elem = document.createElement('label');
-			elem.classList.add(className('l'));
-			elem.textContent = text;
-			return elem;
-		});
-		const inputElems = COMPONENT_LABELS.map(() => {
+		const labelElem = document.createElement('div');
+		labelElem.classList.add(className('l'));
+		labelElem.textContent = 'RGB';
+		this.element.appendChild(labelElem);
+
+		const wrapperElem = document.createElement('div');
+		wrapperElem.classList.add(className('w'));
+		this.element.appendChild(wrapperElem);
+
+		const inputElems = [0, 1, 2].map(() => {
 			const inputElem = document.createElement('input');
 			inputElem.classList.add(className('i'));
 			inputElem.type = 'text';
 			return inputElem;
 		});
-		COMPONENT_LABELS.forEach((_, index) => {
-			const elem = document.createElement('div');
-			elem.classList.add(className('w'));
-			elem.appendChild(labelElems[index]);
-			elem.appendChild(inputElems[index]);
-			this.element.appendChild(elem);
+		inputElems.forEach((elem) => {
+			wrapperElem.appendChild(elem);
 		});
-
 		this.inputElems_ = [inputElems[0], inputElems[1], inputElems[2]];
 
 		config.value.emitter.on('change', this.onValueChange_);

diff --git a/src/main/sass/components/input/_rgb-text.scss b/src/main/sass/components/input/_rgb-text.scss
@@ -1,25 +1,36 @@
 .#{$prefix}-rgbtxtiv {
 	display: flex;
 
-	&_w {
-		align-items: center;
-		display: flex;
-
-		& + & {
-			margin-left: 4px;
-		}
-	}
 	&_l {
 		color: var(--label-foreground-color);
 		display: inline;
 		line-height: $input-height;
-		margin-left: 4px;
 		margin-right: 8px;
 	}
+	&_w {
+		display: flex;
+	}
 	&_i {
 		@include inputView();
 
+		flex: 1;
 		padding: 0 4px;
 		width: 100%;
+
+		&:nth-child(1) {
+			border-bottom-right-radius: 0;
+			border-top-right-radius: 0;
+		}
+		&:nth-child(2) {
+			border-radius: 0;
+		}
+		&:nth-child(3) {
+			border-bottom-left-radius: 0;
+			border-top-left-radius: 0;
+		}
+
+		& + & {
+			margin-left: 1px;
+		}
 	}
 }