mirror of
https://github.com/poanse/obsidian-taskmap.git
synced 2026-07-22 06:05:58 +00:00
removed text from status and delete toolbar buttons
This commit is contained in:
parent
9bf3bb6e13
commit
b79a0c16dd
4 changed files with 28 additions and 47 deletions
|
|
@ -1,10 +1,10 @@
|
|||
export const TOOLBAR_BUTTON_SIZE = 18 * 2;
|
||||
export const SUBTOOLBAR_BUTTON_SIZE = 16 * 2;
|
||||
export const SUBTOOLBAR_BUTTON_SIZE = 18 * 2;
|
||||
export const TOOLBAR_GAP = 2;
|
||||
export const SUBTOOLBAR_GAP = 2;
|
||||
export const TOOLBAR_PADDING = { x: 2, y: 2 };
|
||||
export const TOOLBAR_PADDING = { x: 4, y: 4 };
|
||||
export const SUBTOOLBAR_PADDING = { x: 4, y: 4 };
|
||||
export const TOOLBAR_SHIFT = 4;
|
||||
export const TOOLBAR_SHIFT = 6;
|
||||
export const SUBTOOLBAR_SHIFT = 8;
|
||||
|
||||
export const TOOLBAR_SIZE = {
|
||||
|
|
|
|||
|
|
@ -17,11 +17,9 @@
|
|||
let {
|
||||
iconCode,
|
||||
context,
|
||||
text = ""
|
||||
}: {
|
||||
iconCode: IconCode,
|
||||
context: Context,
|
||||
text?: string
|
||||
} = $props();
|
||||
|
||||
let isPressedDown = $state(false);
|
||||
|
|
@ -110,7 +108,6 @@
|
|||
|
||||
<div class="button"
|
||||
use:tooltip={getTooltipText(iconCode)}
|
||||
class:with-text={text.length > 0}
|
||||
class:disabled={isButtonDisabled}
|
||||
class:no-pan={true}
|
||||
class:is-pressed-up={isPressed}
|
||||
|
|
@ -156,7 +153,6 @@
|
|||
{:else if iconCode === IconCode.STATUS_DONE}
|
||||
<Circle class={classString + " done"}/>
|
||||
{/if}
|
||||
{text}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -215,19 +211,6 @@
|
|||
fill: #212B24;
|
||||
}
|
||||
}
|
||||
.button.with-text {
|
||||
width: 128px;
|
||||
height: 32px;
|
||||
justify-content: left;
|
||||
gap: 8px;
|
||||
padding: 4px;
|
||||
|
||||
font-size: 16px;
|
||||
font-family: var(--font-text);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.005em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.button.disabled {
|
||||
color: color-mix(in srgb, #7E7E7E 100%, #000000 50%);
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
import {slideCustom} from '../Custom';
|
||||
import type {Context} from "../Context.svelte.js";
|
||||
import {
|
||||
buttonTextFromIconCode,
|
||||
IconCode, StatusCode, type TaskId, toIconCode
|
||||
} from "../types";
|
||||
import {RootTaskId} from "../NodePositionsCalculator";
|
||||
|
|
@ -74,7 +73,16 @@
|
|||
]).map(x => toIconCode(x)));
|
||||
|
||||
let subtoolbarTopShift = (buttons: IconCode[]) => {
|
||||
return - (buttons.length * SUBTOOLBAR_BUTTON_SIZE + (buttons.length -1)*SUBTOOLBAR_GAP + 2*SUBTOOLBAR_PADDING.y + SUBTOOLBAR_SHIFT);
|
||||
return - (
|
||||
buttons.length * SUBTOOLBAR_BUTTON_SIZE +
|
||||
(buttons.length -1)*SUBTOOLBAR_GAP +
|
||||
2*SUBTOOLBAR_PADDING.y +
|
||||
SUBTOOLBAR_SHIFT
|
||||
);
|
||||
};
|
||||
let subtoolbarLeftShift = (index: number) => {
|
||||
return index * TOOLBAR_BUTTON_SIZE +
|
||||
Math.max(index - 1, 0) * TOOLBAR_GAP;
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -106,12 +114,18 @@
|
|||
transition:slideCustom={{ duration: 300, easing: quintOut, axis: '-y' }}
|
||||
style="
|
||||
top: {subtoolbarTopShift(removeButtons)}px;
|
||||
left: {toolbarButtons.indexOf(IconCode.REMOVE_SUBMENU) * (TOOLBAR_BUTTON_SIZE + TOOLBAR_GAP) - 128/2 + TOOLBAR_BUTTON_SIZE / 2}px;
|
||||
left: {subtoolbarLeftShift(toolbarButtons.indexOf(IconCode.REMOVE_SUBMENU))}px;
|
||||
"
|
||||
>
|
||||
{#key context.updateOnZoomCounter}
|
||||
<Button iconCode={IconCode.REMOVE_SINGLE} {context} text={buttonTextFromIconCode(IconCode.REMOVE_SINGLE)}/>
|
||||
<Button iconCode={IconCode.REMOVE_MULTIPLE} {context} text={buttonTextFromIconCode(IconCode.REMOVE_MULTIPLE)}/>
|
||||
<Button
|
||||
iconCode={IconCode.REMOVE_SINGLE}
|
||||
{context}
|
||||
/>
|
||||
<Button
|
||||
iconCode={IconCode.REMOVE_MULTIPLE}
|
||||
{context}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -124,11 +138,14 @@
|
|||
transition:slideCustom={{ duration: 300, easing: quintOut, axis: '-y' }}
|
||||
style="
|
||||
top: {subtoolbarTopShift(statusButtons)}px;
|
||||
left: {toolbarButtons.indexOf(IconCode.STATUS_SUBMENU) * (TOOLBAR_BUTTON_SIZE + TOOLBAR_GAP) - 128/2 + TOOLBAR_BUTTON_SIZE / 2}px;
|
||||
left: {subtoolbarLeftShift(toolbarButtons.indexOf(IconCode.STATUS_SUBMENU))}px;
|
||||
"
|
||||
>
|
||||
{#each statusButtons as button}
|
||||
<Button iconCode={button} {context} text={buttonTextFromIconCode(button)}/>
|
||||
<Button
|
||||
iconCode={button}
|
||||
{context}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -140,7 +157,7 @@
|
|||
<style>
|
||||
.toolbar {
|
||||
gap: 2px;
|
||||
padding: 2px 2px;
|
||||
padding: 4px 4px;
|
||||
/*background: #181818;*/
|
||||
background: #0f0f0fff;
|
||||
/*background-color: #1E1E1E;*/
|
||||
|
|
|
|||
19
src/types.ts
19
src/types.ts
|
|
@ -54,25 +54,6 @@ export const classStringFromStatusCode = (code: StatusCode) => {
|
|||
}
|
||||
};
|
||||
|
||||
export const buttonTextFromIconCode = (code: IconCode) => {
|
||||
switch (code) {
|
||||
case IconCode.STATUS_READY:
|
||||
return "Ready";
|
||||
case IconCode.STATUS_IN_PROGRESS:
|
||||
return "Progress";
|
||||
case IconCode.STATUS_DRAFT:
|
||||
return "Draft";
|
||||
case IconCode.STATUS_DONE:
|
||||
return "Done";
|
||||
case IconCode.REMOVE_SINGLE:
|
||||
return "Single task";
|
||||
case IconCode.REMOVE_MULTIPLE:
|
||||
return "Task branch";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
export const toIconCode = (s: StatusCode) => {
|
||||
return (s + IconCode.STATUS_DRAFT) as IconCode;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue