design update 2

2025-12-13 17:56:25 +00:00 · 2017-11-18 13:46:46 +09:00
parent 3c70b2e5a0
commit b6efbcedef
61 changed files with 741 additions and 90 deletions
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -70,7 +70,7 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont

      <div styleName='item-bottom-time'>{dateDisplay}</div>
      {note.isStarred
-        ? <i styleName='item-star' className='fa fa-star' /> : ''
+        ? <img styleName='item-star' src='../resources/icon/icon-starred.svg' /> : ''
      }
      {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
        ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -125,10 +125,10 @@ $control-height = 30px

 .item-star
  position absolute
-  right -20px
-  bottom 2px
-  width 34px
-  height 34px
+  right -10px
+  bottom 12px
+  width 16px
+  height 16px
  color alpha($ui-favorite-star-button-color, 60%)
  font-size 12px
  padding 0
--- a/browser/components/SideNavFilter.js
+++ b/browser/components/SideNavFilter.js
@@ -19,27 +19,51 @@ const SideNavFilter = ({
  counterTotalNote, counterStarredNote
 }) => (
  <div styleName={isFolded ? 'menu--folded' : 'menu'}>
+
    <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
      onClick={handleAllNotesButtonClick}
    >
-      <i className='fa fa-archive fa-fw' />
+      <div styleName='iconWrap'>
+      <img src={isHomeActive
+          ? '../resources/icon/icon-all-active.svg'
+          : '../resources/icon/icon-all.svg'
+        }
+      />
+      </div>
      <span styleName='menu-button-label'>All Notes</span>
      <span styleName='counters'>{counterTotalNote}</span>
    </button>
+
    <button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
      onClick={handleStarredButtonClick}
    >
-      <i className='fa fa-star fa-fw' />
+      <div styleName='iconWrap'>
+      <img src={isStarredActive
+          ? '../resources/icon/icon-star-active.svg'
+          : '../resources/icon/icon-star.svg'
+        }
+      />
+      </div>
      <span styleName='menu-button-label'>Starred</span>
      <span styleName='counters'>{counterStarredNote}</span>
    </button>
+
+
    <button styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
      onClick={handleTrashedButtonClick}
    >
-      <i className='fa fa-trash fa-fw' />
+      <div styleName='iconWrap'>
+      <img src={isTrashedActive
+          ? '../resources/icon/icon-trash-active.svg'
+          : '../resources/icon/icon-trash.svg'
+        }
+      />      
+      </div>
      <span styleName='menu-button-label'>Trash</span>
      <span styleName='counters'>{counterDelNote}</span>
    </button>
+
+
  </div>
 )

--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -3,41 +3,55 @@

 .menu-button
  navButtonColor()
-  height 32px
-  padding 0 15px
-  font-size 13px
+  height 36px
+  padding 0 15px 0 20px
+  font-size 14px
  width 100%
  text-align left
  overflow ellipsis
-  &:hover
-    color $ui-button-default-color
+  display flex
+  align-items center
+  &:hover, &:active, &:active:hover
+    color #1EC38B
    background-color alpha($ui-button-default--active-backgroundColor, 20%)
-    transition background-color 0.15s
-  &:active, &:active:hover
-    color $ui-button-default-color
-    background-color $ui-button-default--active-backgroundColor

+.iconWrap
+  width 20px
+  text-align center
+  
 .counters
  float right
  color $ui-inactive-text-color

 .menu-button--active
  @extend .menu-button
-  color #e74c3c
  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
+  &:hover
+    color #1EC38B

 .menu-button-star--active
  @extend .menu-button
-  color #F9BF3B
  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B

 .menu-button-trash--active
  @extend .menu-button
-  color #5D9E36
  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B

 .menu-button-label
-  margin-left 5px
+  margin-left 10px
+  flex 1

 .menu--folded
  @extend .menu
@@ -46,6 +60,7 @@
    &:hover .menu-button-label
      transition opacity 0.15s
      opacity 1
+
  .menu-button-label
    position fixed
    display inline-block
@@ -55,9 +70,7 @@
    margin-top -8px
    margin-left 0
    overflow ellipsis
-    background-color $ui-tooltip-backgroundColor
    z-index 10
-    color white
    line-height 32px
    border-top-right-radius 2px
    border-bottom-right-radius 2px
@@ -67,6 +80,9 @@
  .counters
    display none

+
+
+
 body[data-theme="white"]
  .menu-button
    navWhiteButtonColor()
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -5,31 +5,30 @@
 .folderList-item
  display flex
  width 100%
-  height 26px
+  height 34px
  background-color transparent
  color $ui-inactive-text-color
  padding 0
-  margin-bottom 5px
  text-align left
  border none
  overflow ellipsis
-  font-size 13px
+  font-size 14px
  &:first-child
    margin-top 0
  &:hover
-    color $ui-button-default-color
+    color #1EC38B;
    background-color alpha($ui-button-default--active-backgroundColor, 20%)
    transition background-color 0.15s
  &:active
    color $$ui-button-default-color
-    background-color $ui-button-default--active-backgroundColor
-
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    
 .folderList-item--active
  @extend .folderList-item
-  color $ui-button-default-color
-  background-color $ui-button-default--active-backgroundColor
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
  &:hover
-    color $ui-button-default-color
+    color #1EC38B;
    background-color alpha($ui-button-default--active-backgroundColor, 50%)

 .folderList-item-name
--- a/browser/components/StorageList.styl
+++ b/browser/components/StorageList.styl
@@ -1,7 +1,7 @@
 .storageList
  absolute left right
  bottom 37px
-  top 160px
+  top 180px
  overflow-y auto

 .storageList-empty
--- a/browser/main/Detail/InfoButton.js
+++ b/browser/main/Detail/InfoButton.js
@@ -8,7 +8,7 @@ const InfoButton = ({
  <button styleName='control-infoButton'
    onClick={onClick}
  >
-    <i className='fa fa-info-circle infoButton' styleName='info-button' />
+  	<img styleName='iconInfo' src='../resources/icon/icon-info.svg'/>
  </button>
 )

--- a/browser/main/Detail/InfoButton.styl
+++ b/browser/main/Detail/InfoButton.styl
@@ -14,7 +14,7 @@

 .infoButton
  padding 0px
-  margin 15px 0
+  margin 45px 0

 body[data-theme="dark"]
  .control-infoButton
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -11,7 +11,7 @@
 .control-infoButton-panel
  z-index 200
  margin-top 38px
-  right 0px
+  right 0
  position absolute
  padding 20px 25px 0 25px
  width 300px
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -232,7 +232,7 @@ class MarkdownNoteDetail extends React.Component {
  }

  getToggleLockButton () {
-    return this.state.isLocked ? 'fa-eye-slash' : 'fa-eye'
+    return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
  }

  handleDeleteKeyDown (e) {
@@ -332,23 +332,25 @@ class MarkdownNoteDetail extends React.Component {
        />

        {(() => {
-          const faClassName = `fa ${this.getToggleLockButton()}`
+          const imgSrc = `${this.getToggleLockButton()}`
          const lockButtonComponent =
            <button styleName='control-lockButton'
              onFocus={(e) => this.handleFocus(e)}
              onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
            >
-              <i className={faClassName} styleName='lock-button' />
+              <img styleName='iconInfo' src={imgSrc}/>
            </button>
+
          return (
            this.state.isLockButtonShown ? lockButtonComponent : ''
          )
        })()}

+
        <button styleName='control-fullScreenButton'
          onMouseDown={(e) => this.handleFullScreenButton(e)}
        >
-          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
+          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg'/>
        </button>

        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -12,6 +12,7 @@

 .control-lockButton
  top 160px
+  margin-bottom 10px
  topBarButtonLight()

 .trashed-infopanel
@@ -28,7 +29,6 @@
  right $note-detail-right-margin
  top $info-height + $info-margin-under-border
  bottom $statusBar-height
-
 .body-noteEditor
  absolute top bottom left right

--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -52,7 +52,7 @@ $info-margin-under-border = 15px
 .info-right
  position absolute
  right -20px
-  top 0
+  top 10px
  background $ui-noteDetail-backgroundColor
  bottom 1px
  padding-left 30px
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -610,7 +610,7 @@ class SnippetNoteDetail extends React.Component {

        <button styleName='control-fullScreenButton'
          onMouseDown={(e) => this.handleFullScreenButton(e)}>
-          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
+          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg'/>
        </button>

        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -67,6 +67,7 @@

 .control-fullScreenButton
  top 80px
+  margin-bottom 10px
  topBarButtonLight()

 body[data-theme="white"]
--- a/browser/main/Detail/StarButton.js
+++ b/browser/main/Detail/StarButton.js
@@ -47,10 +47,10 @@ class StarButton extends React.Component {
        onMouseLeave={(e) => this.handleMouseLeave(e)}
        onClick={this.props.onClick}
      >
-        <i styleName='icon'
-          className={this.state.isActive || this.props.isActive
-            ? 'fa fa-star'
-            : 'fa fa-star-o'
+        <img styleName='icon'
+          src={this.state.isActive || this.props.isActive
+            ? '../resources/icon/icon-starred.svg'
+            : '../resources/icon/icon-star.svg'
          }
        />
      </button>
--- a/browser/main/Detail/TrashButton.js
+++ b/browser/main/Detail/TrashButton.js
@@ -8,7 +8,7 @@ const TrashButton = ({
  <button styleName='control-trashButton'
    onClick={(e) => onClick(e)}
  >
-    <i className='fa fa-trash trashButton' styleName='info-button' />
+    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg'/>
  </button>
 )

--- a/browser/main/Detail/TrashButton.styl
+++ b/browser/main/Detail/TrashButton.styl
@@ -1,5 +1,6 @@
 .control-trashButton
  top 120px
+  margin-bottom 10px
  topBarButtonLight()

 .control-trashButton--in-trash
@@ -8,7 +9,6 @@

 .trashButton
  padding 0px
-  margin 15px 0

 body[data-theme="dark"]
  .control-trashButton
--- a/browser/main/NewNoteButton/index.js
+++ b/browser/main/NewNoteButton/index.js
@@ -85,7 +85,7 @@ class NewNoteButton extends React.Component {
        <div styleName='control'>
          <button styleName='control-newNoteButton'
            onClick={(e) => this.handleNewNoteButtonClick(e)}>
-            <i className='fa fa-pencil-square-o' />
+            <img styleName='iconTag' src='../resources/icon/icon-newnote.svg'/>
            <span styleName='control-newNoteButton-tooltip'>
              Make a Note {OSX ? '⌘' : '^'} + n
            </span>
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -21,14 +21,14 @@ $control-height = 30px

 .control-sortBy-select
  appearance: none;
-  margin-left 3px
+  margin-left 5px
  color $ui-inactive-text-color
  padding 0
  border none
  background-color transparent
  outline none
  cursor pointer
-  font-size 11px
+  font-size 12px
  &:hover
    transition 0.2s
    color $ui-text-color
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -599,7 +599,7 @@ class NoteList extends React.Component {
              }
              onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
            >
-              <i className='fa fa-th-large' />
+              <img styleName='iconTag' src='../resources/icon/icon-column.svg'/>
            </button>
            <button styleName={config.listStyle === 'SMALL'
                ? 'control-button--active'
@@ -607,7 +607,7 @@ class NoteList extends React.Component {
              }
              onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
            >
-              <i className='fa fa-list-ul' />
+              <img styleName='iconTag' src='../resources/icon/icon-column-list.svg'/>
            </button>
          </div>
        </div>
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -23,13 +23,13 @@
    background-color transparent
  &:active, &:active:hover
    color $ui-button-default--active-backgroundColor
-    background-color transparent

 .switch-buttons
  background-color transparent
  border 0
-  height 25px
-  margin 20px auto 0px 8px
+  margin 24px auto 4px 14px
+  display flex
+  text-align center

 .non-active-button
  color $ui-inactive-text-color
@@ -37,13 +37,16 @@
  border 0
  background-color transparent
  transition 0.2s
+  display flex
+  text-align center
+  margin-right 4px;
  &:hover
    color alpha(#239F86, 60%)

 .active-button
  @extend .non-active-button
  color $ui-button-default--active-backgroundColor
-
+  
 .top-menu-label
  margin-left 5px
  overflow ellipsis
--- a/browser/main/SideNav/StorageItem.js
+++ b/browser/main/SideNav/StorageItem.js
@@ -226,9 +226,9 @@ class StorageItem extends React.Component {
          <button styleName='header-toggleButton'
            onMouseDown={(e) => this.handleToggleButtonClick(e)}
          >
-            <i className={this.state.isOpen
-                ? 'fa fa-caret-down'
-                : 'fa fa-caret-right'
+            <img src={this.state.isOpen
+                ? '../resources/icon/icon-down.svg'
+                : '../resources/icon/icon-right.svg'
              }
            />
          </button>
@@ -237,7 +237,7 @@ class StorageItem extends React.Component {
            <button styleName='header-addFolderButton'
              onClick={(e) => this.handleAddFolderButtonClick(e)}
            >
-              <i className='fa fa-plus' />
+              <img styleName='iconTag' src='../resources/icon/icon-plus.svg'/>
            </button>
          }

--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -5,19 +5,23 @@

 .header
  position relative
-  height 25px
+  height 36px
  width 100%
  margin-bottom 5px
  transition 0.15s
+  display flex
+  align-items center

 .header--active
  margin-bottom 5px
-  background-color $ui-button-default--active-backgroundColor
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
  transition color background-color  0.15s
+  display flex
+  align-items center
  .header-toggleButton
  .header-info
  .header-addFolderButton
-    color $ui-button-default-color
+    color #1EC38B

 .header-toggleButton
  navButtonColor()
@@ -37,23 +41,24 @@
  navButtonColor()
  display block
  width 100%
-  height 25px
-  padding-left 23px
-  padding-right 10px
+  height 36px
+  padding-left 25px
+  padding-right 15px
  line-height 22px
  cursor pointer
-  font-size 13px
+  font-size 14px
  border none
  overflow ellipsis
  text-align left
+  font-weight 600;
  background-color transparent
  &:hover
-    color $ui-button-default-color
+    color #1EC38B
    background-color alpha($ui-button-default--active-backgroundColor, 20%)
    transition background-color 0.15s
  &:active, &:active:hover
-    color $ui-button-default-color
-    background-color $ui-button-default--active-backgroundColor
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)

 .header-info-path
  font-size 10px
@@ -62,12 +67,11 @@
 .header-addFolderButton
  navButtonColor()
  position absolute
-  right 0
+  right 10px
  width 25px
  height 25px
  padding 0
  border none
-  margin-right 5px
  border-radius 50%
  &:hover
    transition 0.2s
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -161,15 +161,26 @@ class SideNav extends React.Component {
      >
        <div styleName='top'>
          <div styleName='switch-buttons'>
-            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}><i className='fa fa-bars fa-fw' style={{transform: 'rotate(90deg)'}} /></button>
-            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}><i className='fa fa-tags fa-fw' /></button>
+            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-list.svg'
+                  : '../resources/icon/icon-list-active.svg'
+                }
+              />
+            </button>
+            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-tag-active.svg'
+                  : '../resources/icon/icon-tag.svg'
+                }
+              />
+            </button>
          </div>
          <div>
            <button styleName='top-menu-preference'
              onClick={(e) => this.handleMenuButtonClick(e)}
            >
-              <i className='fa fa-wrench fa-fw' />
-              <span styleName='top-menu-label'>Preferences</span>
+              <img styleName='iconTag' src='../resources/icon/icon-setting.svg'/>
            </button>
          </div>
        </div>
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -21,8 +21,12 @@

 .zoom
  navButtonColor()
-  height 24px
-
+  height 30px
+  display flex
+  align-items center
+  span
+    margin-left 5px
+  
 .update
  navButtonColor()
  height 24px
--- a/browser/main/StatusBar/index.js
+++ b/browser/main/StatusBar/index.js
@@ -55,8 +55,8 @@ class StatusBar extends React.Component {
        <button styleName='zoom'
          onClick={(e) => this.handleZoomButtonClick(e)}
        >
-          <i className='fa fa-search-plus' />&nbsp;
-          {Math.floor(config.zoom * 100)}%
+          <img src='../resources/icon/icon-zoom.svg'/>
+          <span>{Math.floor(config.zoom * 100)}%</span>
        </button>

        {status.updateReady
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -36,7 +36,7 @@ $control-height = 34px
    outline none
    border none
    color $ui-text-color
-    font-size 16px
+    font-size 18px
    padding-bottom 2px
    background-color $ui-noteList-backgroundColor

--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -12,6 +12,7 @@ body
  color textColor
  font-size fontSize
  font-weight 200
+  -webkit-font-smoothing antialiased

 button, input, select, textarea
  font-family DEFAULT_FONTS
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -129,15 +129,11 @@ SideNavFilter()
  .menu-button-label
    color $ui-button-default-color
  &:hover
-    background-color alpha($ui-button-default--hover-backgroundColor, 50%)
-    color $ui-button-default-color
-    .menu-button-label
-      color $ui-button-default-color
+    background-color alpha($ui-button-default--hover-backgroundColor, 20%)
  &:active, &:active:hover
-    background-color alpha($ui-button-default--hover-backgroundColor, 50%)
-    color $ui-button-default-color
+    background-color alpha($ui-button-default--hover-backgroundColor, 20%)
    .menu-button-label
-      color $ui-button-default-color
+      color #1EC38B

 /**
 * Nav