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

Fix switch button layout

Browse Source
This commit is contained in:
Kazu Yokomizo
2017-12-20 18:50:53 +09:00
parent b4b6d3d07c
commit 7ccc5eb9b8
5 changed files with 75 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
browser/main/Detail/MarkdownNoteDetail.js
View File

@@ -357,10 +357,10 @@ class MarkdownNoteDetail extends React.Component {
<div styleName='mode-tab'>
<div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('SPLIT')}>
<img styleName='item-star' src='../resources/icon/icon-mode-split-on.svg' />
<img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
</div>
<div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('EDITOR_PREVIEW')}>
<img styleName='item-star' src='../resources/icon/icon-mode-markdown-off.svg' />
<img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
</div>
</div>

24
browser/main/Detail/MarkdownNoteDetail.styl
View File

@@ -39,7 +39,7 @@
display flex
align-items center
div
width 100px
width 40px
height 100%
background-color #f9f9f9
display flex
@@ -73,7 +73,27 @@ body[data-theme="dark"]
.control-fullScreenButton
topBarButtonDark()
.mode-tab
border 1px solid #444444
div
background-color $ui-dark-noteDetail-backgroundColor
&:first-child
border-right 1px solid #444444
.active
background-color #3A404C
box-shadow 2px 0px 7px #444444
body[data-theme="solarized-dark"]
.root
border-left 1px solid $ui-solarized-dark-borderColor
background-color $ui-solarized-dark-noteDetail-backgroundColor
background-color $ui-solarized-dark-noteDetail-backgroundColor
.mode-tab
border 1px solid #586E75
div
background-color $ui-solarized-dark-noteDetail-backgroundColor
&:first-child
border-right 1px solid #586E75
.active
background-color #002B36
box-shadow 2px 0px 7px #222222

23
resources/icon/icon-mode-markdown-off-active.svg Normal file
View File

@@ -0,0 +1,23 @@
<?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">
<!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
<title>icon-mode-markdown-off</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Artboard-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1478.000000, -372.000000)" stroke-linecap="round" stroke-linejoin="round">
<g id="Group" filter="url(#filter-1)" transform="translate(1336.000000, 363.000000)" stroke="#1EC38B" stroke-width="1.55555556">
<g id="icon-mode-markdown-off" transform="translate(143.000000, 10.000000)">
<polygon id="Shape" points="10.1111111 0 14 3.88888889 3.88888889 14 0 14 0 10.1111111"></polygon>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

27
resources/icon/icon-mode-split-on-active.svg Normal file
View File

@@ -0,0 +1,27 @@
<?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">
<!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
<title>icon-mode-split-on</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Artboard-4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1378.000000, -372.000000)">
<g id="Group" filter="url(#filter-1)" transform="translate(1336.000000, 363.000000)">
<g id="icon-mode-split-on" transform="translate(40.000000, 7.000000)">
<rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
<g id="sidebar" transform="translate(3.000000, 3.000000)" stroke="#1EC38B" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.55555556">
<rect id="Rectangle-path" x="0" y="0" width="14" height="14" rx="1.55555556"></rect>
<path d="M5.66666667,0 L5.66666667,14" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

2
resources/icon/icon-mode-split-on.svg
View File

@@ -17,7 +17,7 @@
<g id="Group" filter="url(#filter-1)" transform="translate(1336.000000, 363.000000)">
<g id="icon-mode-split-on" transform="translate(40.000000, 7.000000)">
<rect id="Rectangle-7" fill="#D8D8D8" opacity="0" x="0" y="0" width="20" height="20"></rect>
<g id="sidebar" transform="translate(3.000000, 3.000000)" stroke="#1EC38B" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.55555556">
<g id="sidebar" transform="translate(3.000000, 3.000000)" stroke="#C7C7C7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.55555556">
<rect id="Rectangle-path" x="0" y="0" width="14" height="14" rx="1.55555556"></rect>
<path d="M5.66666667,0 L5.66666667,14" id="Shape"></path>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB