fix: profile menu style

bus-stop · Feb 16, 2020 · ac13e41 · ac13e41
1 parent fbf2b6a
commit ac13e41
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 26 deletions.
diff --git a/dist/lib/x-terminal.js b/dist/lib/x-terminal.js
diff --git a/dist/lib/x-terminal.js.map b/dist/lib/x-terminal.js.map
diff --git a/src/lib/profile-menu-element.js b/src/lib/profile-menu-element.js
@@ -366,19 +366,30 @@ class XTerminalProfileMenuElementImpl extends HTMLElement {
 	}
 
 	createColor (id, labelTitle, labelDescription, defaultValue, initialValue) {
-		const menuItemContainer = this.createMenuItemContainer(
-			id,
-			labelTitle,
-			labelDescription,
-		)
+		const menuItemContainer = document.createElement('div')
+		menuItemContainer.classList.add('x-terminal-profile-menu-item')
+		menuItemContainer.setAttribute('id', id)
+		const menuItemLabel = document.createElement('label')
+		menuItemLabel.classList.add('x-terminal-profile-menu-item-label')
+		menuItemLabel.classList.add('x-terminal-profile-menu-item-label-color')
 		const color = document.createElement('input')
 		color.setAttribute('type', 'color')
 		color.classList.add('x-terminal-profile-menu-item-color')
 		color.value = this.toHex(defaultValue)
 		if (initialValue !== undefined) {
 			color.value = this.toHex(initialValue)
 		}
-		menuItemContainer.appendChild(color)
+		menuItemLabel.appendChild(color)
+		const titleDiv = document.createElement('div')
+		titleDiv.classList.add('x-terminal-profile-menu-item-title')
+		titleDiv.appendChild(document.createTextNode(labelTitle))
+		menuItemLabel.appendChild(titleDiv)
+		menuItemContainer.appendChild(menuItemLabel)
+		const descriptionDiv = document.createElement('div')
+		descriptionDiv.classList.add('x-terminal-profile-menu-item-description')
+		descriptionDiv.classList.add('x-terminal-profile-menu-item-description-color')
+		descriptionDiv.appendChild(document.createTextNode(labelDescription))
+		menuItemContainer.appendChild(descriptionDiv)
 		return menuItemContainer
 	}
 

diff --git a/styles/x-terminal.less b/styles/x-terminal.less
@@ -114,17 +114,22 @@ x-terminal-profile {
 
 .x-terminal-profile-menu-item-label-checkbox {
   padding-left: 2.25em;
+  margin-top: -20px;
 
   .x-terminal-profile-menu-item-checkbox {
     width: 15px;
     height: 15px;
     margin-left: -2.25em;
     vertical-align: bottom;
     position: relative;
-    top: 10px;
+    top: 20px;
   }
 }
 
+.x-terminal-profile-menu-item-description-checkbox {
+  padding-left: 2.25em;
+}
+
 .x-terminal-profile-menu-item-title {
   font-size: 1.2em;
   -webkit-user-select: none;
@@ -140,10 +145,6 @@ x-terminal-profile {
   }
 }
 
-.x-terminal-profile-menu-item-description-checkbox {
-  padding-left: 2.25em;
-}
-
 .x-terminal-profile-menu-item-select {
   color: @text-color;
   border-color: @button-border-color;
@@ -161,23 +162,44 @@ x-terminal-profile {
   }
 }
 
-.x-terminal-profile-menu-item-color {
-  color: @text-color;
-  border-color: @button-border-color;
-  background-color: @button-background-color;
-  height: 2em;
-  width: 100%;
-  font-size: 1.25em;
-  padding-top: 0;
-  padding-bottom: 0;
+.x-terminal-profile-menu-item-label-color {
+  padding-left: 5em;
+  margin-top: -20px;
 
-  &:hover,
-  &:focus {
-    box-shadow: none;
-    background-color: @button-background-color-hover;
+  .x-terminal-profile-menu-item-color {
+    color: @text-color;
+    border-color: @button-border-color;
+    background-color: @button-background-color;
+    width: 4em;
+    margin-left: -5em;
+    padding: 0;
+    vertical-align: bottom;
+    position: relative;
+    top: 20px;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 2px;
+      margin: 0;
+      border-radius: inherit;
+    }
+
+    &::-webkit-color-swatch {
+      border-radius: 2px;
+      border: 1px solid hsla(0, 0%, 0%, 0.1);
+    }
+
+    &:hover,
+    &:focus {
+      box-shadow: none;
+      background-color: @button-background-color-hover;
+    }
   }
 }
 
+.x-terminal-profile-menu-item-description-color {
+  padding-left: 5em;
+}
+
 .x-terminal-profile-menu-buttons-div {
   padding-top: 1em;
 }