public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

add: style sheet for NoteItemSimple component

Browse Source
This commit is contained in:
sota1235
2016-12-29 17:07:42 +09:00
parent ecb91b3155
commit aba6c2eb4f
2 changed files with 73 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
browser/main/NoteList/NoteItemSimple.js
View File

@@ -3,7 +3,7 @@
*/ */
import React, { PropTypes } from 'react' import React, { PropTypes } from 'react'
import CSSModules from 'browser/lib/CSSModules' import CSSModules from 'browser/lib/CSSModules'
import styles from './NoteItem.styl' import styles from './NoteItemSimple.styl'
/** /**
* @description Note item component when using simple display mode. * @description Note item component when using simple display mode.
@@ -14,17 +14,17 @@ import styles from './NoteItem.styl'
*/ */
const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => ( const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
<div styleName={isActive <div styleName={isActive
? 'item--active' ? 'item-simple--active'
: 'item' : 'item-simple'
} }
key={`${note.storage}-${note.key}`} key={`${note.storage}-${note.key}`}
onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)} onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)} onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
> >
<div styleName='item-title'> <div styleName='item-simple-title'>
{note.title.trim().length > 0 {note.title.trim().length > 0
? note.title ? note.title
: <span styleName='item-title-empty'>Empty</span> : <span styleName='item-simple-title-empty'>Empty</span>
} }
</div> </div>
</div> </div>

68
browser/main/NoteList/NoteItemSimple.styl Normal file
View File

@@ -0,0 +1,68 @@
$control-height = 30px
.root
absolute left bottom
top $topBar-height - 1
background-color $ui-noteList-backgroundColor
.item-simple
position relative
padding 20px 25px
user-select none
cursor pointer
background-color $ui-noteList-backgroundColor
transition background-color 0.15s
&:hover
background-color alpha($ui-active-color, 20%)
&:active
background-color $ui-active-color
color white
.item-simple--active
@extend .item-simple
background-color $ui-active-color
color white
&:hover
background-color $ui-active-color
.item-simple-title
font-size 14px
height 40px
box-sizing border-box
line-height 24px
padding-top 5px
padding-bottom 20px
overflow ellipsis
color $ui-text-color
.item-simple-title-empty
font-weight normal
color $ui-inactive-text-color
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
.item-simple
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
&:active
background-color $ui-active-color
&:hover
background-color alpha($ui-active-color, 20%)
.item-simple--active
@extend .item-simple
border-color $ui-dark-borderColor
background-color $ui-active-color
.item-simple-title
color white
&:hover
background-color $ui-active-color
.item-simple-title
color $ui-dark-text-color
.item-simple-title-empty
color $ui-dark-inactive-text-color