Skip to content

Design update at v0.8.8 #424

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 50 commits into from
Apr 15, 2017
Merged

Design update at v0.8.8 #424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
313e8b8
Fix the dark theme layout of Sidebar and NoteList
Apr 6, 2017
d45033a
Change the font-size at NoteList
Apr 6, 2017
0a89dcc
Change the font-size at SideNav
Apr 6, 2017
573d3ce
Fix the layout on NoteList
Apr 6, 2017
c1051af
Change the SideNav layout
Apr 6, 2017
af6cd10
Change the layout at SideNav
Apr 7, 2017
a27d819
Change the white theme layout of NoteList
Apr 7, 2017
62d39e6
Change the StorageList layout
Apr 7, 2017
657d69a
Fix the dark theme layout at NoteList
Apr 7, 2017
64d53c6
Fix the tag layout of dark theme at NoteList
Apr 7, 2017
11ab5c7
Fix the tag layout of white theme at NoteList
Apr 7, 2017
7b4ff99
Change the note-title-icon position at NoteList
Apr 7, 2017
041a51a
Fix the tag layout of dark theme at NoteDetail
Apr 7, 2017
7a9c495
Fix the tag layout of white theme at NoteDetail
Apr 7, 2017
6b135af
Change the font-size at FolderSelect
Apr 7, 2017
116e27e
Fix the textarea layout at Snippet note
Apr 7, 2017
1341810
Fix the create folder modal layout at white theme
Apr 8, 2017
a36c620
Fix the create folder modal layout at dark theme
Apr 8, 2017
8996ebb
Fix the make note modal layout at dark theme
Apr 8, 2017
64cf34e
Fix the make note modal layout at white theme
Apr 8, 2017
31eb9ca
Fix the dark layout at NoteList
Apr 8, 2017
6b29aed
Fix the search modal layout
Apr 8, 2017
97441cc
Fix the box-shadow
Apr 8, 2017
28ef1e6
Fix the rename folder modal layout
Apr 8, 2017
c5076e4
Change the star background-color when hover
Apr 8, 2017
58f5035
Change the star background-color when hover at NoteDetail
Apr 8, 2017
d092e75
Delete the border line at Statusbar
Apr 10, 2017
658a90b
Fix the layout at NoteItem
Apr 10, 2017
1b58e32
Change the font color at dark theme
Apr 10, 2017
32bd6d7
Change the All Notes icon at SideNavFilter
Apr 12, 2017
e251ec6
Fix the layout of SideNavFilter
Apr 12, 2017
233ab17
Change the default background-color of ui-btn at white theme
Apr 12, 2017
54c2d7b
Delete the border-line at Statusbar
Apr 12, 2017
c4be052
Change the info at infoModal
Apr 12, 2017
4ada755
Change the info at InfoTag modal
Apr 12, 2017
adeb45a
Fix the storage-btn layout at SideNav
Apr 12, 2017
41d65e4
Change the border-width at folder list
Apr 13, 2017
c510c2e
Change the add-storage-btn at setting modal
Apr 13, 2017
e103605
Change the border-left at setting modal
Apr 13, 2017
29dc3bd
Fix the layout of nav-btn at setting modal
Apr 13, 2017
a6f5452
Change the button color at setting modal
Apr 13, 2017
39baade
Fix hover/active layout at NoteItem
Apr 14, 2017
97b42d6
Fix the hover/active layout at NoteItem in white theme
Apr 14, 2017
2df12b6
Fix the hover layout at NoteNavFilter in white theme
Apr 14, 2017
7891d14
Fix the hover/active layout at NoteItemSimple
Apr 14, 2017
614506c
Fix the hover/active layout at menubar in white theme
Apr 14, 2017
0f31112
Fix the layout of NoteItem at SideNav
Apr 14, 2017
09cf94d
Fix to outline:none
Apr 14, 2017
343e35b
Fix the select-btn layout at setting modal in white theme
Apr 14, 2017
6ce6a70
Fix typo
Apr 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 10 additions & 13 deletions browser/components/NoteItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import styles from './NoteItem.styl'
*/
const TagElement = ({ tagName }) => (
<span styleName='item-bottom-tagList-item' key={tagName}>
{tagName}
#{tagName}
</span>
)

Expand Down Expand Up @@ -52,32 +52,29 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
>
<div styleName='item-wrapper'>
<div styleName='item-bottom-time'>{dateDisplay}</div>

{note.type === 'SNIPPET_NOTE'
? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
: <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
}
<div styleName='item-title'>
{note.title.trim().length > 0
? note.title
: <span styleName='item-title-empty'>Empty</span>
}
</div>

<div styleName='item-bottom-time'>{dateDisplay}</div>
{note.isStarred
? <i styleName='item-star' className='fa fa-star' /> : ''
}
<div styleName='item-bottom'>
<div styleName='item-bottom-tagList'>
{note.tags.length > 0
? TagElementList(note.tags)
: ''
: <span styleName='item-bottom-tagList-empty' />
}
</div>
</div>

{note.type === 'SNIPPET_NOTE'
? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
: <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
}

{note.isStarred
? <i styleName='item-star' className='fa fa-star' /> : ''
}
</div>
</div>
)
Expand Down
126 changes: 66 additions & 60 deletions browser/components/NoteItem.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,63 +7,64 @@ $control-height = 30px

.item
position relative
padding 0 25px
padding 0 20px
user-select none
cursor pointer
background-color $ui-noteList-backgroundColor
transition background-color 0.15s
transition background-color 0.2s
&:hover
background-color alpha($ui-active-color, 20%)
&:active
background-color $ui-active-color
color white
background-color alpha($ui-button--active-backgroundColor, 40%)
.item-title
.item-title-empty
.item-bottom-tagList-empty
.item-title-icon
.item-bottom-time
.item-bottom-tagList-item
transition 0.15s
color $ui-text-color
&:active
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-title
.item-title-icon
color white
.item-bottom-time
.item-bottom-tagList-item
background-color transparent
color white
transition 0.15s
color $ui-text-color

.item-wrapper
padding 20px 0
padding 15px 0
border-bottom $ui-border

.item--active
@extend .item
background-color $ui-active-color
color white
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-title
.item-title-empty
.item-bottom-tagList-empty
.item-bottom-time
.item-title-icon
color white
color $ui-text-color
.item-bottom-tagList-item
background-color transparent
color white
color $ui-text-color
.item-wrapper
border-color transparent
&:hover
background-color $ui-active-color
background-color $ui-button--active-backgroundColor

.item-title-icon
position relative
font-size 12px
color $ui-inactive-text-color

.item-title
font-size 14px
height 40px
box-sizing border-box
line-height 24px
padding-top 5px
padding-bottom 20px
font-size 13px
position relative
top -12px
left 20px
padding-right 15px
padding-bottom 4px
overflow ellipsis
color $ui-text-color

.item-title-icon
position absolute
top 20px
right 25px
font-size 14px
color $ui-inactive-text-color

.item-title-empty
Expand All @@ -84,37 +85,33 @@ $control-height = 30px
flex 1
overflow ellipsis
line-height 20px
color #FFFFFF
padding-left 2px

.item-bottom-tagList-item
font-size 12px
font-size 10px
margin-right 8px
padding 0 10px
padding 0
height 20px
box-sizing border-box
border-radius 20px
vertical-align middle
background-color $ui-tag-backgroundColor
color #FFFFFF

.item-bottom-tagList-empty
background-color transparent
color $ui-inactive-text-color
vertical-align middle
font-size 10px
margin-left 5px

.item-bottom-time
color $ui-inactive-text-color
font-size 12px
font-size 10px
padding-left 2px
padding-bottom 2px

.item-star
position absolute
top 20px
right 29px
top 19px
left 5px
width 34px
height 34px
color $ui-favorite-star-button-color
font-size 14px
font-size 12px
padding 0
border-radius 17px

Expand All @@ -127,41 +124,50 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&:active
background-color $ui-active-color
background-color $ui-dark-button--active-backgroundColor
.item-title
.item-title-icon
.item-bottom-time
.item-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color
&:hover
background-color alpha($ui-active-color, 20%)

background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.item-title
.item-title-icon
.item-bottom-time
.item-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color

.item-wrapper
border-color $ui-dark-borderColor

.item--active
@extend .item
border-color $ui-dark-borderColor
background-color $ui-active-color
background-color $ui-dark-button--active-backgroundColor
.item-wrapper
border-color transparent
.item-title
color white
.item-title-icon
.item-bottom-time
color $ui-dark-text-color
.item-bottom-tagList-item
background-color transparent
color white
.item-bottom-tagList-empty
color white
&:hover
background-color $ui-active-color
color $ui-dark-text-color

.item-title
color $ui-dark-text-color
color $ui-inactive-text-color

.item-title-icon
color $ui-darkinactive-text-color
color $ui-inactive-text-color

.item-title-empty
color $ui-dark-inactive-text-color
color $ui-inactive-text-color

.item-bottom-tagList-item
background-color $ui-dark-tag-backgroundColor
color $ui-dark-text-color
background-color transparent
color $ui-inactive-text-color

.item-bottom-tagList-empty
color $ui-inactive-text-color
Expand Down
58 changes: 37 additions & 21 deletions browser/components/NoteItemSimple.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,36 +13,40 @@ $control-height = 30px
background-color $ui-noteList-backgroundColor
transition background-color 0.15s
&:hover
background-color alpha($ui-active-color, 20%)
background-color alpha($ui-button--active-backgroundColor, 40%)
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
color $ui-text-color
&:active
background-color $ui-active-color
color white
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
color white
color $ui-text-color

.item-simple--active
@extend .item-simple
background-color $ui-active-color
color white
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-simple-title
.item-simple-title-empty
border-color transparent
color white
color $ui-text-color
.item-simple-title-icon
color white
color $ui-text-color
&:hover
background-color $ui-active-color
background-color $ui-button--active-backgroundColor

.item-simple-title
font-size 14px
font-size 12px
height 40px
box-sizing border-box
line-height 24px
padding-top 8px
overflow ellipsis
color $ui-text-color
color $ui-inactive-text-color
border-bottom $ui-border

.item-simple-title-icon
Expand All @@ -63,23 +67,35 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&:active
background-color $ui-active-color
background-color $ui-dark-button--active-backgroundColor
.item-simple-title
.item-simple-title-icon
.item-simple-bottom-time
.item-simple-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color
&:hover
background-color alpha($ui-active-color, 20%)
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.item-simple-title
.item-simple-title-icon
.item-simple-bottom-time
.item-simple-bottom-tagList-item
transition 0.15s
color $ui-dark-text-color

.item-simple--active
@extend .item-simple
border-color $ui-dark-borderColor
background-color $ui-active-color
background-color $ui-dark-button--active-backgroundColor
.item-simple-title
.item-simple-title-empty
color white
border-color transparent
&:hover
background-color $ui-active-color
.item-simple-title-icon
.item-simple-bottom-time
color $ui-dark-text-color
.item-simple-bottom-tagList-item
background-color transparent
color $ui-dark-text-color

.item-simple-title
color $ui-dark-text-color
color $ui-inactive-text-color
border-color $ui-dark-borderColor

.item-simple-title-icon
Expand Down
2 changes: 1 addition & 1 deletion browser/components/SideNavFilter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const SideNavFilter = ({
<button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
onClick={handleAllNotesButtonClick}
>
<i className='fa fa-book fa-fw' />
<i className='fa fa-archive fa-fw' />
<span styleName='menu-button-label'>All Notes</span>
</button>
<button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
Expand Down
Loading