noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-24 19:59:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add other palette items and toggles

Browse Source
This commit is contained in:
Idrees Hassan
2026-03-11 15:46:38 -07:00
parent a2dea8a17d
commit 80bcf60a07
10 changed files with 68 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
editor/editor.js
View File

@@ -16,7 +16,9 @@ const AVAILABLE_TAGS = [
/** @type {Record<string, string>} */
const DEFAULT_OVERRIDES = {
"hood": "face",
"nose": "face"
"eyebrow": "face",
"nose": "face",
"cheek": "face",
};
const IGNORED_PARTS = new Set(
["transparent", "border", "heart", "heart-border", "heart-shine", "feather-spine"]
@@ -126,12 +128,12 @@ function loadEditor() {
if (IGNORED_PARTS.has(part)) {
continue;
}
const item = createColorItem(part, getColor(part) || color);
const item = createColorSwatch(part, getColor(part) || color);
editor.appendChild(item);
}
// for (const { tag, label } of AVAILABLE_TAGS) {
// editor.appendChild(createTagItem(tag, label));
// }
for (const { tag, label } of AVAILABLE_TAGS) {
editor.appendChild(createTagToggle(tag, label));
}
}
/**
@@ -155,7 +157,7 @@ function getColor(part) {
function createColorPicker() {
colorPickerInput.type = "text";
colorPickerInput.id = "coloris-proxy";
colorPickerInput.id = "color-picker-interceptor";
colorPickerInput.setAttribute("data-coloris", "");
document.body.appendChild(colorPickerInput);
@@ -180,7 +182,7 @@ function createColorPicker() {
* @param {string} color
* @returns {HTMLDivElement}
*/
function createColorItem(label, color) {
function createColorSwatch(label, color) {
const item = document.createElement("div");
item.classList.add("editor-item");
@@ -224,9 +226,9 @@ function createColorItem(label, color) {
* @param {string} label
* @returns {HTMLDivElement}
*/
function createTagItem(tag, label) {
function createTagToggle(tag, label) {
const item = document.createElement("div");
item.classList.add("tag-item");
item.classList.add("editor-item");
const toggle = document.createElement("button");
toggle.classList.add("tag-toggle");

26
editor/stylesheet.css
View File

@@ -46,14 +46,15 @@ body {
background: #ffffff;
border-radius: 16px;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
padding: 20px;
padding: 40px 50px;
display: flex;
flex-direction: column;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
justify-content: space-between;
gap: 30px 20px;
column-count: 2;
overflow-y: scroll;
}
#json {
@@ -107,7 +108,7 @@ body {
cursor: default;
}
#coloris-proxy {
#color-picker-interceptor {
position: fixed;
width: 1px;
height: 1px;
@@ -117,27 +118,17 @@ body {
pointer-events: none;
}
.tag-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
height: 38px;
margin-top: 10px;
}
.tag-toggle {
width: 32px;
height: 32px;
border-radius: 4px;
border: none;
background: #edf0f4;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
background: #f1f1f1;
cursor: pointer;
font-size: 16px;
color: transparent;
transition: background 0.15s, color 0.15s, transform 0.1s;
border: 3px solid #dadada;
}
.tag-toggle:hover {
@@ -146,6 +137,7 @@ body {
}
.tag-toggle--active {
background: #639bff;
background: #34c85a;
color: white;
border: 0;
}