diff --git a/browser/main/modals/PreferencesModal/SnippetList.js b/browser/main/modals/PreferencesModal/SnippetList.js index 22e800f2..e2ba7708 100644 --- a/browser/main/modals/PreferencesModal/SnippetList.js +++ b/browser/main/modals/PreferencesModal/SnippetList.js @@ -58,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 ( @@ -73,7 +83,7 @@ class SnippetList extends React.Component { { snippets.map((snippet) => (
  • this.handleSnippetContextMenu(snippet)} onClick={() => this.handleSnippetClick(snippet)}> diff --git a/browser/main/modals/PreferencesModal/SnippetTab.js b/browser/main/modals/PreferencesModal/SnippetTab.js index ec2a872e..e35ecd69 100644 --- a/browser/main/modals/PreferencesModal/SnippetTab.js +++ b/browser/main/modals/PreferencesModal/SnippetTab.js @@ -67,7 +67,8 @@ class SnippetTab extends React.Component {
    {i18n.__('Snippets')}
    + onSnippetDeleted={this.handleDeleteSnippet.bind(this)} + currentSnippet={currentSnippet} />
    {i18n.__('Snippet name')}
    diff --git a/browser/main/modals/PreferencesModal/SnippetTab.styl b/browser/main/modals/PreferencesModal/SnippetTab.styl index fcd73b3e..02307b64 100644 --- a/browser/main/modals/PreferencesModal/SnippetTab.styl +++ b/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,6 +158,8 @@ 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 @@ -166,6 +174,8 @@ 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 @@ -180,6 +190,8 @@ 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