Skip to content
This repository has been archived by the owner on Jan 2, 2025. It is now read-only.

Commit

Permalink
improve header wrapping when adding to studio
Browse files Browse the repository at this point in the history
  • Loading branch information
@anastasiya1155 @calyptobai
anastasiya1155 authored and calyptobai committed Jan 30, 2024
1 parent e9a0a21 commit b14769c
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 66 deletions.
69 changes: 39 additions & 30 deletions client/src/Project/CurrentTabContent/DocTab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,45 +396,50 @@ const DocTab = ({
<div
className={`flex flex-col flex-1 h-full overflow-auto ${
noBorder ? '' : 'border-l border-bg-border'
}`}
} inline-container`}
>
<div className="w-full h-10 px-4 flex justify-between gap-1 items-center flex-shrink-0 border-b border-bg-border bg-bg-sub">
<div
className={`w-full px-4 flex gap-1 items-center flex-shrink-0 border-b border-bg-border bg-bg-sub ${
!!studio && studioId ? 'wrap-in-md-container' : 'h-10'
}`}
>
<div className="flex items-center gap-3 body-s text-label-title ellipsis">
{favicon ? (
<img src={favicon} alt={relativeUrl} className="w-4 h-4" />
) : (
<MagazineIcon sizeClassName="w-4 h-4" />
)}
<span className="ellipsis">{title || relativeUrl}</span>
{!!studio && studioId && (
<>
<div className="w-px h-4 bg-bg-border flex-shrink-0" />
<Badge
text={
selectedSections.length
? t('# selected section', {
count: selectedSections.length,
})
: t('Whole page')
}
type="blue-subtle"
size="small"
/>
<p
className={`select-none ${
tokenCount < 18000 && tokenCount > 1500
? 'text-yellow'
: tokenCount <= 1500
? 'text-green'
: 'text-red'
} code-mini`}
>
{humanNumber(tokenCount)}{' '}
<Trans count={tokenCount}># tokens</Trans>
</p>
</>
)}
</div>
{!!studio && studioId && (
<div className="flex items-center gap-3 body-s">
<div className="w-px h-4 bg-bg-border flex-shrink-1 ml-3" />
<Badge
text={
selectedSections.length
? t('# selected section', {
count: selectedSections.length,
})
: t('Whole page')
}
type="blue-subtle"
size="small"
/>
<p
className={`select-none ${
tokenCount < 18000 && tokenCount > 1500
? 'text-yellow'
: tokenCount <= 1500
? 'text-green'
: 'text-red'
} code-mini`}
>
{humanNumber(tokenCount)}{' '}
<Trans count={tokenCount}># tokens</Trans>
</p>
</div>
)}
<div className="flex-1" />
{focusedPanel === side &&
(studioId && (hasChanges || isEditingSelection) ? (
<div className="flex items-center gap-3">
Expand All @@ -446,6 +451,7 @@ const DocTab = ({
onClick={handleEditRanges}
shortcut={selectLinesShortcut}
title={t('Select sections')}
tooltipClassName="flex-shrink-0"
>
<Trans>Select sections</Trans>
</Button>
Expand All @@ -458,6 +464,7 @@ const DocTab = ({
onClick={handleCancelStudio}
title={t('Cancel')}
shortcut={escapeShortcut}
tooltipClassName="flex-shrink-0"
>
<Trans>Cancel</Trans>
</Button>
Expand All @@ -467,6 +474,7 @@ const DocTab = ({
onClick={handleSubmitToStudio}
title={t(isDocInContext ? 'Save changes' : 'Submit')}
shortcut={saveShortcut}
tooltipClassName="flex-shrink-0"
>
<Trans>{isDocInContext ? 'Save changes' : 'Submit'}</Trans>
</Button>
Expand All @@ -480,6 +488,7 @@ const DocTab = ({
onClick={handleEditRanges}
shortcut={selectLinesShortcut}
title={t('Edit selected sections')}
tooltipClassName="flex-shrink-0"
>
<Trans>Edit sections</Trans>
</Button>
Expand Down
75 changes: 39 additions & 36 deletions client/src/Project/CurrentTabContent/FileTab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -521,51 +521,54 @@ const FileTab = ({
<div
className={`flex flex-col flex-1 h-full overflow-auto ${
noBorder ? '' : 'border-l border-bg-border'
}`}
} inline-container`}
onClick={handleClick}
>
<div className="w-full h-10 px-4 flex justify-between gap-1 items-center flex-shrink-0 border-b border-bg-border bg-bg-sub">
<div className="flex items-center gap-3 body-s text-label-title ellipsis">
<div
className={`w-full px-4 flex gap-1 items-center flex-shrink-0 border-b border-bg-border bg-bg-sub ${
!!studio && studioId ? 'wrap-in-sm-container' : 'h-10'
}`}
>
<div className="flex items-center gap-3 body-s text-label-title ellipsis flex-shrink">
<FileIcon filename={path} noMargin />
<BreadcrumbsPathContainer
path={path}
repoRef={repoRef}
nonInteractive
/>
{!!studio && studioId && (
<>
<div className="w-px h-4 bg-bg-border flex-shrink-0" />
<Badge
text={
selectedLines.length
? selectedLines.length === 1
? t('Lines # - #', {
start: selectedLines[0][0] + 1,
end: selectedLines[0][1]
? selectedLines[0][1] + 1
: '',
})
: t('# ranges', { count: selectedLines.length })
: t('Whole file')
}
type="blue-subtle"
size="small"
/>
<p
className={`select-none ${
tokenCount < 18000 && tokenCount > 1500
? 'text-yellow'
: tokenCount <= 1500
? 'text-green'
: 'text-red'
} code-mini`}
>
{humanNumber(tokenCount)}{' '}
<Trans count={tokenCount}># tokens</Trans>
</p>
</>
)}
</div>
{!!studio && studioId && (
<div className="flex items-center gap-3 body-s flex-shrink-0">
<div className="w-px h-4 bg-bg-border flex-shrink-0 ml-3" />
<Badge
text={
selectedLines.length
? selectedLines.length === 1
? t('Lines # - #', {
start: selectedLines[0][0] + 1,
end: selectedLines[0][1] ? selectedLines[0][1] + 1 : '',
})
: t('# ranges', { count: selectedLines.length })
: t('Whole file')
}
type="blue-subtle"
size="small"
/>
<p
className={`select-none ${
tokenCount < 18000 && tokenCount > 1500
? 'text-yellow'
: tokenCount <= 1500
? 'text-green'
: 'text-red'
} code-mini flex-shrink-0`}
>
{humanNumber(tokenCount)}{' '}
<Trans count={tokenCount}># tokens</Trans>
</p>
</div>
)}
<div className="flex-1" />
<div className="flex items-center gap-3">
{focusedPanel === side &&
(studioId && (hasChanges || isEditingRanges) ? (
Expand Down
28 changes: 28 additions & 0 deletions client/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -587,6 +587,34 @@
--bloop-head-img: var(--default-light-bloop-head-img);
}
}

.inline-container {
container-type: inline-size;
}

@container (max-width: 519px) {
.wrap-in-sm-container {
@apply flex-wrap py-2 h-auto;
}
}

@container (min-width: 520px) {
.wrap-in-sm-container {
@apply h-10;
}
}

@container (max-width: 749px) {
.wrap-in-md-container {
@apply flex-wrap py-2 h-auto;
}
}

@container (min-width: 750px) {
.wrap-in-md-container {
@apply h-10;
}
}
}

body {
Expand Down

0 comments on commit b14769c

Please sign in to comment.