Merge pull request #1453 from BoostIO/fix-info-right-layout

WIP - Fix info right buttons layout
2025-12-13 01:36:22 +00:00 · 2018-01-25 09:37:24 -05:00
parent 44c4d56214 7a116966fa
commit cfb996039b
24 changed files with 93 additions and 90 deletions
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -3,20 +3,14 @@
  border solid 1px transparent
  vertical-align middle
  border-radius 2px
+  height 30px
  transition 0.15s
  user-select none
  margin-right 10px
-  &:hover
-    background-color $ui-button--hover-backgroundColor

 .root--search, .root--focus
  @extend .root
-  background-color $ui-noteDetail-backgroundColor = #fff
  border-color $ui-input--focus-borderColor
-  width 154px
-  height 30px
-  &:hover
-    border-color $ui-input--focus-borderColor = #fff

 .idle
  position relative
--- a/browser/main/Detail/FullscreenButton.styl
+++ b/browser/main/Detail/FullscreenButton.styl
@@ -8,8 +8,8 @@
  tooltip()
  position absolute
  pointer-events none
-  top 26px
-  right 0
+  top 50px
+  right 70px
  z-index 200
  padding 5px
  line-height normal
--- a/browser/main/Detail/InfoButton.styl
+++ b/browser/main/Detail/InfoButton.styl
@@ -8,8 +8,8 @@
  tooltip()
  position absolute
  pointer-events none
-  top 26px
-  right 0
+  top 50px
+  right 20px
  z-index 200
  padding 5px
  line-height normal
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -11,7 +11,7 @@
 .control-infoButton-panel
  z-index 200
  margin-top 0px
-  right 0
+  right 25px
  position absolute
  padding 20px 25px 0 25px
  width 300px
@@ -69,15 +69,16 @@
  color $ui-text-color

 .infoPanel-sub
-  font-size 14px
+  font-size 12px
+  font-weight 600
  color $ui-inactive-text-color
  padding-bottom 8px

 .infoPanel-noteLink
  padding-right 5px
-  width 200px
+  width 210px
  height 25px
-  margin-bottom 6px
+  margin 6px 0

 .infoPanel-copyButton
  outline none
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -367,10 +367,6 @@ class MarkdownNoteDetail extends React.Component {
        <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
      </div>
      <div styleName='info-right'>
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
-
        <StarButton
          onClick={(e) => this.handleStarButtonClick(e)}
          isActive={note.isStarred}
@@ -395,6 +391,10 @@ class MarkdownNoteDetail extends React.Component {

        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />

+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
        <InfoPanel
          storageName={currentOption.storage.name}
          folderName={currentOption.folder.name}
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -12,11 +12,9 @@
  padding-bottom 3px

 .control-lockButton
-  top 150px
  topBarButtonRight()

 .trashed-infopanel
-  top 40px
  position relative

 .body
@@ -25,7 +23,7 @@
  right 0
  top $info-height + $info-margin-under-border
  bottom $statusBar-height
-  margin 0 45px
+  margin 0 30px
 .body-noteEditor
  absolute top bottom left right
  
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -1,6 +1,6 @@
@import('DetailVars')

-$info-height = 50px
+$info-height = 60px
 $info-margin-under-border = 30px

 .info
@@ -8,11 +8,11 @@ $info-margin-under-border = 30px
  left 0
  right 0
  height $info-height
-  border-bottom 1px solid #eee
  background-color $ui-noteDetail-backgroundColor
  width 100%
  display flex
  align-items center
+  padding 0 20px

 .info-left
  padding 0 10px
@@ -20,7 +20,6 @@ $info-margin-under-border = 30px
  display flex
  align-items center

-
 .info-left-top-folderSelect
  display flex
  align-items center
@@ -45,12 +44,9 @@ $info-margin-under-border = 30px
    color $ui-button--color

 .info-right
-  position absolute
-  right 40px
-  top 60px
-  bottom 1px
-  padding-left 30px
  z-index 101
+  display inline-flex
+  margin-top 3px

 .undo-button
  width 34px
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -626,10 +626,6 @@ class SnippetNoteDetail extends React.Component {
        />
      </div>
      <div styleName='info-right'>
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
-
        <StarButton
          onClick={(e) => this.handleStarButtonClick(e)}
          isActive={note.isStarred}
@@ -637,10 +633,16 @@ class SnippetNoteDetail extends React.Component {

        <button styleName='control-fullScreenButton' title='Fullscreen'
          onMouseDown={(e) => this.handleFullScreenButton(e)}>
-          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
+          <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
+          <span styleName='tooltip'>Fullscreen</span>
        </button>

        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
        <InfoPanel
          storageName={currentOption.storage.name}
          folderName={currentOption.folder.name}
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -9,8 +9,7 @@

 .body
  absolute left right
-  left $snippet-note-detail-left-margin
-  right $snippet-note-detail-right-margin
+  margin 0 30px
  top $info-height + $info-margin-under-border
  bottom $statusBar-height
  background-color $ui-noteDetail-backgroundColor
@@ -70,6 +69,21 @@
  top 80px
  margin-bottom 10px
  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 70px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s

 body[data-theme="white"]
  .root
--- a/browser/main/Detail/StarButton.styl
+++ b/browser/main/Detail/StarButton.styl
@@ -11,9 +11,9 @@
  tooltip()
  position absolute
  pointer-events none
-  top 26px
-  right 0
-  width 100%
+  top 50px
+  right 115px
+  width 40px
  z-index 200
  padding 5px
  line-height normal
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -6,7 +6,8 @@
  width 100%
  overflow-x scroll
  white-space nowrap
-  margin-right 10px
+  margin-top 31px
+  position absolute

 .root::-webkit-scrollbar
  display none
--- a/browser/main/Detail/ToggleModeButton.js
+++ b/browser/main/Detail/ToggleModeButton.js
@@ -8,10 +8,10 @@ const ToggleModeButton = ({
 }) => (
  <div styleName='control-toggleModeButton'>
    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
-      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
    </div>
    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
-      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
    </div>
    <span styleName='tooltip'>Toggle Mode</span>
  </div>
--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/browser/main/Detail/ToggleModeButton.styl
@@ -1,24 +1,28 @@
 .control-toggleModeButton
-  border 1px solid #eee
-  height 34px
+  height 25px
+  border-radius 50px
+  background-color #F4F4F4
+  width 52px
  display flex
  align-items center
+  position absolute
+  right 165px
+  .active
+    background-color #1EC38B
+    width 33px
+    height 24px
+    box-shadow 2px 0px 7px #eee
+    z-index 1

  div
    width 40px
    height 100%
-    background-color #f9f9f9
+    border-radius 50%
    display flex
    align-items center
    justify-content center
    cursor pointer

-    &:first-child
-      border-right 1px solid #eee
-    .active
-      background-color #fff
-      box-shadow 2px 0px 7px #eee
-      z-index 1
  &:hover .tooltip
    opacity 1

@@ -26,9 +30,10 @@
  tooltip()
  position absolute
  pointer-events none
-  top 47px
-  right 11px
+  top 33px
+  left -10px
  z-index 200
+  width 80px
  padding 5px
  line-height normal
  border-radius 2px
@@ -40,22 +45,14 @@ body[data-theme="dark"]
    topBarButtonDark()

  .control-toggleModeButton
-    border 1px solid #444444
-    div
-      background-color $ui-dark-noteDetail-backgroundColor
-      &:first-child
-        border-right 1px solid #444444
-    .active
      background-color #3A404C
+    .active
+      background-color #1EC38B
      box-shadow 2px 0px 7px #444444

 body[data-theme="solarized-dark"]
  .control-toggleModeButton
-    border 1px solid #586E75
-    div
-      background-color $ui-solarized-dark-noteDetail-backgroundColor
-      &:first-child
-        border-right 1px solid #586E75
-    .active
      background-color #002B36
+    .active
+      background-color #1EC38B
      box-shadow 2px 0px 7px #222222
--- a/browser/main/Detail/TrashButton.styl
+++ b/browser/main/Detail/TrashButton.styl
@@ -8,8 +8,8 @@
  tooltip()
  position absolute
  pointer-events none
-  top 26px
-  right 0
+  top 50px
+  right 50px
  z-index 200
  padding 5px
  line-height normal
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -21,19 +21,20 @@
    color white

 .zoom
-  navButtonColor()
-  color rgba(0,0,0,.54)
-  height 20px
-  display flex
-  padding 0
-  align-items center
-  background-color transparent
-  &:hover
-    color $ui-active-color
-  &:active
-    color $ui-active-color
-  span
-    margin-left 5px
+  display none
+  // navButtonColor()
+  // color rgba(0,0,0,.54)
+  // height 20px
+  // display flex
+  // padding 0
+  // align-items center
+  // background-color transparent
+  // &:hover
+  //   color $ui-active-color
+  // &:active
+  //   color $ui-active-color
+  // span
+  //   margin-left 5px
  
 .update
  navButtonColor()
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -97,7 +97,7 @@ body[data-theme="dark"]
 .CodeMirror
  font-family inherit !important
  line-height 1.4em
-  height 96%
+  height 100%
 .CodeMirror > div > textarea
  margin-bottom -1em
 .CodeMirror-focused .CodeMirror-selected
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -188,7 +188,6 @@ modal()
  border-radius $modal-border-radius

 topBarButtonRight()
-  position absolute
  width 34px
  height 34px
  border-radius 17px
--- a/resources/icon/icon-full.svg
+++ b/resources/icon/icon-full.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="13px" height="13px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
    <title>icon-full</title>
    <desc>Created with Sketch.</desc>
--- a/resources/icon/icon-info.svg
+++ b/resources/icon/icon-info.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="15px" height="15px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>icon-info</title>
    <desc>Created with Sketch.</desc>
--- a/resources/icon/icon-mode-markdown-off-active.svg
+++ b/resources/icon/icon-mode-markdown-off-active.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="15px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
    <title>icon-mode-markdown-off</title>
    <desc>Created with Sketch.</desc>
--- a/resources/icon/icon-mode-split-on-active.svg
+++ b/resources/icon/icon-mode-split-on-active.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="13px" height="13px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
    <title>icon-mode-split-on</title>
    <desc>Created with Sketch.</desc>
--- a/resources/icon/icon-star.svg
+++ b/resources/icon/icon-star.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="14px" height="13px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
    <title>icon-star</title>
    <desc>Created with Sketch.</desc>
--- a/resources/icon/icon-starred.svg
+++ b/resources/icon/icon-starred.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="15px" height="16px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>icon-starred</title>
    <desc>Created with Sketch.</desc>
--- a/resources/icon/icon-trash.svg
+++ b/resources/icon/icon-trash.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="18px" viewBox="0 0 16 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="13px" height="15px" viewBox="0 0 16 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>icon-trash</title>
    <desc>Created with Sketch.</desc>