Skip to content

Commit

Permalink
Improve UI
Browse files Browse the repository at this point in the history 
* Clean up menu design
* Add basic dark/light theme support
* Keep page-level properties

Thanks, @phildenhoff

Co-authored-by: Can Altıparmak <can6parmak@gmail.com>
  • Loading branch information
@phildenhoff @c6p
phildenhoff and c6p authored May 14, 2022
1 parent a8fa4c6 commit 4111575
Show file tree
Hide file tree
Showing 2 changed files with 276 additions and 87 deletions.
206 changes: 139 additions & 67 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,41 @@
<template>
<div id="wrapper" @click="onClickOutside">
<div id="hypothesis" v-if="visible">
<div id="hypothesis" v-if="visible" :class="theme">
<div id="form">
<label for="token">API token:</label>
<input id="token" :value="apiToken" @change="setAPIToken" />
<button id="fetch" @click="fetchUpdates()">Fetch Updates</button>
<label for="user">User:</label>
<input
id="user"
placeholder="username@hypothes.is"
:value="user"
@change="setUser"
/>
<button id="create" @click="loadPage(item)">Get Selected Page</button>
<div class="accountSetupFields">
<h2>Account setup</h2>
<div class="fieldLabel">
<label for="token">API token</label>
</div>
<input
id="token"
:value="apiToken"
@change="setAPIToken"
spellcheck="false"
/>
<div class="fieldLabel">
<label for="user">Username</label>
</div>
<input
id="user"
placeholder="username@hypothes.is"
:value="user"
@change="setUser"
/>
<p class="text-small">
If you are not using a third party hypothes.is provider, your user
account is <code>username@hypothes.is</code>
</p>
</div>
<button
id="fetch"
@click="fetchUpdates()"
:disabled="fetching || updating"
>
<span v-if="fetching || updating">Fetching updates... </span
><span v-else>🔄 Fetch latest notes</span>
</button>
<h2>Create page from hypothesis notes</h2>
<v-select
ref="select"
class="select"
Expand All @@ -29,6 +52,13 @@
{{ uri }}
</template>
</v-select>
<button
id="create"
@click="loadPage(item)"
:disabled="item.uri === '' && item.title === ''"
>
Add page notes to graph
</button>
</div>
</div>
<div v-if="fetching || updating" class="lds-ripple">
Expand Down Expand Up @@ -61,6 +91,7 @@ export default {
user: "",
annotations: [],
item: { uri: "", title: "" },
theme: "dark",
};
},
computed: {
Expand All @@ -76,7 +107,7 @@ export default {
].reverse();
},
},
mounted() {
async mounted() {
logseq.once("ui:visible:changed", ({ visible }) => {
visible && (this.visible = true);
// init
Expand All @@ -88,6 +119,12 @@ export default {
logseq.on("ui:visible:changed", ({ visible }) => {
visible && this.$nextTick(() => this.$refs.select.$el.focus());
});
logseq.App.onThemeModeChanged((s) => {
this.theme = s.mode;
});
this.theme = (await logseq.App.getUserConfigs()).preferredThemeMode;
},
methods: {
fuseSearch(options, search) {
Expand Down Expand Up @@ -161,48 +198,53 @@ export default {
return res.data.rows;
},
getPageNotes(uri) {
let notes = logseq.settings?.annotations?.filter((x) => x.uri === uri);
const title = notes[0]?.document.title[0];
const hids = new Set(notes.map(({ id }) => id));
let annotations = logseq.settings?.annotations?.filter(
(x) => x.uri === uri
);
const title = annotations[0]?.document.title[0];
const hids = new Set(annotations.map(({ id }) => id));
let noteMap = new Map(
notes.reduce((acc, { id, text, tags, target, updated, references }) => {
const exact = target[0]?.selector?.filter((s) => "exact" in s)[0]
?.exact;
tags = tags.map((t) => `#[[${t}]]`).join(" ");
let content = "";
if (exact) {
content += `📌 ${exact} ${tags}`;
if (text) content += `\n📝 ${text}`;
} else {
content += `📝 ${text} ${tags}`;
}
let properties = { hid: id, updated };
// add deleted references
for (const [i, r] of references?.entries() ?? []) {
if (!hids.has(r)) {
acc.push([
r,
{
content: "🗑️",
properties: { hid: r },
parent: references[i - 1],
},
]);
annotations.reduce(
(acc, { id, text, tags, target, updated, references }) => {
const exact = target[0]?.selector?.filter((s) => "exact" in s)[0]
?.exact;
tags = tags.map((t) => `#[[${t}]]`).join(" ");
let content = "";
if (exact) {
content += `📌 ${exact} ${tags}`;
if (text) content += `\n📝 ${text}`;
} else {
content += `📝 ${text} ${tags}`;
}
}
// add note
acc.push([
id,
{
content,
properties,
parent: references
? references[references.length - 1]
: undefined,
},
]);
return acc;
}, [])
let properties = { hid: id, updated };
// add deleted references
for (const [i, r] of references?.entries() ?? []) {
if (!hids.has(r)) {
acc.push([
r,
{
content: "🗑️",
properties: { hid: r },
parent: references[i - 1],
},
]);
}
}
// add note
acc.push([
id,
{
content,
properties,
parent: references
? references[references.length - 1]
: undefined,
},
]);
return acc;
},
[]
)
);
// create tree
let after = null;
Expand Down Expand Up @@ -231,7 +273,8 @@ export default {
const logseqTitle =
(await this.findPageName(uri)) || (await this.findPageNameV1(uri));
//If page isn't found, create new one with hypothesisTitle. This approach allows for the title to be changed by the user
//If page isn't found, create new one with hypothesisTitle. This
//approach allows for the title to be changed by the user
const pageTitle = logseqTitle
? logseqTitle
: "hypothesis__/" + hypothesisTitle;
Expand Down Expand Up @@ -261,8 +304,9 @@ export default {
if (finds.length > 1) {
//TODO: throw error
throw new Error("Multiple pages has the same title");
} else if (finds == 0) {
} else if (finds.length == 0) {
//throw new Error("Page doesn't exist")
console.log("Page doesn't exist");
return;
} else return finds[0]["original-name"];
},
Expand All @@ -277,43 +321,71 @@ export default {
async loadPageNotes(page, uri, title, noteMap) {
if (!page || !uri) return;
// hypothesis-uri is the prop by which the plugin identifies each page
// hypothesis-naming-scheme is added for improved backwards compatability for later updates
const pagePropBlockString = `:PROPERTIES:\n:hypothesis-uri: ${uri}\n:hypothesis-title: "${title}"\n:hypothesis-naming-scheme: 0.2.0\n:END:`; // for both org and markdown
const pageProperties = {
// hypothesis-uri is the prop by which the plugin identifies each page
"hypothesis-uri": uri,
"hypothesis-title": title,
// hypothesis-naming-scheme is added for improved backwards compatability for later updates
"hypothesis-naming-scheme": "0.2.0",
};
let pageBlocksTree = await logseq.Editor.getCurrentPageBlocksTree();
let pagePropBlock = pageBlocksTree[0];
if (!pagePropBlock) {
pagePropBlock = await logseq.Editor.insertBlock(
page.name,
pagePropBlockString,
{ isPageBlock: true, properties: { preBlock: true } }
);
pagePropBlock = await logseq.Editor.insertBlock(page.name, "", {
isPageBlock: true,
properties: pageProperties,
});
pageBlocksTree = [pagePropBlock];
}
const blocks = pageBlocksTree.slice(1);
const blockMap = new Map(
flatten(blocks).map((b) => [b.properties.hid, b])
flatten(blocks)
.filter((b) => b?.properties && b?.properties?.hid)
.map((b) => [b.properties.hid, b])
);
const n_b = [...noteMap.values()].filter(
(n) => !blockMap.has(n.properties.hid)
);
for (const n of n_b) {
const { hid, updated } = n.properties;
const content = `${n.content}\n:PROPERTIES:\n:hid:${hid}\n:updated:${updated}\n:END:`;
const content = n.content.trim();
const { parent, after } = n;
const source = blockMap.get(parent ?? after);
const block = await logseq.Editor.insertBlock(
source?.uuid ?? page.name,
content,
{ sibling: !parent, isPageBlock: !source }
{
properties: {
hid,
updated,
},
sibling: !parent,
isPageBlock: !source,
}
);
blockMap.set(hid, block);
}
await logseq.Editor.updateBlock(pagePropBlock.uuid, pagePropBlockString);
// upgrade pre-block with page-properties from old format
const newFormat = "preBlock?" in pagePropBlock;
if (!newFormat)
await logseq.Editor.updateBlock(pagePropBlock.uuid, "");
await Object.entries(pageProperties).map(async ([property, value]) => {
await logseq.Editor.upsertBlockProperty(
pagePropBlock.uuid,
property,
value
);
});
// workaround to force preBlock? - see https://github.com/logseq/logseq/issues/5298
if (!newFormat) {
const content = (await logseq.Editor.getBlock(pagePropBlock.uuid)).content;
await logseq.Editor.updateBlock(pagePropBlock.uuid, "");
await logseq.Editor.updateBlock(pagePropBlock.uuid, content);
}
},
async updatePage() {
const page = await logseq.Editor.getCurrentPage();
Expand Down
Loading

0 comments on commit 4111575

Please sign in to comment.