obsidian-plugin/silvanocerza_github-gitless-sync
1
0
Fork 0
mirror of https://github.com/silvanocerza/github-gitless-sync.git synced 2026-07-22 05:41:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add buttons in actions gutter

Browse source
This commit is contained in:
Silvano Cerza 2025-02-20 16:36:14 +01:00
parent 8b1d04d110
commit e024c2c4df
2 changed files with 157 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/views/conflicts-resolution/action-button.tsx Normal file
View file

@ -0,0 +1,59 @@
interface ButtonProps {
size?: number | string;
tooltipText: string;
onClick: () => void;
className?: string;
}
const BaseButton: React.FC<ButtonProps & { children: React.ReactNode }> = ({
size = 24,
tooltipText,
onClick,
children,
className,
}) => (
<div
style={{ padding: 0 }}
aria-label={tooltipText}
data-tooltip-position="top"
data-tooltip-delay="300"
className="clickable-icon"
onClick={onClick}
>
<svg
xmlns="http://www.w3.org/2000/svg"
style={{
width: `${size}`,
height: `${size}`,
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
}}
viewBox={`0 0 ${size} ${size}`}
className={className}
>
{children}
</svg>
</div>
);
export const ButtonCross: React.FC<ButtonProps> = (props) => (
<BaseButton {...props} className="lucide lucide-x">
<path d="M18 6 6 18" />
<path d="m6 6 12 12" />
</BaseButton>
);
export const ButtonLeftArrow: React.FC<ButtonProps> = (props) => (
<BaseButton {...props} className="lucide arrow-big-left">
<path d="M18 15h-6v4l-7-7 7-7v4h6v6z" />
</BaseButton>
);
export const ButtonRightArrow: React.FC<ButtonProps> = (props) => (
<BaseButton {...props} className="lucide lucide-arrow-big-right">
<path d="M6 9h6V5l7 7-7 7v-4H6V9z" />
</BaseButton>
);

98
src/views/conflicts-resolution/actions-gutter.tsx
View file

@ -1,5 +1,10 @@
import * as React from "react";
import { DiffChunk } from "./diff";
import {
ButtonCross,
ButtonLeftArrow,
ButtonRightArrow,
} from "./action-button";
interface ActionsGutterProps {
diffChunks: DiffChunk[];
@ -38,6 +43,90 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
: chunk.type == "remove"
? "var(--color-red)"
: "var(--color-yellow)";
let buttons: React.JSX.Element;
if (chunk.type === "add") {
buttons = (
<foreignObject
x={actualWidth - 48}
y={topLeft + lineHeight / 2 - 12}
width="48"
height="24"
>
<div style={{ display: "flex", flexDirection: "row" }}>
<ButtonCross
tooltipText="Delete lines"
onClick={() => {
console.log("CLICKED");
}}
/>
<ButtonLeftArrow
tooltipText="Add lines"
onClick={() => {
console.log("CLICKED");
}}
/>
</div>
</foreignObject>
);
} else if (chunk.type === "remove") {
buttons = (
<foreignObject
x={0}
y={topLeft + lineHeight / 2 - 12}
width="48"
height="24"
>
<div style={{ display: "flex", flexDirection: "row" }}>
<ButtonRightArrow
tooltipText="Add lines"
onClick={() => {
console.log("CLICKED");
}}
/>
<ButtonCross
tooltipText="Delete lines"
onClick={() => {
console.log("CLICKED");
}}
/>
</div>
</foreignObject>
);
} else if (chunk.type === "modify") {
buttons = (
<foreignObject
x={0}
y={topLeft + lineHeight / 2 - 12}
width={actualWidth}
height="24"
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
}}
>
<ButtonRightArrow
tooltipText="Overwrite right lines"
onClick={() => {
console.log("CLICKED");
}}
/>
<ButtonLeftArrow
tooltipText="Overwrite left lines"
onClick={() => {
console.log("CLICKED");
}}
/>
</div>
</foreignObject>
);
} else {
// Just in case we add other types in the future
throw Error("Unknown chunk type");
}
return (
<g key={index}>
<path
@ -53,6 +142,15 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
stroke={color}
strokeWidth="1"
/>
{buttons}
{/* <foreignObject
x={0}
y={topLeft + lineHeight / 2 - 12}
width="48"
height="24"
>
<div style={{ display: "flex", flexDirection: "row" }}></div>
</foreignObject> */}
</g>
);
};