removed text from status and delete toolbar buttons

This commit is contained in:
poanse 2026-03-02 23:36:29 +03:00
parent 9bf3bb6e13
commit b79a0c16dd
4 changed files with 28 additions and 47 deletions

View file

@ -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 = {

View file

@ -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%);

View file

@ -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;*/

View file

@ -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;
};