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: align header content

Browse source
This commit is contained in:
EnixCoda 2021-06-12 13:02:50 +08:00
parent ea674a32b5
commit 99e18504aa
No known key found for this signature in database
GPG key ID: 0C1A07377913A1DD
3 changed files with 89 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/MetaBar.tsx
View file

@ -11,14 +11,14 @@ export function MetaBar({ metaData }: Props) {
const { userName, repoName, branchName } = metaData
const { repoUrl, userUrl } = platform.resolveUrlFromMetaData(metaData)
return (
<Flex flexDirection="column" justifyContent="space-between" className={'meta-bar'}>
<>
<Breadcrumb className={'user-and-repo'}>
<Breadcrumb.Item href={userUrl}>{userName}</Breadcrumb.Item>
<Breadcrumb.Item href={repoUrl}>
<Text fontWeight="bolder">{repoName}</Text>
</Breadcrumb.Item>
</Breadcrumb>
<Flex flexWrap="nowrap">
<Flex paddingTop={1} flexWrap="nowrap" alignItems="flex-start">
<div className={'octicon-wrapper'}>
<GitBranchIcon size="small" />
</div>
@ -26,6 +26,6 @@ export function MetaBar({ metaData }: Props) {
{branchName || '...'}
</BranchName>
</Flex>
</Flex>
</>
)
}

63
src/components/SideBar.tsx
View file

@ -130,50 +130,51 @@ export function SideBar() {
onLeave={sidebarToggleMode === 'float' ? () => setShowSideBar(false) : undefined}
>
<div className={'gitako-side-bar-body'}>
<div className={'close-side-bar-button-position'}>
{sidebarToggleMode === 'persistent' && (
<button
title={'Collapse sidebar'}
className={'close-side-bar-button'}
onClick={toggleShowSideBar}
>
<Icon className={'action-icon'} type={'tab'} />
</button>
)}
<button
title={'Toggle sidebar dock mode between float and persistent'}
className={cx('close-side-bar-button', {
active: sidebarToggleMode === 'persistent',
})}
onClick={() =>
configContext.onChange({
sidebarToggleMode: sidebarToggleMode === 'float' ? 'persistent' : 'float',
})
}
>
<Icon className={'action-icon'} type={'pin'} />
</button>
</div>
<div
className={'gitako-side-bar-content'}
onClick={showSettings ? toggleShowSettings : undefined}
>
<div className={'header'}>
<div className={'close-side-bar-button-position'}>
{sidebarToggleMode === 'persistent' && (
<button
title={'Collapse sidebar'}
className={'close-side-bar-button'}
onClick={toggleShowSideBar}
>
<Icon className={'action-icon'} type={'tab'} />
</button>
)}
<button
title={'Toggle sidebar dock mode between float and persistent'}
className={cx('close-side-bar-button', {
active: sidebarToggleMode === 'persistent',
})}
onClick={() =>
configContext.onChange({
sidebarToggleMode: sidebarToggleMode === 'float' ? 'persistent' : 'float',
})
}
>
<Icon className={'action-icon'} type={'pin'} />
</button>
</div>
{metaData && <MetaBar metaData={metaData} />}
</div>
{run(() => {
switch (state) {
case 'disabled':
return null
case 'getting-access-token':
return <LoadingIndicator text={'Getting access token...'} />
case 'after-getting-access-token':
case 'meta-loading':
return <LoadingIndicator text={'Fetching repo meta...'} />
case 'error-due-to-auth':
return <AccessDeniedDescription />
default:
return metaData ? (
<>
<div className={'header'}>
<MetaBar metaData={metaData} />
</div>
return (
metaData && (
<IIFC>
{() => (
<FileExplorer
@ -186,8 +187,8 @@ export function SideBar() {
/>
)}
</IIFC>
</>
) : null
)
)
}
})}
</div>

108
src/styles/index.scss
View file

@ -449,48 +449,6 @@ $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;
width: $button-size;
height: $button-size;
border-radius: $button-size;
// feedback to click should be instant
&:not(:active) {
transition: background linear 0.3s;
}
&.active .octicon {
color: var(--gitako-icon-primary);
}
.action-icon {
color: var(--gitako-icon-tertiary);
width: 20px;
height: 20px;
text-align: center;
.octicon {
width: 100%;
height: 100%;
}
.Pin,
.Tab {
transform: rotateY(180deg);
}
}
}
.close-side-bar-button + .close-side-bar-button {
margin-left: 4px;
}
}
.#{$name}-side-bar-content {
display: flex;
flex: 1;
@ -499,24 +457,66 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
.header {
position: relative;
min-height: 62px; // GitHub header height if login
background: var(--gitako-bg-tertiary);
padding: 6px 10px;
flex-shrink: 0;
position: relative; // prevent overlap by outline of other elements
.meta-bar {
position: relative; // prevent overlap by outline of other elements
min-height: 62px; // GitHub header height if login
flex-shrink: 0;
padding: 8px 10px;
padding-right: $button-size * 2 + 8px; // space for toggle buttons
background: var(--gitako-bg-tertiary);
.user-and-repo {
display: inline; // would be override by CSS rule of section from @primer/css
line-height: 32px;
.user-and-repo a {
a {
color: var(--gitako-text-link);
white-space: normal;
}
}
.branch-name {
margin-left: 4px;
padding: 4px 6px; // did not align well for some reason :/
color: var(--gitako-branch-name-text);
background-color: var(--gitako-branch-name-bg);
}
.close-side-bar-button-position {
float: right;
z-index: 1; // prevent being covered by following elements
.close-side-bar-button {
@include icon-button;
width: $button-size;
height: $button-size;
border-radius: $button-size;
// feedback to click should be instant
&:not(:active) {
transition: background linear 0.3s;
}
&.active .octicon {
color: var(--gitako-icon-primary);
}
.action-icon {
color: var(--gitako-icon-tertiary);
width: 20px;
height: 20px;
text-align: center;
.octicon {
width: 100%;
height: 100%;
}
.Pin,
.Tab {
transform: rotateY(180deg);
}
}
}
.branch-name {
.close-side-bar-button + .close-side-bar-button {
margin-left: 4px;
padding: 4px 6px; // did not align well for some reason :/
color: var(--gitako-branch-name-text);
background-color: var(--gitako-branch-name-bg);
}
}
}