prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(settings-bar): make position of toggle icons static

Browse source
This commit is contained in:
EnixCoda 2018-06-12 23:43:31 +08:00
parent 560a64d768
commit b8287a287f
2 changed files with 43 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/SettingsBar.js
View file

@ -108,20 +108,14 @@ export default class SettingsBar extends preact.Component {
const { toggleShowSettings, activated } = this.props
return (
<div className={'gitako-settings-bar'}>
<div className={'placeholder-row'}>
<h3>{activated ? 'Settings' : ''}</h3>
{activated ? (
<Icon
type={'chevron-down'}
className={'hide-settings-icon'}
onClick={toggleShowSettings}
/>
) : (
<Icon type={'gear'} className={'show-settings-icon'} onClick={toggleShowSettings} />
)}
</div>
{activated && (
<h3 className={'gitako-settings-bar-title'}>
Settings
</h3>
)}
{activated && (
<div className={'gitako-settings-bar-content'}>
<div className={'shadow-shelter'} />
<div className={'gitako-settings-bar-content-section access-token'}>
<h4>Access Token</h4>
<span>With access token provided, Gitako can access more repositories.</span>
@ -200,6 +194,17 @@ export default class SettingsBar extends preact.Component {
</div>
</div>
)}
<div className={'placeholder-row'}>
{activated ? (
<Icon
type={'chevron-down'}
className={'hide-settings-icon'}
onClick={toggleShowSettings}
/>
) : (
<Icon type={'gear'} className={'show-settings-icon'} onClick={toggleShowSettings} />
)}
</div>
</div>
)
}

30
src/content.less
View file

@ -284,9 +284,30 @@
}
.@{name}-settings-bar {
border-top: 1px solid #eaecef;
z-index: 2;
background: #fafbfc;
display: flex;
flex-direction: column;
&-title {
border-top: 1px solid #eaecef;
padding: 6px 10px;
box-shadow: 0 1px 8px 0 rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.12);
z-index: 1;
}
&-content {
padding: 0 10px;
flex: 1;
overflow: auto;
position: relative;
.shadow-shelter {
position: absolute;
width: 100%;
height: 6px;
left: 0;
background: #fafbfc;
z-index: 1;
}
&-section {
padding-bottom: 10px;
}
@ -324,9 +345,10 @@
}
.placeholder-row {
display: flex;
justify-content: space-between;
justify-content: flex-end;
align-items: center;
padding: 6px 10px;
border-top: 1px solid #eaecef;
.show-settings-icon {
width: 20px;
@ -334,8 +356,8 @@
cursor: pointer;
}
.hide-settings-icon {
width: 15px;
height: 24px;
width: 20px;
height: 20px;
cursor: pointer;
}
}