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

chore: change the position to fixed

Browse source
This commit is contained in:
EnixCoda 2021-01-31 23:58:31 +08:00
parent f3f86a79ea
commit f32dfd0722
No known key found for this signature in database
GPG key ID: 0C1A07377913A1DD
2 changed files with 42 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/SideBar.tsx
View file

@ -107,15 +107,13 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
</Portal>
<Resizable className={cx({ hidden: error || !shouldShow })} baseSize={baseSize}>
<div className={'gitako-side-bar-body'}>
<div className={'close-side-bar-button-position'}>
<button className={'close-side-bar-button'} onClick={toggleShowSideBar}>
<Icon className={'action-icon'} type={'x'} />
</button>
</div>
<div className={'gitako-side-bar-content'}>
<div className={'header'}>
{metaData ? <MetaBar metaData={metaData} /> : <div />}
<div className={'close-side-bar-button-position'}>
<button className={'close-side-bar-button'} onClick={toggleShowSideBar}>
<Icon className={'action-icon'} type={'x'} />
</button>
</div>
</div>
<div className={'header'}>{metaData ? <MetaBar metaData={metaData} /> : <div />}</div>
{errorDueToAuth ? (
<AccessDeniedError hasToken={Boolean(accessToken)} />
) : (

72
src/styles/index.scss
View file

@ -303,7 +303,9 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
font-size: 0;
}
}
.#{$name}-side-bar-body {
$button-size: 32px;
width: 100%;
height: 100%;
display: flex;
@ -334,6 +336,37 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
text-align: center;
}
.close-side-bar-button-position {
position: absolute;
right: 6px;
top: 6px;
z-index: 1; // prevent being covered by following elements
.close-side-bar-button {
@include icon-button;
@include button-color;
width: $button-size;
height: $button-size;
border-radius: $button-size;
// feedback to click should be instant
&:not(:active) {
transition: background linear 0.3s;
}
.action-icon {
color: var(--gitako-icon-tertiary);
width: 20px;
height: 20px;
text-align: center;
.octicon {
width: 100%;
height: 100%;
}
}
}
}
.#{$name}-side-bar-content {
display: flex;
flex: 1;
@ -342,7 +375,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
min-height: 0; // make content shrinkable
.header {
$button-size: 32px;
position: relative;
.meta-bar {
@ -364,38 +396,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
background-color: var(--gitako-branch-name-bg);
}
}
.close-side-bar-button-position {
position: absolute;
right: 6px;
top: 0;
height: 100%;
display: inline-flex;
align-items: center;
.close-side-bar-button {
@include icon-button;
@include button-color;
width: $button-size;
height: $button-size;
border-radius: $button-size;
// feedback to click should be instant
&:not(:active) {
transition: background linear 0.3s;
}
.action-icon {
color: var(--gitako-icon-tertiary);
width: 20px;
height: 20px;
text-align: center;
.octicon {
width: 100%;
height: 100%;
}
}
}
}
}
.description {
@ -478,9 +478,9 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
}
&.disabled {
pointer-events: none;
color: var(--gitako-text-disabled);
}
pointer-events: none;
color: var(--gitako-text-disabled);
}
display: flex;
justify-content: space-between;
align-items: center;