Merge pull request #2135 from BoostIO/improve-snippets-ui

Improve snippets ui

browser/main/modals/PreferencesModal/SnippetList.js

@@ -21,7 +21,10 @@ class SnippetList extends React.Component {
   }
 
   reloadSnippetList () {
-    dataApi.fetchSnippet().then(snippets => this.setState({snippets}))
+    dataApi.fetchSnippet().then(snippets => {
+      this.setState({snippets})
+      this.props.onSnippetSelect(snippets[0])
+    })
   }
 
   handleSnippetContextMenu (snippet) {
@@ -43,7 +46,7 @@ class SnippetList extends React.Component {
   }
 
   handleSnippetClick (snippet) {
-    this.props.onSnippetClick(snippet)
+    this.props.onSnippetSelect(snippet)
   }
 
   createSnippet () {
@@ -55,6 +58,16 @@ class SnippetList extends React.Component {
     }).catch(err => { throw err })
   }
 
+  defineSnippetStyleName (snippet) {
+    const { currentSnippet } = this.props
+    if (currentSnippet == null) return
+    if (currentSnippet.id === snippet.id) {
+      return 'snippet-item-selected'
+    } else {
+      return 'snippet-item'
+    }
+  }
+
   render () {
     const { snippets } = this.state
     return (
@@ -70,7 +83,7 @@ class SnippetList extends React.Component {
           {
             snippets.map((snippet) => (
               <li
-                styleName='snippet-item'
+                styleName={this.defineSnippetStyleName(snippet)}
                 key={snippet.id}
                 onContextMenu={() => this.handleSnippetContextMenu(snippet)}
                 onClick={() => this.handleSnippetClick(snippet)}>

browser/main/modals/PreferencesModal/SnippetTab.js

@@ -25,7 +25,7 @@ class SnippetTab extends React.Component {
     }, 500)
   }
 
-  handleSnippetClick (snippet) {
+  handleSnippetSelect (snippet) {
     const { currentSnippet } = this.state
     if (currentSnippet === null || currentSnippet.id !== snippet.id) {
       dataApi.fetchSnippet(snippet.id).then(changedSnippet => {
@@ -66,8 +66,9 @@ class SnippetTab extends React.Component {
       <div styleName='root'>
         <div styleName='header'>{i18n.__('Snippets')}</div>
         <SnippetList
-          onSnippetClick={this.handleSnippetClick.bind(this)}
+          onSnippetSelect={this.handleSnippetSelect.bind(this)}
-          onSnippetDeleted={this.handleDeleteSnippet.bind(this)} />
+          onSnippetDeleted={this.handleDeleteSnippet.bind(this)}
+          currentSnippet={currentSnippet} />
         <div styleName='snippet-detail' style={{visibility: currentSnippet ? 'visible' : 'hidden'}}>
           <div styleName='group-section'>
             <div styleName='group-section-label'>{i18n.__('Snippet name')}</div>

browser/main/modals/PreferencesModal/SnippetTab.styl

@@ -122,6 +122,10 @@
     &:hover
       background darken(#f5f5f5, 5)
 
+  .snippet-item-selected
+    @extend .snippet-list .snippet-item
+    background darken(#f5f5f5, 5)
+
 .snippet-detail
   width 70%
   height calc(100% - 200px)
@@ -142,6 +146,8 @@ body[data-theme="default"], body[data-theme="white"]
         background $ui-borderColor
       &:hover
         background darken($ui-backgroundColor, 5)
+    .snippet-item-selected
+      background darken($ui-backgroundColor, 5)
 
 body[data-theme="dark"]
   .snippets
@@ -152,8 +158,12 @@ body[data-theme="dark"]
         background $ui-dark-borderColor
       &:hover
         background darken($ui-dark-backgroundColor, 5)
+    .snippet-item-selected
+      background darken($ui-dark-backgroundColor, 5)
   .snippet-detail
     color white
+  .group-control-button
+    colorDarkPrimaryButton()
 
 body[data-theme="solarized-dark"]
   .snippets
@@ -164,8 +174,12 @@ body[data-theme="solarized-dark"]
         background $ui-solarized-dark-borderColor
       &:hover
         background darken($ui-solarized-dark-backgroundColor, 5)
+    .snippet-item-selected
+      background darken($ui-solarized-dark-backgroundColor, 5)
   .snippet-detail
     color white
+  .group-control-button
+    colorSolarizedDarkPrimaryButton()
 
 body[data-theme="monokai"]
   .snippets
@@ -176,5 +190,9 @@ body[data-theme="monokai"]
         background $ui-monokai-borderColor
       &:hover
         background darken($ui-monokai-backgroundColor, 5)
+    .snippet-item-selected
+      background darken($ui-monokai-backgroundColor, 5)
   .snippet-detail
     color white
+  .group-control-button
+    colorMonokaiPrimaryButton()