Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: plugin config param tooltips #30

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
+1,009 −319
Open

feat: plugin config param tooltips #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
9ee2939
feat: plugin config param tooltips
Keyrxng Nov 26, 2024
3b810d2
Merge remote-tracking branch 'upstream/main' into feat/config-param-d…
Keyrxng Nov 29, 2024
6e86827
chore: fix type
Keyrxng Nov 29, 2024
bda9f5b
chore(deps): bump ubiquity-os sdk
Keyrxng Jan 24, 2025
8a260cb
chore: minor changes - types, format
Keyrxng Feb 5, 2025
d0ef215
feat: typebox schema union handling
Keyrxng Feb 5, 2025
8e71dea
chore: new css and tweaks
Keyrxng Feb 5, 2025
1193d0b
chore: optimize fetching with new manifest, use homepage_url
Keyrxng Feb 5, 2025
26c9efa
chore: refactor input parsing for use with union toggles
Keyrxng Feb 5, 2025
3cdeff0
chore: update plugin-select with new manifest usage
Keyrxng Feb 5, 2025
2c76c9b
chore: update tooltips for union handling
Keyrxng Feb 5, 2025
6c45cf1
Merge remote-tracking branch 'upstream/main' into fix-merge-conflict
Keyrxng Feb 5, 2025
ba5d7a1
chore: md render descriptions, css fix
Keyrxng Feb 5, 2025
f9f4201
chore: button.selected, commit title, textarea alignment
Keyrxng Feb 11, 2025
26fe204
chore: union handling button-group margin fix
Keyrxng Feb 12, 2025
f4f186d
chore: remove log
Keyrxng Feb 12, 2025
9f86707
chore: reword commit title
Keyrxng Feb 12, 2025
f4f3396
Update static/scripts/config-parser.ts
Keyrxng Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .cspell.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@
"dictionaries": ["typescript", "node", "software-terms"],
"import": ["@cspell/dict-typescript/cspell-ext.json", "@cspell/dict-node/cspell-ext.json", "@cspell/dict-software-terms"],
"ignoreRegExpList": ["[0-9a-fA-F]{6}"],
"ignoreWords": ["ubiquibot", "Supabase", "supabase", "SUPABASE", "sonarjs", "mischeck", "Typebox"]
"ignoreWords": ["ubiquibot", "Supabase", "supabase", "SUPABASE", "sonarjs", "mischeck", "Typebox", "tooltiptext"]
}
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"dependencies": {
"@octokit/rest": "^21.0.2",
"@supabase/supabase-js": "^2.46.1",
"@ubiquity-os/plugin-sdk": "^1.0.11",
"@ubiquity-os/plugin-sdk": "^2.0.3",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SDK is now at 3.0.0

"@ubiquity-os/ubiquity-os-kernel": "^2.5.3",
"ajv": "^8.17.1",
"dotenv": "^16.4.4",
Expand Down
19 changes: 13 additions & 6 deletions static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@
><svg id="uos-logo" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
<path
d="M90.2449 26.0946C90.2449 24.6236 89.4133 23.2165 88.134 22.449L50.2014 0.575616C49.5617 0.191872 48.8581 0 48.0905 0C47.3868 0 46.6192 0.191872 45.9795 0.575616L8.11092 22.449C6.83157 23.2165 6 24.5596 6 26.0946V69.9054C6 71.3764 6.83157 72.7835 8.11092 73.551L46.0435 95.4244C47.3229 96.1919 48.922 96.1919 50.2014 95.4244L88.134 73.551C89.4133 72.7835 90.2449 71.4404 90.2449 69.9054V26.0946ZM82.6328 66.068C82.6328 67.7948 81.7373 69.3937 80.266 70.2252L50.4573 87.8135C49.7536 88.2612 48.922 88.453 48.0905 88.453C47.2589 88.453 46.4913 88.2612 45.7237 87.8135L15.9149 70.2252C14.4437 69.3937 13.5481 67.7948 13.5481 66.068V34.4091C13.5481 33.6416 13.9319 32.8741 14.6356 32.4903C15.3392 32.1066 16.1068 32.1066 16.8105 32.4903L21.9279 35.4963C23.1432 36.1999 23.8469 37.6069 24.7424 39.2059C24.9343 39.5256 25.0622 39.8454 25.2541 40.1013C27.493 44.1306 28.5804 48.4157 29.6039 52.573C31.5229 60.1839 33.442 68.0506 43.229 70.6089C46.4273 71.4404 49.8815 71.4404 53.0799 70.6089C62.8029 68.0506 64.7859 60.1839 66.7049 52.573C67.7284 48.4157 68.8159 44.1306 71.0547 40.1013C71.2466 39.7815 71.3746 39.4617 71.5665 39.2059C72.398 37.6069 73.1656 36.2638 74.381 35.4963L79.4984 32.4903C80.1381 32.1066 80.9696 32.1066 81.6733 32.4903C82.3769 32.8741 82.7607 33.5776 82.7607 34.4091V66.068H82.6328ZM45.8516 8.57029C47.2589 7.73884 48.986 7.73884 50.3933 8.57029L76.1721 23.8561C76.8118 24.2398 77.1956 24.4957 77.1956 25.2632C77.1956 26.0306 76.8118 26.4783 76.1721 26.8621L71.2466 29.8041C69.0717 31.0833 67.9843 33.1299 67.0248 34.9847L66.9608 35.1126C66.8329 35.3684 66.7049 35.5603 66.577 35.8161C64.1462 40.1652 62.3552 44.7701 61.3317 48.8634C59.2847 56.7941 58.5171 62.0386 51.8645 63.7655C50.6492 64.0853 49.3698 64.2132 48.1544 64.2132C46.8751 64.2132 45.6597 64.0213 44.4443 63.7655C37.7917 62.0386 36.9602 56.7941 34.9772 48.7995C33.9537 44.7062 32.1626 40.1013 29.7319 35.7522C29.6039 35.5603 29.476 35.3045 29.3481 35.1126L29.2841 34.9207C28.3246 33.1299 27.1732 31.0193 25.0622 29.7402L20.1368 26.7981C19.4971 26.4144 19.1133 25.9667 19.1133 25.1992C19.1133 24.4317 19.4971 24.1759 20.1368 23.7921L45.8516 8.57029Z"
/></svg
></div>
/>
</svg>
</div>
<div><h1>UbiquityOS Plugin Installer</h1></div>
</header>
<nav id="controls"><button id="github-sign-in"></button></nav>
Expand All @@ -24,10 +25,16 @@
><tr><td></td><td id="manifest-gui-title"></td></tr
></thead>
<tbody id="manifest-gui-body"></tbody>
<tfoot
><tr
><td></td><td><button id="reset-to-default"></button><button id="remove"></button><button id="add"></button></td></tr
></tfoot>
<tfoot>
<tr>
<td></td>
<td id="buttons">
<button id="reset-to-default"></button>
<button id="remove"></button>
<button id="add"></button>
</td>
</tr>
</tfoot>
</table>
</section>
</section>
Expand Down
5 changes: 3 additions & 2 deletions static/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,21 @@ export async function mainModule() {
renderer.manifestGuiBody.dataset.loading = "false";

try {
// needs handled better
const ubiquityOrgsToFetchOfficialConfigFrom = ["ubiquity-os"];
const fetcher = new ManifestFetcher(ubiquityOrgsToFetchOfficialConfigFrom, auth.octokit);

if (auth.isActiveSession()) {
renderer.manifestGuiBody.dataset.loading = "true";
const killNotification = toastNotification("Fetching manifest data...", { type: "info", shouldAutoDismiss: true });

const userOrgs = await auth.getGitHubUserOrgs();

const userOrgRepos = await auth.getGitHubUserOrgRepos(userOrgs);
localStorage.setItem("orgRepos", JSON.stringify(userOrgRepos));
renderOrgPicker(renderer, userOrgs);

await fetcher.fetchOrgsUbiquityOsConfigs();
await fetcher.fetchMarketplaceManifests();
await fetcher.fetchOfficialPluginConfig();
renderer.manifestGuiBody.dataset.loading = "false";
killNotification();
} else {
Expand Down
230 changes: 190 additions & 40 deletions static/manifest-gui.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,14 +131,30 @@ header #uos-logo path {
user-select: none;
background-image: linear-gradient(0deg, #101010, #202020);
margin: 0 auto;
border-radius: 4px;
box-shadow: 0 24px 48px #000000;
overflow: hidden;
opacity: 0;
transition: opacity 0.25s cubic-bezier(0, 1, 1, 1);
scrollbar-width: thin;
scrollbar-color: #303030 #101010;
}

#manifest-gui.plugin-editor {
max-height: calc(100vh - 192px);
overflow: auto;
display: flex;
flex-direction: column;
gap: 24px;
padding: 16px;
width: 100%;
}

#manifest-gui.plugin-editor > #manifest-gui-body.rendered[data-loading="false"] {
display: inline-table;
}

#manifest-gui-title {
right: 0;
left: 0;
width: 100%;
}

Expand Down Expand Up @@ -205,6 +221,53 @@ header #uos-logo path {
border-top: 1px solid #303030;
}

.table-data-value.config-input.buttons {
background-color: transparent;
border: none;
padding: 8px 10px;
}

.table-data-value.config-input.buttons > .button-group {
display: flex;
gap: 8px;
margin-bottom: 4px;
}

.button-group {
margin: 8px;
}

.table-data-value.config-input.buttons > .button-group > button {
background-color: #101010;
color: #fff;
font-size: 16px;
border: 1px solid #303030;
border-radius: 4px;
font-family: "Proxima Nova", sans-serif;
cursor: pointer;
transition:
background-color 0.25s,
border-color 0.25s;
}

.table-data-value.config-input.buttons > .button-group > button:hover {
background-color: #404040;
border-color: #606060;
}

.table-data-value.config-input.buttons > .button-group > button:active {
background-color: #606060;
}

.table-data-value.config-input.buttons > .button-group > button:active {
background-color: #606060;
}

.table-data-value.config-input.buttons > .button-group > button.selected {
background-color: #303030;
border-color: #606060;
}

.table-data-header {
padding: 8px 16px;
}
Expand All @@ -216,54 +279,103 @@ header #uos-logo path {
.table-data-value > input,
textarea {
padding: 8px 16px;
margin: 8px;
}

#controls {
position: fixed;
right: 24px;
top: 24px;
}

#buttons {
display: flex;
gap: 8px;
}

tfoot {
display: flex;
justify-content: flex-end;
width: 100%;
}

button {
appearance: none;
background: 0 0;
background: none;
color: #fff;
font-size: 16px;
border: none;
padding: 8px 16px;
border-radius: 4px;
opacity: 0.75;
opacity: 0.85;
font-family: "Proxima Nova", sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition:
background-color 0.2s,
opacity 0.2s,
transform 0.1s;
}

button:hover {
background-color: #404040;
cursor: pointer;
opacity: 1;
transform: scale(1.05);
}

button:active {
background-color: #606060;
transform: scale(0.98);
}

button#reset-to-default {
background-color: #303030;
color: #fff;
display: flex;
align-items: center;
gap: 6px;
transition:
background-color 0.2s,
transform 0.2s;
}

button#reset-to-default::before {
content: "\21BA";
font-size: 18px;
}

button#reset-to-default:hover {
background-color: #404040;
transform: scale(1.05);
}

button#reset-to-default:active {
background-color: #505050;
transform: scale(0.98);
}
button#reset-to-default::before {
content: "♻️";

button#remove {
color: #f00;
transition:
background-color 0.2s,
transform 0.2s;
}

button#remove::before {
content: "−";
}
button#reset-to-default:hover::before {
content: "Use Defaults";

button#remove:hover {
background-color: rgba(255, 0, 0, 0.1);
transform: scale(1.05);
}
button#reset-to-default:active::before {
content: "♻️♻️♻️♻️♻️";

button#remove:active {
background-color: rgba(255, 0, 0, 0.2);
transform: scale(0.98);
}

button#remove:active::before {
content: "−";
}

button#remove.disabled {
Expand All @@ -274,41 +386,74 @@ button#remove.disabled {
pointer-events: none;
}

button#remove::before {
content: "−";
}
button#remove:hover::before {
content: "Remove";
}
button#remove {
color: #f00;
button#add {
color: #0f0;
transition:
background-color 0.2s,
transform 0.2s;
}
button#remove:hover {
background-color: #ff000010;

button#add::before {
content: "+";
}
button#remove:active {
background-color: #ff000020;

button#add:hover {
background-color: rgba(0, 255, 0, 0.1);
transform: scale(1.05);
}
button#remove:active::before {
content: "−−−−−−";

button#add:active {
background-color: rgba(0, 255, 0, 0.2);
transform: scale(0.98);
}
button#add::before {

button#add:active::before {
content: "+";
}
button#add:hover::before {
content: "Add";

#manifest-gui pre {
margin: 0 0 16px;
}
button#add {
color: #0f0;

.tooltip {
position: relative;
display: inline-block;
cursor: help;
padding-left: 8px;
}
button#add:hover {
background-color: #00ff0010;

.tooltip:last-child .tooltiptext {
top: -100%;
}
button#add:active {
background-color: #00ff0020;

.tooltip .tooltiptext {
visibility: hidden;
min-width: 400px;
width: auto;
background-color: #101010;
color: #fff;
text-align: center;
border-radius: 4px;
padding: 8px;
position: absolute;
z-index: 1;
opacity: 0;
transition: opacity 0.25s;
font-size: 16px;
box-shadow: 0 24px 48px #000000;
white-space: pre-wrap;
line-height: 1.6;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 8px;
border: 1px solid #303030;
text-transform: none;
}
button#add:active::before {
content: "+++";

.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

.picker-select {
Expand Down Expand Up @@ -516,8 +661,13 @@ select option {
border-color: #808080;
}

.config-input {
margin-bottom: 16px;
textarea.config-input {
resize: vertical;
}

.table-data-value.config-input.buttons {
padding: 0 8px;
gap: 8px;
}

.config-input[type="checkbox"] {
Expand Down
Loading