Skip to content

Commit

Permalink
feat: redesign source control view
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vinzent03
Vinzent03 committed Sep 30, 2022
1 parent 0a22e7b commit 06f3c22
Show file tree
Hide file tree
Showing 5 changed files with 343 additions and 425 deletions.
112 changes: 40 additions & 72 deletions src/ui/sidebar/components/fileComponent.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
$: side = (view.leaf.getRoot() as any).side == "left" ? "right" : "left";
window.setTimeout(
() => buttons.forEach((b) => setIcon(b, b.getAttr("data-icon")!, 16)),
() => buttons.forEach((b) => setIcon(b, b.getAttr("data-icon")!)),
0
);
Expand Down Expand Up @@ -82,85 +82,61 @@
</script>

<!-- TODO: Fix arai-label for left sidebar and if it's too long -->
<main on:mouseover={hover} on:click|self={showDiff} on:focus>
<main on:mouseover={hover} on:click|self={showDiff} on:focus class="nav-file">
<!-- svelte-ignore a11y-unknown-aria-attribute -->
<span
class="path"
<div
class="nav-file-title"
aria-label-position={side}
aria-label={change.vault_path.split("/").last() != change.vault_path
? change.vault_path
: ""}
on:click|self={showDiff}
on:auxclick|self={showDiff}
>
{change.vault_path.split("/").last()?.replace(".md", "")}
</span>
<div class="tools">
<div class="buttons">
{#if view.app.vault.getAbstractFileByPath(change.vault_path)}
<div class="nav-file-title-content">
{change.vault_path.split("/").last()?.replace(".md", "")}
</div>
<div class="tools">
<div class="buttons">
{#if view.app.vault.getAbstractFileByPath(change.vault_path)}
<div
data-icon="go-to-file"
aria-label="Open File"
bind:this={buttons[1]}
on:auxclick={open}
on:click={open}
class="clickable-icon"
/>
{/if}
<div
data-icon="skip-back"
aria-label="Discard"
bind:this={buttons[0]}
on:click={discard}
class="clickable-icon"
/>
<div
data-icon="go-to-file"
aria-label="Open File"
bind:this={buttons[1]}
on:auxclick={open}
on:click={open}
data-icon="plus"
aria-label="Stage"
bind:this={buttons[2]}
on:click={stage}
class="clickable-icon"
/>
{/if}
<div
data-icon="skip-back"
aria-label="Discard"
bind:this={buttons[0]}
on:click={discard}
/>
<div
data-icon="plus"
aria-label="Stage"
bind:this={buttons[2]}
on:click={stage}
/>
</div>
<div class="type" data-type={change.working_dir}>
{change.working_dir}
</div>
</div>
<span class="type" data-type={change.working_dir}
>{change.working_dir}</span
>
</div>
</main>

<style lang="scss">
main {
cursor: pointer;
background-color: var(--background-secondary);
border-radius: 4px;
width: 98%;
display: flex;
justify-content: space-between;
font-size: 0.8rem;
margin-bottom: 2px;
.path {
color: var(--text-muted);
padding-top: 2px;
padding-left: 10px;
padding-bottom: 2px;
white-space: nowrap;
max-width: 75%;
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
color: var(--nav-item-color-active);
background-color: var(--nav-item-background-active);
font-weight: var(--nav-item-weight-active);
}
.tools {
display: flex;
align-items: center;
margin-left: auto;
.type {
height: 16px;
width: 16px;
margin: 0;
padding-left: var(--size-2-1);
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -174,17 +150,9 @@
.buttons {
display: flex;
> * {
color: var(--text-faint);
height: 16px;
width: 16px;
margin: 0;
transition: all 0.2s;
border-radius: 2px;
margin-right: 1px;
&:hover {
color: var(--text-normal);
background-color: var(--interactive-accent);
}
padding: var(--size-2-1) var(--size-2-1);
border-radius: var(--clickable-icon-radius);
height: auto;
}
}
}
Expand Down
53 changes: 13 additions & 40 deletions src/ui/sidebar/components/pulledFileComponent.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,61 +31,34 @@
}
</script>

<main on:mouseover={hover} on:click|self={open} on:focus>
<main on:mouseover={hover} on:click|self={open} on:focus class="nav-file">
<!-- svelte-ignore a11y-unknown-aria-attribute -->
<span
class="path"
<div
class="nav-file-title"
aria-label-position={side}
aria-label={change.vault_path.split("/").last() != change.vault_path
? change.vault_path
: ""}
on:click|self={open}
>
{change.vault_path.split("/").last()?.replace(".md", "")}
</span>
<div class="tools">
<span class="type" data-type={change.working_dir}
>{change.working_dir}</span
>
<div class="nav-file-title-content">
{change.vault_path.split("/").last()?.replace(".md", "")}
</div>
<div class="tools">
<span class="type" data-type={change.working_dir}
>{change.working_dir}</span
>
</div>
</div>
</main>

<style lang="scss">
main {
cursor: pointer;
background-color: var(--background-secondary);
border-radius: 4px;
width: 98%;
display: flex;
justify-content: space-between;
font-size: 0.8rem;
margin-bottom: 2px;
.path {
color: var(--text-muted);
padding-top: 2px;
padding-left: 10px;
padding-bottom: 2px;
white-space: nowrap;
max-width: 75%;
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
color: var(--nav-item-color-active);
background-color: var(--nav-item-background-active);
font-weight: var(--nav-item-weight-active);
}
.tools {
display: flex;
align-items: center;
margin-left: auto;
.type {
height: 16px;
width: 16px;
margin: 0;
padding-left: var(--size-2-1);
display: flex;
align-items: center;
justify-content: center;
Expand Down
123 changes: 41 additions & 82 deletions src/ui/sidebar/components/stagedFileComponent.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,106 +58,65 @@
}
</script>

<main on:mouseover={hover} on:focus on:click|self={showDiff}>
<main on:mouseover={hover} on:focus on:click|self={showDiff} class="nav-file">
<!-- svelte-ignore a11y-unknown-aria-attribute -->
<span
class="path"
<div
class="nav-file-title"
aria-label-position={side}
aria-label={formattedPath.split("/").last() != formattedPath
? formattedPath
: ""}
on:click={showDiff}
>
{formattedPath.split("/").last()?.replace(".md", "")}
</span>
<div class="tools">
<div class="buttons">
{#if view.app.vault.getAbstractFileByPath(formattedPath)}
<div class="nav-file-title-content">
{formattedPath.split("/").last()?.replace(".md", "")}
</div>
<div class="tools">
<div class="buttons">
{#if view.app.vault.getAbstractFileByPath(formattedPath)}
<div
data-icon="go-to-file"
aria-label="Open File"
bind:this={buttons[1]}
on:click={open}
class="clickable-icon"
/>
{/if}
<div
data-icon="go-to-file"
aria-label="Open File"
bind:this={buttons[1]}
on:click={open}
data-icon="minus"
aria-label="Unstage"
bind:this={buttons[0]}
on:click={unstage}
class="clickable-icon"
/>
{/if}
<div
data-icon="minus"
aria-label="Unstage"
bind:this={buttons[0]}
on:click={unstage}
/>
</div>
<div class="type" data-type={change.index}>{change.index}</div>
</div>
<span class="type" data-type={change.index}>{change.index}</span>
</div>
</main>

<style lang="scss">
main {
cursor: pointer;
background-color: var(--background-secondary);
border-radius: 4px;
width: 98%;
.tools {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
margin-bottom: 2px;
.path {
color: var(--text-muted);
padding-top: 2px;
padding-left: 10px;
padding-bottom: 2px;
white-space: nowrap;
max-width: 75%;
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
color: var(--nav-item-color-active);
background-color: var(--nav-item-background-active);
font-weight: var(--nav-item-weight-active);
}
.tools {
margin-left: auto;
.type {
padding-left: var(--size-2-1);
display: flex;
align-items: center;
.type {
height: 16px;
width: 16px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
&[data-type="M"] {
color: orange;
}
&[data-type="D"] {
color: red;
}
&[data-type="A"] {
color: yellowgreen;
}
&[data-type="R"] {
color: violet;
}
justify-content: center;
&[data-type="M"] {
color: orange;
}
&[data-type="D"] {
color: red;
}
.buttons {
display: flex;
> * {
color: var(--text-faint);
height: 16px;
width: 16px;
margin: 0;
transition: all 0.2s;
border-radius: 2px;
margin-right: 1px;
&:hover {
color: var(--text-normal);
background-color: var(--interactive-accent);
}
}
}
.buttons {
display: flex;
> * {
padding: var(--size-2-1) var(--size-2-1);
border-radius: var(--clickable-icon-radius);
height: auto;
}
}
}
Expand Down

0 comments on commit 06f3c22

Please sign in to comment.