mirror of
https://github.com/XFox111/TabsAsideExtension.git
synced 2026-07-02 19:52:47 +03:00
Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 dependabot[bot]
|
ccf5e5f363 | ||
 xfox111
|
2b7171805c | ||
|
xfox111
|
7158e0cbad | ||
|
xfox111
|
ff96b3de99 |
@@ -15,7 +15,7 @@ body:
|
||||
attributes:
|
||||
label: Description
|
||||
description: A clear and concise description of what the bug is.
|
||||
placeholder: e.g. Sometimes when generating a password not all character sets are included
|
||||
placeholder: e.g. Sometimes clicking on the extension icon doesn't open the side panel
|
||||
validations:
|
||||
required: true
|
||||
|
||||
@@ -105,3 +105,5 @@ body:
|
||||
required: true
|
||||
- label: The provided reproduction is a minimal reproducible example of the bug.
|
||||
required: true
|
||||
- label: This issue was written in English.
|
||||
required: true
|
||||
|
||||
@@ -60,3 +60,5 @@ body:
|
||||
options:
|
||||
- label: Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
|
||||
required: true
|
||||
- label: This issue was written in English.
|
||||
required: true
|
||||
|
||||
@@ -117,7 +117,7 @@ jobs:
|
||||
with:
|
||||
name: chrome
|
||||
|
||||
- uses: wdzeng/chrome-extension@v1.3.0
|
||||
- uses: wdzeng/chrome-extension@v2.0.1
|
||||
with:
|
||||
extension-id: ${{ secrets.CHROME_EXT_ID }}
|
||||
zip-path: tabs-aside-*-chrome.zip
|
||||
@@ -135,7 +135,7 @@ jobs:
|
||||
with:
|
||||
name: chrome
|
||||
|
||||
- uses: wdzeng/edge-addon@v2.1.0
|
||||
- uses: wdzeng/edge-addon@v2.1.1
|
||||
with:
|
||||
product-id: ${{ secrets.EDGE_PRODUCT_ID }}
|
||||
zip-path: tabs-aside-*-chrome.zip
|
||||
@@ -152,7 +152,7 @@ jobs:
|
||||
with:
|
||||
name: firefox
|
||||
|
||||
- uses: wdzeng/firefox-addon@v1.2.0
|
||||
- uses: wdzeng/firefox-addon@v1.2.1
|
||||
with:
|
||||
addon-guid: ${{ secrets.FIREFOX_EXT_UUID }}
|
||||
xpi-path: tabs-aside-*-firefox.zip
|
||||
|
||||
@@ -22,7 +22,7 @@ jobs:
|
||||
extver=`jq -r ".version" package.json`
|
||||
echo "version=$extver" >> "$GITHUB_OUTPUT"
|
||||
|
||||
- uses: dev-build-deploy/release-me@v0.18.2
|
||||
- uses: dev-build-deploy/release-me@v1.0.0
|
||||
with:
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
prefix: v
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
export default function VirtualList<T>(props: VirtualListProps<T>): React.ReactElement
|
||||
{
|
||||
const [columns, setColumns] = useState<number>(1);
|
||||
const [rowsToRender, setRowsToRender] = useState<number>(0);
|
||||
const [rowIndex, setRowIndex] = useState<number>(0);
|
||||
const additionalRows = 3;
|
||||
|
||||
const heights: number[] = useMemo(() =>
|
||||
{
|
||||
if (typeof props.itemHeight === "number")
|
||||
return props.items.map(() => props.itemHeight as number);
|
||||
|
||||
return props.items.map(props.itemHeight);
|
||||
}, [props.items, props.itemHeight]);
|
||||
const minHeight: number = Math.min(...heights);
|
||||
|
||||
const totalRows: number = Math.ceil(props.items.length / columns);
|
||||
const takeCount: number = rowsToRender * columns;
|
||||
|
||||
const renderStartIndex: number = rowIndex * columns;
|
||||
const paddingTop: number = calculateHeight(heights, 0, rowIndex, columns);
|
||||
const paddingBottom: number = calculateHeight(heights, rowIndex + rowsToRender, totalRows, columns);
|
||||
|
||||
const renderedItems = props.items.slice(renderStartIndex, renderStartIndex + takeCount);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const container = document.querySelector(props.containerSelector);
|
||||
|
||||
const handleResize = (): void =>
|
||||
{
|
||||
if (!container)
|
||||
return;
|
||||
|
||||
const newRowsToRender: number = Math.ceil(container.clientHeight / minHeight) + additionalRows;
|
||||
|
||||
setRowsToRender(newRowsToRender);
|
||||
|
||||
if (!props.columnMinWidth)
|
||||
{
|
||||
setColumns(1);
|
||||
return;
|
||||
}
|
||||
|
||||
const newColumns: number = Math.floor((container.clientWidth - (props.horizontalOffset ?? 0)) / (props.columnMinWidth));
|
||||
setColumns(Math.max(1, newColumns));
|
||||
};
|
||||
handleResize();
|
||||
|
||||
const handleScroll = (e: Event): void =>
|
||||
{
|
||||
const target = e.target as HTMLElement;
|
||||
const topOffset: number = target.scrollHeight - calculateHeight(heights, 0, totalRows, columns);
|
||||
const scrollTop: number = Math.max(0, target.scrollTop - topOffset);
|
||||
|
||||
const newIndex: number = Math.floor(scrollTop / minHeight - Math.floor(additionalRows / 2));
|
||||
console.log("scroll", scrollTop, newIndex);
|
||||
setRowIndex(Math.max(0, newIndex));
|
||||
};
|
||||
container?.addEventListener("scroll", handleScroll);
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
return () =>
|
||||
{
|
||||
container?.removeEventListener("scroll", handleScroll);
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, [totalRows, props.columnMinWidth, props.horizontalOffset, heights, columns]);
|
||||
|
||||
return (
|
||||
<section tabIndex={ 0 } style={ { paddingTop, paddingBottom } } className={ props.className }>
|
||||
{ renderedItems.map((item, index) => props.itemRenderer(item, rowIndex * columns + index)) }
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export type VirtualListProps<T> = {
|
||||
className?: string;
|
||||
itemHeight: number | ((item: T, index: number) => number);
|
||||
containerSelector: string;
|
||||
horizontalOffset?: number;
|
||||
columnMinWidth?: number;
|
||||
items: T[];
|
||||
itemRenderer: (item: T, index: number) => React.ReactElement;
|
||||
};
|
||||
|
||||
function calculateHeight(heights: number[], rowStart: number, rowEnd: number, columns: number): number
|
||||
{
|
||||
let height = 0;
|
||||
|
||||
for (let i = rowStart; i < rowEnd; i++)
|
||||
{
|
||||
const rowHeights = heights.slice(i * columns, (i + 1) * columns);
|
||||
height += Math.max(...rowHeights);
|
||||
}
|
||||
|
||||
return height;
|
||||
}
|
||||
@@ -45,37 +45,7 @@ export default function CollectionsProvider({ children }: React.PropsWithChildre
|
||||
|
||||
const addCollection = async (collection: CollectionItem): Promise<void> =>
|
||||
{
|
||||
// TEMP
|
||||
// await updateStorage([collection, ...collections]);
|
||||
const items: CollectionItem[] = [];
|
||||
|
||||
for (let i = 0; i < 128; i++)
|
||||
items.push({
|
||||
title: i.toString(),
|
||||
items: [
|
||||
{
|
||||
type: "tab",
|
||||
title: "Google",
|
||||
url: "https://www.google.com"
|
||||
},
|
||||
{
|
||||
type: "group",
|
||||
title: "Group",
|
||||
color: "blue",
|
||||
items: [
|
||||
{
|
||||
type: "tab",
|
||||
title: "Facebook",
|
||||
url: "https://www.facebook.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
timestamp: Date.now() + i,
|
||||
type: "collection"
|
||||
});
|
||||
|
||||
await updateStorage(items);
|
||||
await updateStorage([collection, ...collections]);
|
||||
};
|
||||
|
||||
const removeItem = async (...indices: number[]): Promise<void> =>
|
||||
|
||||
@@ -22,8 +22,6 @@ import { snapHandleToCursor } from "../../utils/dnd/snapHandleToCursor";
|
||||
import { useStyles_CollectionListView } from "./CollectionListView.styles";
|
||||
import SearchBar from "./SearchBar";
|
||||
import StorageCapacityIssueMessage from "./messages/StorageCapacityIssueMessage";
|
||||
import VirtualList from "@/components/VirtualList";
|
||||
import calculateCollectionHeight from "../../utils/calculateCollectionHeight";
|
||||
|
||||
export default function CollectionListView(): ReactElement
|
||||
{
|
||||
@@ -62,8 +60,6 @@ export default function CollectionListView(): ReactElement
|
||||
setShowHidden(newShowHidden);
|
||||
}, []);
|
||||
|
||||
// FIXME: disable drag and drop if filters are active!!!
|
||||
|
||||
const handleDragStart = (event: DragStartEvent): void =>
|
||||
{
|
||||
setActive(event.active.data.current as DndItem);
|
||||
@@ -119,55 +115,7 @@ export default function CollectionListView(): ReactElement
|
||||
</Button>
|
||||
</div>
|
||||
:
|
||||
<DndContext
|
||||
sensors={ sensors }
|
||||
collisionDetection={ collisionDetector(!tilesView) }
|
||||
onDragStart={ handleDragStart }
|
||||
onDragEnd={ handleDragEnd }
|
||||
modifiers={ [snapHandleToCursor] }
|
||||
>
|
||||
<SortableContext
|
||||
items={ resultList.map((_, index) => index.toString()) }
|
||||
strategy={ tilesView ? verticalListSortingStrategy : rectSortingStrategy }
|
||||
>
|
||||
|
||||
<VirtualList
|
||||
className={ mergeClasses(cls.collectionList, !tilesView && cls.listView, !!(!tilesView && compactView) && cls.compactList) }
|
||||
itemHeight={ item => calculateCollectionHeight(item, tilesView, compactView ?? true) }
|
||||
horizontalOffset={ 32 }
|
||||
columnMinWidth={ !tilesView ? 360 : undefined }
|
||||
items={ resultList }
|
||||
containerSelector="article"
|
||||
itemRenderer={ (item, index) =>
|
||||
<CollectionView key={ item.timestamp } collection={ item } index={ index } compact={ compactView } />
|
||||
} />
|
||||
</SortableContext>
|
||||
|
||||
<DragOverlay dropAnimation={ null }>
|
||||
{ active !== null ?
|
||||
active.item.type === "collection" ?
|
||||
<CollectionView collection={ active.item } index={ -1 } dragOverlay />
|
||||
:
|
||||
<CollectionContext.Provider
|
||||
value={ {
|
||||
tabCount: 0,
|
||||
collection: resultList[active.indices[0]],
|
||||
hasPinnedGroup: true
|
||||
} }
|
||||
>
|
||||
{ active.item.type === "group" ?
|
||||
<GroupView group={ active.item } indices={ [-1] } collectionId={ -1 } dragOverlay />
|
||||
:
|
||||
<TabView tab={ active.item } indices={ [-1] } collectionId={ -1 } dragOverlay />
|
||||
}
|
||||
</CollectionContext.Provider>
|
||||
:
|
||||
<></>
|
||||
}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
|
||||
/* <section className={ mergeClasses(cls.collectionList, !tilesView && cls.listView, !!(!tilesView && compactView) && cls.compactList) }>
|
||||
<section className={ mergeClasses(cls.collectionList, !tilesView && cls.listView, !!(!tilesView && compactView) && cls.compactList) }>
|
||||
<DndContext
|
||||
sensors={ sensors }
|
||||
collisionDetection={ collisionDetector(!tilesView) }
|
||||
@@ -207,7 +155,7 @@ export default function CollectionListView(): ReactElement
|
||||
}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
</section> */
|
||||
</section>
|
||||
}
|
||||
</article>
|
||||
);
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
import { CollectionItem, GroupItem } from "@/models/CollectionModels";
|
||||
|
||||
export default function calculateCollectionHeight(collection: CollectionItem, tilesView: boolean, compactView: boolean): number
|
||||
{
|
||||
if (compactView)
|
||||
return collection.color ? 69.2 : 67.6;
|
||||
|
||||
if (collection.items.length < 1)
|
||||
return collection.color ? 217.6 : 219.2;
|
||||
|
||||
if (tilesView)
|
||||
{
|
||||
let height = 201.6;
|
||||
|
||||
if (collection.items.some(i => i.type === "group"))
|
||||
height = 242.4;
|
||||
|
||||
if (collection.color)
|
||||
height += 1.6;
|
||||
|
||||
return height;
|
||||
}
|
||||
|
||||
else
|
||||
{
|
||||
let baseHeight: number = collection.color ? 81.2 : 79.6;
|
||||
|
||||
baseHeight += 39.6 * collection.items.flatMap(i => i.type === "group" ? i.items : [i]).length - 6;
|
||||
|
||||
const groups: GroupItem[] = collection.items.filter(i => i.type === "group");
|
||||
|
||||
for (const group of groups)
|
||||
baseHeight += group.items.length < 1 ? 126 : 50;
|
||||
|
||||
return Math.min(baseHeight, 572);
|
||||
}
|
||||
}
|
||||
@@ -11,7 +11,7 @@ export default function useSettingsReviewDialog(dialog: DialogContextType): Prom
|
||||
if (needsReview.length > 0)
|
||||
dialog.pushCustom(
|
||||
<SettingsReviewDialog />,
|
||||
undefined,
|
||||
"alert",
|
||||
() =>
|
||||
{
|
||||
settingsForReview.removeValue();
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function useWelcomeDialog(dialog: DialogContextType): Promise<voi
|
||||
if (showWelcome || import.meta.env.DEV)
|
||||
dialog.pushCustom(
|
||||
<WelcomeDialog />,
|
||||
undefined,
|
||||
"alert",
|
||||
() =>
|
||||
{
|
||||
showWelcomeDialog.removeValue();
|
||||
|
||||
@@ -46,5 +46,9 @@
|
||||
"web-ext-run": {
|
||||
"tmp": "^0.2.6"
|
||||
}
|
||||
},
|
||||
"allowScripts": {
|
||||
"esbuild": true,
|
||||
"spawn-sync": true
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user