Fix button layout

2025-12-13 09:46:22 +00:00 · 2017-07-24 17:55:47 +09:00
parent c697f19642
commit 4a77f250f1
7 changed files with 29 additions and 44 deletions
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -290,14 +290,10 @@ class MarkdownNoteDetail extends React.Component {

    const trashTopBar = <div styleName='info'>
      <div styleName='info-left'>
-        <div styleName='info-left-top'>
-          <div styleName='info-left-top-folderSelect'>
-            <i styleName='undo-button'
-              className='fa fa-undo fa-fw'
-              onClick={(e) => this.handleUndoButtonClick(e)}
-            />
-          </div>
-        </div>
+        <i styleName='undo-button'
+          className='fa fa-undo fa-fw'
+          onClick={(e) => this.handleUndoButtonClick(e)}
+        />
      </div>
      <div styleName='info-right'>
        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -15,20 +15,19 @@ $info-margin-under-border = 27px
  float left
  padding 0 5px
  margin 0px 2px
-
 .info-left-top
  display inline-block
  height $info-height
  line-height $info-height

 .info-left-top-folderSelect
-  display inline-block
  padding 0 3px
  height 34px
  line-height 26px
-  vertical-align middle
+  display flex
+  align-items center
+  justify-content center
  border-radius 3px
-
 .info-left-button
  width 34px
  height 34px
@@ -45,7 +44,7 @@ $info-margin-under-border = 27px
    border-color $ui-favorite-star-button-color
  &:active, &:active:hover
    background-color $ui-favorite-star-button-color
-    color $ui-button--active-color
+    color $ui-button--

 .info-right
  position absolute
@@ -56,16 +55,7 @@ $info-margin-under-border = 27px
  padding-left 30px

 .undo-button
-  position relative
-  border solid 1px transparent
-  line-height 34px
-  vertical-align middle
-  border-radius 2px
-  transition 0.15s
-  user-select none
-  cursor pointer
-  &:hover
-    background-color #D9D9D9
+  topBarButtonLight()

 body[data-theme="dark"]
  .info
@@ -86,3 +76,6 @@ body[data-theme="dark"]

  .info-right
    background-color $ui-dark-noteDetail-backgroundColor
+
+  .undo-button
+    topBarButtonDark()
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -549,14 +549,10 @@ class SnippetNoteDetail extends React.Component {

    const trashTopBar = <div styleName='info'>
      <div styleName='info-left'>
-        <div styleName='info-left-top'>
-          <div styleName='info-left-top-folderSelect'>
-            <i styleName='undo-button'
-              className='fa fa-undo fa-fw'
-              onClick={(e) => this.handleUndoButtonClick(e)}
-            />
-          </div>
-        </div>
+        <i styleName='undo-button'
+          className='fa fa-undo fa-fw'
+          onClick={(e) => this.handleUndoButtonClick(e)}
+        />
      </div>
      <div styleName='info-right'>
        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
@@ -589,7 +585,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>
        <InfoButton
          onClick={(e) => this.handleInfoButtonClick(e)}
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -1,8 +1,7 @@
 .root
  display inline-block
-  top 19px
  user-select none
-  height 26px
+  height 23px
  vertical-align middle
  width 300px
  overflow-x scroll
--- a/browser/main/Detail/TrashButton.js
+++ b/browser/main/Detail/TrashButton.js
@@ -8,15 +8,7 @@ const TrashButton = ({
  <button styleName='control-trashButton'
    onClick={(e) => onClick(e)}
  >
-    <svg height='14px' id='Capa_1' style={{enableBackground: 'new 0 0 753.23 753.23'}} width='14px' version='1.1' viewBox='0 0 753.23 753.23' x='0px' y='0px' xmlSpace='preserve'>
-      <g>
-        <g id='_x34__19_'>
-          <g>
-            <path d='M494.308,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077c0-12.993-10.545-23.539-23.538-23.539&#xA;&#x9;&#x9;&#x9;&#x9;s-23.538,10.545-23.538,23.539v282.461C470.77,648.531,481.314,659.077,494.308,659.077z M635.538,94.154h-141.23V47.077&#xA;&#x9;&#x9;&#x9;&#x9;C494.308,21.067,473.24,0,447.23,0H306c-26.01,0-47.077,21.067-47.077,47.077v47.077h-141.23&#xA;&#x9;&#x9;&#x9;&#x9;c-26.01,0-47.077,21.067-47.077,47.077v47.077c0,25.986,21.067,47.077,47.077,47.077v423.692&#xA;&#x9;&#x9;&#x9;&#x9;c0,51.996,42.157,94.153,94.154,94.153h329.539c51.996,0,94.153-42.157,94.153-94.153V235.385&#xA;&#x9;&#x9;&#x9;&#x9;c26.01,0,47.077-21.091,47.077-47.077V141.23C682.615,115.221,661.548,94.154,635.538,94.154z M306,70.615&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993,10.545-23.539,23.538-23.539h94.154c12.993,0,23.538,10.545,23.538,23.539v23.539c-22.809,0-141.23,0-141.23,0V70.615z&#xA;&#x9;&#x9;&#x9;&#x9; M588.461,659.077c0,25.986-21.066,47.076-47.076,47.076H211.846c-26.01,0-47.077-21.09-47.077-47.076V235.385h423.692V659.077z&#xA;&#x9;&#x9;&#x9;&#x9; M612,188.308H141.23c-12.993,0-23.538-10.545-23.538-23.539s10.545-23.539,23.538-23.539H612&#xA;&#x9;&#x9;&#x9;&#x9;c12.993,0,23.538,10.545,23.538,23.539S624.993,188.308,612,188.308z M258.923,659.077c12.993,0,23.539-10.546,23.539-23.539&#xA;&#x9;&#x9;&#x9;&#x9;V353.077c0-12.993-10.545-23.539-23.539-23.539s-23.539,10.545-23.539,23.539v282.461&#xA;&#x9;&#x9;&#x9;&#x9;C235.384,648.531,245.93,659.077,258.923,659.077z M376.615,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993-10.545-23.539-23.538-23.539s-23.539,10.545-23.539,23.539v282.461C353.077,648.531,363.622,659.077,376.615,659.077z' />
-          </g>
-        </g>
-      </g>
-    </svg>
+    <i className='fa fa-trash trashButton' styleName='info-button' />
  </button>
 )

--- a/browser/main/Detail/TrashButton.styl
+++ b/browser/main/Detail/TrashButton.styl
@@ -2,6 +2,10 @@
  float right
  topBarButtonLight()

+.trashButton
+  padding 0px
+  margin 15px 0
+
 body[data-theme="dark"]
  .control-trashButton
    topBarButtonDark()
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -157,6 +157,9 @@ modal()

 topBarButtonLight()
  width 34px
+  display flex
+  align-items center
+  justify-content center
  height 34px
  border-radius 17px
  font-size 14px
@@ -168,7 +171,7 @@ topBarButtonLight()
  &:active
    border-color $ui-button--active-backgroundColor
  &:hover
-    background-color $ui-button--hover-backgroundColor
+    background-color alpha($ui-button--hover-backgroundColor, 60%)
    .control-lockButton-tooltip
      opacity 1

@@ -231,10 +234,12 @@ topBarButtonDark()
  color $ui-dark-topbar-button-color
  &:hover
    background-color $dark-default-button-background--hover
+    color $ui-dark-tooltip-text-color
  &:active
    border-color $ui-dark-button--focus-borderColor
  &:active:hover
    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-tooltip-text-color
  &:focus
    border-color $ui-button--focus-borderColor