Skip to content
Permalink

Comparing changes

This is a direct comparison between two commits made in this repository or its related repositories. View the default comparison for this range or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: braebo/nutab
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 65cae964eb78f86f5490e6599910c8b18d0f2304
Choose a base ref
..
head repository: braebo/nutab
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 91ca006483fb66c9b44018d2510957794540d07f
Choose a head ref
2 changes: 1 addition & 1 deletion src/lib/data/transactions.ts
Original file line number Diff line number Diff line change
@@ -3,8 +3,8 @@ import type { Bookmark } from './types'
import { defaultBookmarks, defaultFolder } from './bookmarks/defaults'
import { activeFolder } from './dbStore'
import { log } from 'fractils'
import db from './db'
import Dexie from 'dexie'
import db from './db'

/**
* Default bookmark folder and bookmarks db tables.
5 changes: 5 additions & 0 deletions src/lib/stores/bookmarkEditor.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import type { Bookmark } from '$lib/data/types'
import type { Writable } from 'svelte/store'
import { writable } from 'svelte/store'

export const bookmarkEditor: Writable<Bookmark> = writable()
6 changes: 6 additions & 0 deletions src/lib/stores/debugStore.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { localStorageStore } from 'fractils'
import { writable } from 'svelte/store'

export const debug = writable(true)

export const showDebugger = localStorageStore('showDebugger', false)
24 changes: 19 additions & 5 deletions src/lib/ui/Bookmarks/BookmarkArt.svelte
Original file line number Diff line number Diff line change
@@ -1,15 +1,25 @@
<script>
<script lang="ts">
import { settings } from '$lib/settings/settingsStore'
import { mapRange } from 'fractils'
export let title = '🔗'
$: longestWord = title.split(' ').reduce((p: string[], c: string[]) => {
return c.length > p.length ? c : p
}, []).length
$: fontSize = mapRange(Math.min(longestWord, 12), 6, 12, 20, 14)
</script>

<div
class="art"
style="width: var(--size, {$settings.ranges.iconSize.value}px); height: var(--size, {$settings
.ranges.iconSize.value}px);"
style="
width: var(--size, {$settings.ranges.iconSize.value}px);
height: var(--size, {$settings.ranges.iconSize.value}px);
font-size: var(--font-size, {fontSize}px);
"
>
{@html title}
<span class="title">{@html title}</span>
</div>

<style>
@@ -25,10 +35,14 @@
color: var(--foreground);
background: var(--background);
border-radius: 10px;
box-shadow: 0px 4.7px 10px -3px rgba(0, 0, 0, 0.275),
0px 7.3px 5.6px -1px rgba(0, 0, 0, 0.09), 0px 14px 15px -1px rgba(0, 0, 0, 0.14);
word-break: break-all;
text-align: center;
overflow: hidden;
}
.title {
font-weight: 700;
}
</style>
108 changes: 79 additions & 29 deletions src/lib/ui/Bookmarks/BookmarkEditor.svelte
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
<script lang="ts">
import type { Bookmark } from '$lib/data/types'
import { createEventDispatcher, onMount } from 'svelte'
import { createEventDispatcher, onMount, tick } from 'svelte'
import { bookmarkEditor } from '$lib/stores/bookmarkEditor'
import { newBookmark } from '$lib/data/transactions'
import BookmarkArt from '$lib/ui/Bookmarks/BookmarkArt.svelte'
import Tags from '$lib/ui/Bookmarks/Tags.svelte'
import Button from '$lib/ui/Button.svelte'
import { getClipboardUrl } from '$lib/utils/getClipboardUrl'
import { log } from 'fractils'
export let i: number
export let bookmark_id: string
export let editorSettings: Bookmark
export let i: number = 0
export let bookmark_id: string = ''
const dispatch = createEventDispatcher()
let titleInput: HTMLInputElement
let urlInput: HTMLInputElement
let descriptionInput: HTMLInputElement
let descriptionFocused = false
$: placeholder = descriptionFocused ? '' : 'description'
@@ -26,42 +28,47 @@
tag = event.detail.tags
}
async function updateTags(event: CustomEvent, index: number, id: string) {
editorSettings['tags'] = event.detail.tags
$bookmarkEditor['tags'] = event.detail.tags
}
export let editorContext: 'edit' | 'create' = 'edit'
function handleSave() {
if (editorContext === 'edit') {
// TODO: update bookmark
// updateBookmark(bookmark_id, editorSettings)
// updateBookmark(bookmark_id, $bookmarkEditor)
} else {
newBookmark(editorSettings)
newBookmark($bookmarkEditor)
}
}
onMount(() => {
onMount(async () => {
titleInput.select()
const test = getClipboardUrl()
console.log('Got Url:', test)
;(async function checkClipboard() {
const clipboardContents = await getClipboardUrl()
log('clipboardContents :', 'cyan', 'black', 25)
log(clipboardContents, 'cyan', 'black', 25)
$bookmarkEditor.url = clipboardContents
})()
})
</script>

<div class="settings-container">
{#if editorSettings['image']}
<img name="image" src={editorSettings['image']} alt={editorSettings['title']} />
<div class="editor-container">
{#if $bookmarkEditor['image']}
<img name="image" src={$bookmarkEditor['image']} alt={$bookmarkEditor['title']} />
{:else}
<!-- Fallback Image -->
<div class="bookmark-art">
<BookmarkArt
--foreground={editorSettings['foreground']}
--background={editorSettings['background']}
--foreground={$bookmarkEditor['foreground']}
--background={$bookmarkEditor['background']}
--size="100px"
title={editorSettings['title']}
title={$bookmarkEditor['title']}
/>
<div class="color-settings">
<input name="background" type="color" bind:value={editorSettings['background']} />
<input name="foreground" type="color" bind:value={editorSettings['foreground']} />
<input name="background" type="color" bind:value={$bookmarkEditor['background']} />
<input name="foreground" type="color" bind:value={$bookmarkEditor['foreground']} />
</div>
</div>
{/if}
@@ -71,7 +78,7 @@
name="title"
placeholder="title"
bind:this={titleInput}
bind:value={editorSettings['title']}
bind:value={$bookmarkEditor['title']}
on:click={() => titleInput.select()}
/>
</div>
@@ -83,7 +90,7 @@
{placeholder}
type="text"
bind:this={descriptionInput}
bind:value={editorSettings['description']}
bind:value={$bookmarkEditor['description']}
on:focus={() => {
descriptionFocused = true
}}
@@ -99,19 +106,18 @@
name="url"
type="text"
placeholder="url"
bind:value={editorSettings['url']}
on:focus={(e) => (e.target.placeholder = '')}
on:blur={(e) => (e.target.placeholder = 'url')}
bind:this={urlInput}
on:click={() => urlInput.select()}
bind:value={$bookmarkEditor['url']}
autoComplete="off"
/>
</div>

<div class="setting">
<!-- <label for="tags">tags</label> -->
<!-- <input name="tags" type="text" bind:value={editorSettings['tags']} /> -->
<div name="tags" class="tags">
<Tags
on:updateTags={(e) => updateTags(e, i, bookmark_id)}
bind:tags={editorSettings['tags']}
bind:tags={$bookmarkEditor['tags']}
placeholder={'new tag'}
on:tags={handleTags}
autoComplete={false}
@@ -144,7 +150,7 @@
</div>

<style lang="scss">
.settings-container {
.editor-container {
display: flex;
position: relative;
flex-direction: column;
@@ -157,6 +163,26 @@
background: var(--light-a);
color: var(--dark-a);
box-shadow: 0 5px 15px 5px #00000011;
perspective: 1200px;
transform-style: preserve-3d;
animation: floatDown ease-out 1s forwards;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
/* 3d CSS Float Down Animation */
@keyframes floatDown {
0% {
opacity: 0;
transform: perspective(500px) translate3d(0, -5px, 25px);
}
100% {
opacity: 1;
transform: perspective(500px) translate3d(0, 0, 0);
}
}
}
.setting {
@@ -183,8 +209,13 @@
transition: border 0.2s;
&:hover,
&:focus {
&::placeholder {
opacity: 0;
}
}
&:focus,
&:hover {
border: 1px solid rgba(var(--light-b-rgb), 1);
}
}
@@ -196,7 +227,7 @@
margin: auto;
margin-bottom: 1.1rem;
color: var(--light-c);
color: var(--dark-d);
font: 0.8rem monospace;
}
@@ -249,6 +280,25 @@
.bookmark-art {
position: relative;
perspective: 1200px;
transform-style: preserve-3d;
animation: floatDown ease-out 1.25s forwards;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
/* 3d CSS Float Down Animation */
@keyframes floatDown {
0% {
opacity: 0;
transform: perspective(500px) translate3d(0, -25px, 50px);
}
100% {
opacity: 1;
transform: perspective(500px) translate3d(0, 0, 0);
}
}
}
.color-settings {
position: absolute;
Loading