From 5c60da0f8f8e50c455f04101d1140ace6ac591d6 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Wed, 27 Jun 2018 15:59:14 +0900 Subject: [PATCH 1/3] apply style to each themes button --- browser/main/modals/PreferencesModal/SnippetTab.styl | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/browser/main/modals/PreferencesModal/SnippetTab.styl b/browser/main/modals/PreferencesModal/SnippetTab.styl index 118c56ed..fcd73b3e 100644 --- a/browser/main/modals/PreferencesModal/SnippetTab.styl +++ b/browser/main/modals/PreferencesModal/SnippetTab.styl @@ -154,6 +154,8 @@ body[data-theme="dark"] background darken($ui-dark-backgroundColor, 5) .snippet-detail color white + .group-control-button + colorDarkPrimaryButton() body[data-theme="solarized-dark"] .snippets @@ -166,6 +168,8 @@ body[data-theme="solarized-dark"] background darken($ui-solarized-dark-backgroundColor, 5) .snippet-detail color white + .group-control-button + colorSolarizedDarkPrimaryButton() body[data-theme="monokai"] .snippets @@ -178,3 +182,5 @@ body[data-theme="monokai"] background darken($ui-monokai-backgroundColor, 5) .snippet-detail color white + .group-control-button + colorMonokaiPrimaryButton() From c42b5c88066c76abc8646b5b40dae56931514c30 Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Wed, 27 Jun 2018 16:13:42 +0900 Subject: [PATCH 2/3] First snippet is selected when open Snippets tab --- browser/main/modals/PreferencesModal/SnippetList.js | 7 +++++-- browser/main/modals/PreferencesModal/SnippetTab.js | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/browser/main/modals/PreferencesModal/SnippetList.js b/browser/main/modals/PreferencesModal/SnippetList.js index 3cf28cf6..22e800f2 100644 --- a/browser/main/modals/PreferencesModal/SnippetList.js +++ b/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 () { diff --git a/browser/main/modals/PreferencesModal/SnippetTab.js b/browser/main/modals/PreferencesModal/SnippetTab.js index 67e9ace6..ec2a872e 100644 --- a/browser/main/modals/PreferencesModal/SnippetTab.js +++ b/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,7 +66,7 @@ class SnippetTab extends React.Component {
{i18n.__('Snippets')}
From 7414d52dc26be3a19a1fd41f2a8b6ca62f176d8b Mon Sep 17 00:00:00 2001 From: Sosuke Suzuki Date: Wed, 27 Jun 2018 16:27:55 +0900 Subject: [PATCH 3/3] selected snippet item background-color is darken --- browser/main/modals/PreferencesModal/SnippetList.js | 12 +++++++++++- browser/main/modals/PreferencesModal/SnippetTab.js | 3 ++- browser/main/modals/PreferencesModal/SnippetTab.styl | 12 ++++++++++++ 3 files changed, 25 insertions(+), 2 deletions(-) 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