Merge pull request #690 from BoostIO/update-layout

Fix layout
2025-12-13 09:46:22 +00:00 · 2017-07-09 13:29:00 +09:00
parent bdefaf7427 4b9640e5a3
commit 7a4234e73c
11 changed files with 52 additions and 48 deletions
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -66,7 +66,7 @@ $control-height = 30px
  color $ui-inactive-text-color

 .item-title
-  font-size 13px
+  font-size 14px
  position relative
  top -12px
  left 20px
@@ -92,11 +92,12 @@ $control-height = 30px
  flex 1
  overflow ellipsis
  line-height 20px
-  padding-top 2px
+  padding-top 7px
  padding-left 2px
+  margin-right 27px

 .item-bottom-tagList-item
-  font-size 10px
+  font-size 11px
  margin-right 8px
  padding 0
  height 20px
@@ -109,14 +110,14 @@ $control-height = 30px

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

 .item-star
  position absolute
-  top 34px
-  left 5px
+  right 5px
+  bottom 0px
  width 34px
  height 34px
  color alpha($ui-favorite-star-button-color, 60%)
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -7,7 +7,7 @@ $control-height = 30px

 .item-simple
  position relative
-  padding 0 25px
+  padding 0 20px
  user-select none
  cursor pointer
  background-color $ui-noteList-backgroundColor
@@ -40,7 +40,7 @@ $control-height = 30px
    background-color $ui-button--active-backgroundColor

 .item-simple-title
-  font-size 12px
+  font-size 13px
  height 40px
  box-sizing border-box
  line-height 24px
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -1,7 +1,7 @@
 .root
  position relative
  border solid 1px transparent
-  line-height 34px
+  line-height 26px
  vertical-align middle
  border-radius 2px
  transition 0.15s
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -209,7 +209,7 @@ class MarkdownNoteDetail extends React.Component {
  }

  getToggleLockButton () {
-    return this.state.isLocked ? 'fa-lock' : 'fa-unlock-alt'
+    return this.state.isLocked ? 'fa-lock' : 'fa-unlock'
  }

  handleDeleteKeyDown (e) {
@@ -272,7 +272,7 @@ class MarkdownNoteDetail extends React.Component {
                >
                  <i className={faClassName} styleName='lock-button' />
                  <span styleName='control-lockButton-tooltip'>
-                    {this.state.isLocked ? 'Unlock' : 'Lock'}
+                    {this.state.isLocked ? 'Lock' : 'Unlock'}
                  </span>
                </button>
              return (
@@ -285,7 +285,7 @@ class MarkdownNoteDetail extends React.Component {
            <button styleName='control-fullScreenButton'
              onMouseDown={(e) => this.handleFullScreenButton(e)}
            >
-              <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
+              <i className='fa fa-expand' styleName='fullScreen-button' />
            </button>
          </div>
        </div>
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -25,7 +25,7 @@ $info-margin-under-border = 27px
  display inline-block
  padding 0 3px
  height 34px
-  line-height 34px
+  line-height 26px
  vertical-align middle
  border-radius 3px

@@ -35,6 +35,7 @@ $info-margin-under-border = 27px
  navButtonColor()
  color $ui-favorite-star-button-color
  font-size 14px
+  line-height 0
  margin 13px 2px
  padding 0
  border-radius 17px
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -525,7 +525,7 @@ class SnippetNoteDetail extends React.Component {
            <button styleName='control-fullScreenButton'
              onMouseDown={(e) => this.handleFullScreenButton(e)}
            >
-              <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
+              <i className='fa fa-expand' styleName='fullScreen-button' />
            </button>
          </div>
        </div>
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -2,6 +2,7 @@
  display inline-block
  top 19px
  user-select none
+  height 26px
  vertical-align middle
  width 300px
  overflow-x scroll
@@ -14,7 +15,6 @@
  display inline-block
  margin 1px 3px
  padding 0
-  vertical-align middle
  height 20px
  background-color alpha($ui-tag-backgroundColor, 10%)
  border-radius 3px
@@ -49,9 +49,9 @@

 .newTag
  display inline-block
-  margin 0 2px
+  margin 2px 0 15px 2px
  vertical-align middle
-  height 24px
+  height 18px
  box-sizing borde-box
  border none
  background-color transparent
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -17,7 +17,7 @@ $control-height = 30px

 .control-sortBy
  flex 1
-  padding-left 25px
+  padding-left 22px

 .control-sortBy-select
  appearance: none;
@@ -28,11 +28,14 @@ $control-height = 30px
  background-color transparent
  outline none
  cursor pointer
-  font-size 10px
+  font-size 11px
  &:hover
    transition 0.2s
    color $ui-text-color

+.control-button-area
+  margin-right 12px
+
 .control-button
  width 25px
  padding 0
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -439,22 +439,24 @@ class NoteList extends React.Component {
              <option value='ALPHABETICAL'>Alphabetical</option>
            </select>
          </div>
-          <button styleName={config.listStyle === 'DEFAULT'
-              ? 'control-button--active'
-              : 'control-button'
-            }
-            onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
-          >
-            <i className='fa fa-th-large' />
-          </button>
-          <button styleName={config.listStyle === 'SMALL'
-              ? 'control-button--active'
-              : 'control-button'
-            }
-            onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
-          >
-            <i className='fa fa-list-ul' />
-          </button>
+          <div styleName='control-button-area'>
+            <button styleName={config.listStyle === 'DEFAULT'
+                ? 'control-button--active'
+                : 'control-button'
+              }
+              onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
+            >
+              <i className='fa fa-th-large' />
+            </button>
+            <button styleName={config.listStyle === 'SMALL'
+                ? 'control-button--active'
+                : 'control-button'
+              }
+              onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
+            >
+              <i className='fa fa-list-ul' />
+            </button>
+          </div>
        </div>
        <div styleName='list'
          ref='list'
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -19,26 +19,25 @@ $control-height = 34px

 .control-search
  height 32px
+  width 1px
  flex 1
  background-color white
  position relative

-.control-search-icon
-  absolute top bottom left
-  line-height 32px
-  width 35px
-  color $ui-inactive-text-color
-  background-color $ui-noteList-backgroundColor
-
 .control-search-input
  display block
  absolute top bottom right
-  left 30px
+  width 100%
+  padding-left 12px
+  background-color $ui-noteList-backgroundColor
  input
    width 100%
    height 100%
    outline none
    border none
+    color $ui-text-color
+    font-size 16px
+    padding-bottom 2px
    background-color $ui-noteList-backgroundColor

 .control-search-optionList
@@ -92,9 +91,7 @@ $control-height = 34px
  width 32px
  height $control-height - 2
  navButtonColor()
-  border $ui-border
-  border-radius 32px
-  font-size 14px
+  font-size 16px
  line-height 28px
  padding 0
  &:active
@@ -132,6 +129,7 @@ body[data-theme="dark"]
    background-color $ui-dark-noteList-backgroundColor

  .control-search-input
+    background-color $ui-dark-noteList-backgroundColor
    input
      background-color $ui-dark-noteList-backgroundColor
      color $ui-dark-text-color
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -205,7 +205,6 @@ class TopBar extends React.Component {
      >
        <div styleName='control'>
          <div styleName='control-search'>
-            <i styleName='control-search-icon' className='fa fa-search fa-fw' />
            <div styleName='control-search-input'
              onFocus={(e) => this.handleSearchFocus(e)}
              onBlur={(e) => this.handleSearchBlur(e)}
@@ -232,7 +231,7 @@ class TopBar extends React.Component {
          </div>
          <button styleName='control-newPostButton'
            onClick={(e) => this.handleNewPostButtonClick(e)}>
-            <i className='fa fa-plus' />
+            <i className='fa fa-pencil-square-o' />
            <span styleName='control-newPostButton-tooltip'>
              Make a Note {OSX ? '⌘' : '^'} + n
            </span>