Skip to content

Minor UI improvements to per-element-metadata sample #30

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

Open
TaylorKrusen wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Minor UI improvements to per-element-metadata sample #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a571a2f
Adds minor UI touches to improve visibility
Mar 12, 2025
c0abdf4
Change button location and input cleanup
TaylorKrusen Jun 4, 2025
64af372
styling tweaks, review fixes
TaylorKrusen Jul 11, 2025
64a7026
Merge branch 'main' into metadata-sample-ui-messages
TaylorKrusen Jul 11, 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
60 changes: 49 additions & 11 deletions document-sandbox-samples/per-element-metadata/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
margin-top: 10px;
display: flex;
flex-direction: column;
font-family: sans-serif;
padding: 0; /* Remove padding */
}

Expand All @@ -19,7 +20,7 @@
border-radius: 16px;
border-style: solid;
color: rgb(255, 255, 255);
font-family: sans-serif;
/* font-family: sans-serif; */
height: 32px;
}

Expand All @@ -33,6 +34,17 @@
cursor: pointer;
}

.secondary-button {
background-color: #A6C1FF;
border-color: #A6C1FF;
color: black;
}

.secondary-button:not([disabled]):hover {
background-color: #849BE4;
border-color: #849BE4;
}

.node-options {
border: 1px solid #ccc;
padding: 10px;
Expand All @@ -48,17 +60,43 @@
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
width: 100%;
width: auto;
height: 100px;
resize: none; /* Prevent resizing */
}

.toast {
display: none;
position: fixed;
top: 0;
width: 100%;
font-weight: 700;
font-family: sans-serif;
text-align: center;
padding: 10px;
}
#addSuccess {
background-color: #73b973e3;
color: #000080;
}
#removeSuccess {
background-color: #df7b7be3;
color: #000080;
}

</style>
</head>
<body>
<!--
Please note that this document does not use the spectrum web components theme for Express.
You may use "addOnUISdk.app.ui.theme" to get the current theme and style accordingly.
-->
<div id="addSuccess" class="toast">
Added metadata 🎉
</div>
<div id="removeSuccess" class="toast">
Removed metadata.
</div>
<div class="container">
<fieldset class="node-options">
<legend>Node Options</legend>
Expand All @@ -75,26 +113,26 @@
Use Root Node
</label>
</fieldset>
<label for="key">Metadata Key:</label>
<input id="key" placeholder="key" />
<label for="metadata-key">Metadata Key:</label>
<input id="metadata-key" placeholder="key" />
<br />
<label for="value">Metadata Value:</label>
<input id="value" placeholder="value" />
<label for="metadata-value">Metadata Value:</label>
<input id="metadata-value" placeholder="value" />
<br />
<button id="add" disabled>Add Metadata</button>
<br />
<button id="remove" disabled>Remove Metadata</button>
<button id="get" disabled>Get Metadata</button>
<br />
<button id="clear" disabled>Clear Metadata</button>
<button id="remove" disabled>Remove Metadata</button>
<br />
<br />
<textarea id="text" placeholder="output" readonly></textarea>
<br />
<button id="get" disabled>Get Item</button>
<button id="getall" class="secondary-button" disabled>Get All Metadata</button>
<br />
<button id="getall" disabled>Get All Metadata</button>
<button id="clear" class="secondary-button" disabled>Clear All Metadata</button>
<br />
<button id="remainingQuota" disabled>Remaining Quota</button>
<button id="remainingQuota" class="secondary-button" disabled>See Remaining Quota</button>
</div>

<script type="module" src="ui/index.js"></script>
Expand Down
61 changes: 54 additions & 7 deletions document-sandbox-samples/per-element-metadata/src/ui/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,50 @@ function setupOptionChange(sandboxProxy) {
function setupAddButton(sandboxProxy) {
const addBtn = document.getElementById("add");
addBtn.addEventListener("click", async (event) => {
const key = document.getElementById("key");
const value = document.getElementById("value");

await sandboxProxy.setItem(key.value, value.value);
const key = document.getElementById("metadata-key");
const value = document.getElementById("metadata-value");

try {
await sandboxProxy.setItem(key.value, value.value);

// Display success message for 2 seconds
const addedToast = document.getElementById("addSuccess");
addedToast.style.display = "block";
setTimeout(function() {
addedToast.style.display = "none";
}, 2000);

} catch (error) {
const text = document.getElementById("text");
text.value = error;
text.style.border = "2px solid red";
}

});
addBtn.disabled = false;
}

function setupRemoveButton(sandboxProxy) {
const removeBtn = document.getElementById("remove");
removeBtn.addEventListener("click", async (event) => {
const key = document.getElementById("key");

const key = document.getElementById("metadata-key");
await sandboxProxy.removeItem(key.value);

// Clear inputs after removal
const value = document.getElementById("metadata-value");
const text = document.getElementById("text");
key.value = '';
value.value = '';
text.value = '';
text.style.border = "0px";

// Display success message for 2 seconds
const removedToast = document.getElementById("removeSuccess");
removedToast.style.display = "block";
setTimeout(function() {
removedToast.style.display = "none";
}, 2000);
});
removeBtn.disabled = false;
}
Expand All @@ -77,7 +107,7 @@ function setupGetAllButton(sandboxProxy) {
function setupGetButton(sandboxProxy) {
const getBtn = document.getElementById("get");
getBtn.addEventListener("click", async (event) => {
const key = document.getElementById("key");
const key = document.getElementById("metadata-key");
const value = await sandboxProxy.getItem(key.value);

const text = document.getElementById("text");
Expand All @@ -90,6 +120,23 @@ function setupClearButton(sandboxProxy) {
const clearBtn = document.getElementById("clear");
clearBtn.addEventListener("click", async (event) => {
await sandboxProxy.clearItems();

// Clear inputs after metadata cleared
const key = document.getElementById("metadata-key");
const value = document.getElementById("metadata-value");
const text = document.getElementById("text");
key.value = '';
value.value = '';
text.value = '';
text.style.border = "0px";

// Display success message for 2 seconds
const removedToast = document.getElementById("removeSuccess");
removedToast.style.display = "block";
setTimeout(function() {
removedToast.style.display = "none";
}, 2000);

});
clearBtn.disabled = false;
}
Expand Down