aljaz/rabbit
1
0
Fork 0
mirror of https://github.com/aljazceru/rabbit.git synced 2025-12-18 22:44:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Revert "feat: remove scrollbar"

Browse Source 
This reverts commit 605a87558e.
This commit is contained in:
Shusui MOYATANI
2023-07-10 20:04:34 +09:00
parent 4ee3ba9613
commit ba8b08dc90
3 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/column/Column.tsx
View File

@@ -59,7 +59,9 @@ const Column: Component<ColumnProps> = (props) => {
fallback={ fallback={
<> <>
<div class="shrink-0 border-b">{props.header}</div> <div class="shrink-0 border-b">{props.header}</div>
<div class="flex flex-col overflow-y-scroll scroll-smooth">{props.children}</div> <div class="scrollbar flex flex-col overflow-y-scroll scroll-smooth">
{props.children}
</div>
</> </>
} }
> >
@@ -76,7 +78,7 @@ const Column: Component<ColumnProps> = (props) => {
<div>{i18n()('column.back')}</div> <div>{i18n()('column.back')}</div>
</button> </button>
</div> </div>
<ul class="flex h-full flex-col overflow-y-scroll scroll-smooth pb-8"> <ul class="scrollbar flex h-full flex-col overflow-y-scroll scroll-smooth pb-8">
<TimelineContentDisplay timelineContent={timeline} /> <TimelineContentDisplay timelineContent={timeline} />
</ul> </ul>
</div> </div>

6
src/components/column/ColumnSettings.tsx
View File

@@ -19,12 +19,14 @@ type ColumnSettingsSectionProps = {
children: JSX.Element; children: JSX.Element;
}; };
const ColumnSettingsSection: Component<ColumnSettingsSectionProps> = (props) => ( const ColumnSettingsSection: Component<ColumnSettingsSectionProps> = (props) => {
return (
<div class="flex flex-col gap-2 border-b p-2"> <div class="flex flex-col gap-2 border-b p-2">
<div>{props.title}</div> <div>{props.title}</div>
<div>{props.children}</div> <div>{props.children}</div>
</div> </div>
); );
};
const ColumnSettings: Component<ColumnSettingsProps> = (props) => { const ColumnSettings: Component<ColumnSettingsProps> = (props) => {
const i18n = useTranslation(); const i18n = useTranslation();
@@ -43,7 +45,7 @@ const ColumnSettings: Component<ColumnSettingsProps> = (props) => {
return ( return (
<div class="flex flex-col border-t"> <div class="flex flex-col border-t">
<ColumnSettingsSection title={i18n()('column.config.columnWidth')}> <ColumnSettingsSection title={i18n()('column.config.columnWidth')}>
<div class="flex h-9 gap-2 overflow-x-scroll"> <div class="scrollbar flex h-9 gap-2 overflow-x-scroll">
<button <button
class="rounded-md border px-4 hover:bg-stone-100" class="rounded-md border px-4 hover:bg-stone-100"
onClick={() => setColumnWidth('widest')} onClick={() => setColumnWidth('widest')}

17
src/index.css
View File

@@ -38,3 +38,20 @@ em-emoji-picker {
width: 360px; width: 360px;
max-width: 90vw; max-width: 90vw;
} }
.scrollbar::-webkit-scrollbar:vertical {
width: 8px;
}
.scrollbar::-webkit-scrollbar:horizontal {
height: 8px;
}
.scrollbar::-webkit-scrollbar {
background-color: #fbf9f9;
}
.scrollbar::-webkit-scrollbar-thumb {
background-color: #fce9ec;
border-radius: 8px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background-color: #fcd9dc;
}