Dropdown updates (#585)

* Add dropdown icons

* remove cursor pointer from icons

components/BackgroundSelect.js

@@ -47,42 +47,39 @@ class BackgroundSelect extends React.Component {
   }
 
   render() {
-    let background = this.props.color
-    background =
-      typeof background === 'string'
-        ? background
+    const { color, mode, image, onChange, aspectRatio } = this.props
+    const { isVisible, mounted } = this.state
+
+    let background =
+      typeof color === 'string'
+        ? color
             .replace(/&/g, '&')
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;')
             .replace(/"/g, '&quot;')
             .replace(/'/g, '&#x27;')
             .replace(/\//g, '&#x2F;')
-        : background
+        : color
 
     if (!validateColor(background)) {
       background = DEFAULT_BG_COLOR
     }
 
-    const { mode, image } = this.props
-
     return (
       <div className="bg-select-container">
-        <div className="bg-select-display">
-          <div className="bg-select-label">
-            <span>BG</span>
-          </div>
+        <div className={`bg-select-display ${isVisible ? 'is-visible' : ''}`}>
           <div className="bg-color-container" onClick={this.toggle}>
             <div className="bg-color-alpha" />
             <div className="bg-color" />
           </div>
         </div>
-        <div className="bg-select-pickers" hidden={!this.state.isVisible}>
+        <div className="bg-select-pickers" hidden={!isVisible}>
           <WindowPointer fromLeft="15px" />
           <div className="picker-tabs">
             {['color', 'image'].map(tab => (
               <div
                 key={tab}
-                className={`picker-tab ${this.props.mode === tab ? 'active' : ''}`}
+                className={`picker-tab ${mode === tab ? 'active' : ''}`}
                 onClick={this.selectTab.bind(null, tab)}
               >
                 {capitalizeFirstLetter(tab)}
@@ -90,17 +87,11 @@ class BackgroundSelect extends React.Component {
             ))}
           </div>
           <div className="picker-tabs-contents">
-            <div style={this.props.mode === 'color' ? {} : { display: 'none' }}>
-              {this.state.mounted && (
-                <SketchPicker color={this.props.color} onChangeComplete={this.handlePickColor} />
-              )}
+            <div style={mode === 'color' ? {} : { display: 'none' }}>
+              {mounted && <SketchPicker color={color} onChangeComplete={this.handlePickColor} />}
             </div>
-            <div style={this.props.mode === 'image' ? {} : { display: 'none' }}>
-              <ImagePicker
-                onChange={this.props.onChange}
-                imageDataURL={this.props.image}
-                aspectRatio={this.props.aspectRatio}
-              />
+            <div style={mode === 'image' ? {} : { display: 'none' }}>
+              <ImagePicker onChange={onChange} imageDataURL={image} aspectRatio={aspectRatio} />
             </div>
           </div>
         </div>
@@ -114,20 +105,13 @@ class BackgroundSelect extends React.Component {
               display: flex;
               overflow: hidden;
               height: 100%;
-              width: 72px;
+              width: 40px;
               border: 1px solid ${COLORS.SECONDARY};
               border-radius: 3px;
             }
 
-            .bg-select-label {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              user-select: none;
-              cursor: default;
-              height: 100%;
-              padding: 0 8px;
-              border-right: 1px solid ${COLORS.SECONDARY};
+            .bg-select-display.is-visible {
+              border-width: 2px;
             }
 
             .bg-color-container {
@@ -185,9 +169,8 @@ class BackgroundSelect extends React.Component {
             .bg-select-pickers {
               position: absolute;
               width: 222px;
-              margin-left: 36px;
               margin-top: 12px;
-              border: 1px solid ${COLORS.SECONDARY};
+              border: 2px solid ${COLORS.SECONDARY};
               border-radius: 3px;
               background: #1a1a1a;
             }

components/Dropdown.js

@@ -58,7 +58,7 @@ class Dropdown extends React.PureComponent {
   userInputtedValue = ''
 
   render() {
-    const { color, selected, onChange, itemWrapper } = this.props
+    const { color, selected, onChange, itemWrapper, icon } = this.props
     const { itemsToShow, inputValue } = this.state
 
     const minWidth = calcMinWidth(itemsToShow)
@@ -72,13 +72,20 @@ class Dropdown extends React.PureComponent {
         onChange={onChange}
         onUserAction={this.onUserAction}
       >
-        {renderDropdown({ color, list: itemsToShow, selected, minWidth, itemWrapper })}
+        {renderDropdown({
+          color,
+          list: itemsToShow,
+          selected,
+          minWidth,
+          itemWrapper,
+          icon
+        })}
       </Downshift>
     )
   }
 }
 
-const renderDropdown = ({ color, list, minWidth, itemWrapper }) => ({
+const renderDropdown = ({ color, list, minWidth, itemWrapper, icon }) => ({
   isOpen,
   highlightedIndex,
   selectedItem,
@@ -89,11 +96,13 @@ const renderDropdown = ({ color, list, minWidth, itemWrapper }) => ({
 }) => {
   return (
     <DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth}>
+      <DropdownIcon isOpen={isOpen}>{icon}</DropdownIcon>
       <SelectedItem
         getToggleButtonProps={getToggleButtonProps}
         getInputProps={getInputProps}
         isOpen={isOpen}
         color={color}
+        hasIcon={!!icon}
       >
         {selectedItem.name}
       </SelectedItem>
@@ -126,9 +135,11 @@ const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
       <style jsx>
         {`
           .dropdown-container {
+            position: relative;
             min-width: ${minWidth}px;
             cursor: pointer;
             user-select: none;
+            margin-left: 40px;
           }
         `}
       </style>
@@ -136,7 +147,43 @@ const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => {
   )
 }
 
-const SelectedItem = ({ getToggleButtonProps, getInputProps, children, isOpen, color }) => {
+const DropdownIcon = ({ children, isOpen }) => {
+  if (children) {
+    return (
+      <div className="dropdown-icon">
+        {children}
+        <style jsx>
+          {`
+            .dropdown-icon {
+              position: absolute;
+              left: -40px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              width: 40px;
+              height: 40px;
+              border: ${isOpen ? 2 : 1}px solid white;
+              border-right: none;
+              border-radius: 3px 0 0 3px;
+              cursor: initial;
+            }
+          `}
+        </style>
+      </div>
+    )
+  } else {
+    return null
+  }
+}
+
+const SelectedItem = ({
+  getToggleButtonProps,
+  getInputProps,
+  children,
+  isOpen,
+  color,
+  hasIcon
+}) => {
   const itemColor = color || COLORS.SECONDARY
 
   return (
@@ -157,10 +204,9 @@ const SelectedItem = ({ getToggleButtonProps, getInputProps, children, isOpen, c
           .dropdown-display {
             display: flex;
             align-items: center;
-            height: 100%;
+            height: 40px;
             border: 1px solid ${itemColor};
-            border-radius: 3px;
-            padding: 8px 16px;
+            border-radius: ${hasIcon ? '0 3px 3px 0' : '3px'};
             outline: none;
           }
           .dropdown-display:hover {
@@ -168,12 +214,13 @@ const SelectedItem = ({ getToggleButtonProps, getInputProps, children, isOpen, c
           }
 
           .dropdown-display.is-open {
-            border-radius: 3px 3px 0 0;
+            border-radius: ${hasIcon ? '0 3px 0 0' : '3px 3px 0 0'};
             border-width: 2px;
           }
 
           .dropdown-display-text {
             flex-grow: 1;
+            padding: 0 16px;
             color: ${itemColor};
             background: transparent;
             border: none;
@@ -181,6 +228,11 @@ const SelectedItem = ({ getToggleButtonProps, getInputProps, children, isOpen, c
             font-size: inherit;
             font-family: inherit;
           }
+
+          .dropdown-arrow {
+            padding: 0 16px;
+          }
+
           .is-open > .dropdown-arrow {
             transform: rotate(180deg);
           }

components/Editor.js

@@ -35,6 +35,8 @@ import {
 } from '../lib/constants'
 import { serializeState, getQueryStringState } from '../lib/routing'
 import { getState, escapeHtml, unescapeHtml } from '../lib/util'
+import LanguageIcon from './svg/Language'
+import ThemeIcon from './svg/Theme'
 
 class Editor extends React.Component {
   constructor(props) {
@@ -296,11 +298,13 @@ class Editor extends React.Component {
         <div className="editor">
           <Toolbar>
             <Dropdown
+              icon={<ThemeIcon />}
               selected={THEMES_HASH[theme] || DEFAULT_THEME}
               list={THEMES}
               onChange={this.updateTheme}
             />
             <Dropdown
+              icon={<LanguageIcon />}
               selected={
                 LANGUAGE_NAME_HASH[language] ||
                 LANGUAGE_MIME_HASH[language] ||

components/Settings.js

@@ -139,7 +139,7 @@ class Settings extends React.PureComponent {
               display: flex;
               position: relative;
               height: 100%;
-              width: 37px;
+              width: 40px;
               align-items: center;
               justify-content: center;
               border-radius: 3px;
@@ -161,6 +161,10 @@ class Settings extends React.PureComponent {
               cursor: pointer;
             }
 
+            .settings-display.is-visible {
+              border-width: 2px;
+            }
+
             .settings-display:hover {
               background: ${COLORS.HOVER};
             }
@@ -174,7 +178,7 @@ class Settings extends React.PureComponent {
               position: absolute;
               top: 52px;
               left: 0;
-              border: 1px solid ${COLORS.SECONDARY};
+              border: 2px solid ${COLORS.SECONDARY};
               width: 184px;
               border-radius: 3px;
               background: ${COLORS.BLACK};

components/svg/Language.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path
+      d="M8 0.6875H7.97539C6.02773 0.694531 4.19961 1.45742 2.82148 2.83555C1.44687 4.21719 0.6875 6.04883 0.6875 8C0.6875 9.95117 1.44688 11.7828 2.825 13.1645C4.19961 14.5426 6.03125 15.3055 7.97891 15.3125H8.00352C12.0359 15.3125 15.316 12.0324 15.316 8C15.316 3.96758 12.0324 0.6875 8 0.6875ZM14.3352 7.50781H11.607C11.5754 6.56914 11.4594 5.67266 11.2625 4.82891C11.8637 4.63555 12.4473 4.38945 13.0098 4.09063C13.7832 5.08203 14.2402 6.25625 14.3352 7.50781ZM7.50781 7.50781H5.33516C5.36328 6.64648 5.46875 5.83086 5.64453 5.07852C6.25625 5.21562 6.87852 5.3 7.50781 5.32812V7.50781ZM7.50781 8.49219V10.6684C6.88203 10.6965 6.25625 10.7809 5.64453 10.918C5.46875 10.1656 5.36328 9.35 5.33516 8.49219H7.50781ZM8.49219 8.49219H10.6473C10.6191 9.35 10.5137 10.1656 10.3379 10.9145C9.7332 10.7773 9.11445 10.6965 8.49219 10.6684V8.49219ZM8.49219 7.50781V5.32812C9.11797 5.3 9.73672 5.21562 10.3379 5.08203C10.5137 5.83437 10.6191 6.64648 10.6473 7.50781H8.49219ZM12.3383 3.36289C11.9059 3.57734 11.4594 3.76016 11.0023 3.90781C10.7527 3.15547 10.4363 2.50508 10.0707 1.9918C10.9145 2.28359 11.6844 2.75117 12.3383 3.36289ZM10.0742 4.16094C9.55742 4.27344 9.02656 4.34375 8.49219 4.37188V1.79141C9.08984 2.11484 9.67344 2.9832 10.0742 4.16094ZM7.50781 1.77734V4.36836C6.96641 4.34023 6.43203 4.26992 5.9082 4.15391C6.31602 2.96563 6.90664 2.09727 7.50781 1.77734ZM5.90469 2.00234C5.54258 2.51211 5.22969 3.15898 4.98008 3.9043C4.53008 3.75664 4.08711 3.57383 3.66172 3.36289C4.30859 2.75469 5.07148 2.29063 5.90469 2.00234ZM2.99023 4.09414C3.5457 4.38945 4.12578 4.63555 4.71992 4.82539C4.51953 5.66563 4.40352 6.56562 4.37539 7.5043H1.66836C1.75977 6.25977 2.2168 5.08555 2.99023 4.09414ZM1.66484 8.49219H4.37188C4.40352 9.43086 4.51953 10.3309 4.71641 11.1711C4.12227 11.3645 3.54219 11.6105 2.98672 11.9023C2.2168 10.9145 1.75977 9.74023 1.66484 8.49219ZM3.6582 12.6371C4.08359 12.4262 4.52656 12.2434 4.98008 12.0957C5.22969 12.8445 5.54258 13.4879 5.90469 14.0012C5.07148 13.7059 4.30859 13.2453 3.6582 12.6371ZM5.9082 11.8426C6.43203 11.7266 6.96992 11.6562 7.50781 11.6281V14.2227C6.90312 13.9027 6.31602 13.0309 5.9082 11.8426ZM8.49219 14.2086V11.6246C9.02656 11.6527 9.55742 11.723 10.0742 11.8355C9.67344 13.0168 9.08984 13.8852 8.49219 14.2086ZM10.0742 14.0082C10.4398 13.4949 10.7563 12.8445 11.0059 12.0922C11.4629 12.2398 11.9129 12.4262 12.3418 12.6406C11.6879 13.2488 10.9145 13.7164 10.0742 14.0082ZM13.0098 11.9059C12.4473 11.607 11.8637 11.3609 11.2625 11.1676C11.4594 10.3273 11.5754 9.43086 11.607 8.49219H14.3352C14.2402 9.74023 13.7867 10.9145 13.0098 11.9059Z"
+      fill="white"
+    />
+  </svg>
+)

components/svg/Theme.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <path
+      d="M13.1206 10.2309C12.8886 10.0164 12.5476 9.96367 12.2558 9.91445C11.8515 9.84766 11.6968 9.77383 11.4612 9.56289C10.9585 9.11641 10.9585 8.46953 11.4612 8.02305L12.5265 7.07734C14.1577 5.63594 14.1577 3.27344 12.5265 1.83203C11.3241 0.773828 9.71045 0.25 8.0335 0.25C6.07529 0.25 4.0292 0.963672 2.45068 2.36289C-0.484863 4.95742 -0.484863 9.20781 2.45068 11.8023C3.90967 13.0926 5.87842 13.7359 7.82607 13.75H7.88584C9.8335 13.75 11.753 13.1207 13.1171 11.9078C13.6233 11.4613 13.539 10.6211 13.1206 10.2309ZM2.21865 5.59375C2.21865 4.97148 2.72139 4.46875 3.34365 4.46875C3.96592 4.46875 4.46865 4.97148 4.46865 5.59375C4.46865 6.21602 3.96592 6.71875 3.34365 6.71875C2.72139 6.71875 2.21865 6.21602 2.21865 5.59375ZM3.6249 10.0234C3.00264 10.0234 2.4999 9.5207 2.4999 8.89844C2.4999 8.27617 3.00264 7.77344 3.6249 7.77344C4.24717 7.77344 4.7499 8.27617 4.7499 8.89844C4.7499 9.5207 4.24717 10.0234 3.6249 10.0234ZM5.8749 4.36328C5.25264 4.36328 4.7499 3.86055 4.7499 3.23828C4.7499 2.61602 5.25264 2.11328 5.8749 2.11328C6.49717 2.11328 6.9999 2.61602 6.9999 3.23828C6.9999 3.86055 6.49717 4.36328 5.8749 4.36328ZM8.40615 12.0625C7.47451 12.0625 6.71865 11.3066 6.71865 10.375C6.71865 9.44336 7.47451 8.6875 8.40615 8.6875C9.33779 8.6875 10.0937 9.44336 10.0937 10.375C10.0937 11.3066 9.33779 12.0625 8.40615 12.0625ZM9.2499 4.75C8.62764 4.75 8.1249 4.24727 8.1249 3.625C8.1249 3.00273 8.62764 2.5 9.2499 2.5C9.87217 2.5 10.3749 3.00273 10.3749 3.625C10.3749 4.24727 9.87217 4.75 9.2499 4.75Z"
+      fill="white"
+    />
+  </svg>
+)