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.

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

Improve database attribute panel style #13248

Merged
merged 12 commits into from
Nov 27, 2024
1 change: 1 addition & 0 deletions app/appearance/langs/de_DE.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"empty": "Leer",
"newRowInRelation": "Erstellen Sie einen neuen Eintrag in ${x} <b class='ft__on-surface'>${y}</b>",
"keyContent": "Schlüsselinhalt",
"addDesc": "Beschreibung hinzufügen",
Expand Down
1 change: 1 addition & 0 deletions app/appearance/langs/en_US.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"empty": "Empty",
"newRowInRelation": "Create a new entry in ${x} <b class='ft__on-surface'>${y}</b>",
"keyContent": "Key content",
"addDesc": "Add description",
Expand Down
1 change: 1 addition & 0 deletions app/appearance/langs/es_ES.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"empty": "Vacío",
"newRowInRelation": "Crear una nueva entrada en ${x} <b class='ft__on-surface'>${y}</b>",
"keyContent": "Contenido de la clave",
"addDesc": "Agregar descripción",
Expand Down
1 change: 1 addition & 0 deletions app/appearance/langs/he_IL.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"empty": "ריק",
"newRowInRelation": "צור ערך חדש ב-${x} <b class='ft__on-surface'>${y}</b>",
"keyContent": "תוכן המפתח",
"addDesc": "הוסף תיאור",
Expand Down
1 change: 1 addition & 0 deletions app/appearance/langs/it_IT.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"empty": "Vuoto",
"newRowInRelation": "Crea una nuova voce in ${x} <b class='ft__on-surface'>${y}</b>",
"keyContent": "Contenuto della chiave",
"addDesc": "Aggiungi descrizione",
Expand Down
1 change: 1 addition & 0 deletions app/appearance/langs/ja_JP.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"empty": "空白",
"newRowInRelation": "${x} に新しい項目を作成 <b class='ft__on-surface'>${y}</b>",
"keyContent": "キーコンテンツ",
"addDesc": "説明を追加",
Expand Down
1 change: 1 addition & 0 deletions app/appearance/langs/pl_PL.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"empty": "Pusty",
"newRowInRelation": "Utwórz nowy wpis w ${x} <b class='ft__on-surface'>${y}</b>",
"keyContent": "Zawartość klucza",
"addDesc": "Dodaj opis",
Expand Down
1 change: 1 addition & 0 deletions app/appearance/langs/ru_RU.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"empty": "Пусто",
"newRowInRelation": "Создать новую запись в ${x} <b class='ft__on-surface'>${y}</b>",
"keyContent": "Содержимое ключа",
"addDesc": "Добавить описание",
Expand Down
1 change: 1 addition & 0 deletions app/appearance/langs/zh_CHT.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"empty": "空白",
"newRowInRelation": "在 ${x} 中新建條目 <b class='ft__on-surface'>${y}</b>",
"keyContent": "主鍵內容",
"addDesc": "添加描述",
Expand Down
1 change: 1 addition & 0 deletions app/appearance/langs/zh_CN.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"empty": "空白",
"newRowInRelation": "在 ${x} 中新建条目 <b class='ft__on-surface'>${y}</b>",
"keyContent": "主键内容",
"addDesc": "添加描述",
Expand Down
40 changes: 40 additions & 0 deletions app/src/assets/scss/business/_custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,17 @@
background-color: var(--b3-theme-background);
}

&--readonly {
padding: 7px 8px;
line-height: 26px;
min-height: 26px;

&[data-type="created"],
&[data-type="updated"] {
padding: 4px 8px;
}
}

.av__checkbox {
width: 16px;
height: 26px;
Expand Down Expand Up @@ -65,6 +76,35 @@
background-color: transparent;
}
}

[placeholder]:empty:before {
color: var(--b3-empty-color);
content: attr(placeholder);
}
}

.block__icons--addcolumn {
padding: 0 8px;

.b3-button[data-type="addColumn"] {
margin: 0 0 0 16px;
color: var(--b3-theme-on-surface);
background-color: rgba(0,0,0,0);

&:hover,
&:focus {
background-color: var(--b3-list-hover);
box-shadow: none;
}

svg {
padding: 4px;
}

span {
padding-right: 4px;
}
}
}

.b3-text-field--text {
Expand Down
27 changes: 12 additions & 15 deletions app/src/protyle/render/av/blockAttr.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@ export const genAVValueHTML = (value: IAVCellValue) => {
html = `<div class="fn__flex-1">${value.block.content}</div>`;
break;
case "text":
html = `<textarea style="resize: vertical" rows="${value.text.content.split("\n").length}" class="b3-text-field b3-text-field--text fn__flex-1">${value.text.content}</textarea>`;
html = `<textarea style="resize: vertical" rows="${value.text.content.split("\n").length}" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">${value.text.content}</textarea>`;
break;
case "number":
html = `<input value="${value.number.isNotEmpty ? value.number.content : ""}" type="number" class="b3-text-field b3-text-field--text fn__flex-1">
html = `<input value="${value.number.isNotEmpty ? value.number.content : ""}" type="number" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">
<span class="fn__space"></span><span class="fn__flex-center ft__on-surface b3-tooltips__w b3-tooltips" aria-label="${window.siyuan.languages.format}">${value.number.formattedContent}</span><span class="fn__space"></span>`;
break;
case "mSelect":
Expand All @@ -84,7 +84,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
});
break;
case "date":
html = `<span class="av__celltext" data-value='${JSON.stringify(value[value.type])}'>`;
html = `<span class="av__celltext" data-value='${JSON.stringify(value[value.type])}' placeholder="${window.siyuan.languages.empty}">`;
if (value[value.type] && value[value.type].isNotEmpty) {
html += dayjs(value[value.type].content).format(value[value.type].isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm");
}
Expand All @@ -100,23 +100,23 @@ export const genAVValueHTML = (value: IAVCellValue) => {
}
break;
case "url":
html = `<input value="${value.url.content}" class="b3-text-field b3-text-field--text fn__flex-1">
html = `<input value="${value.url.content}" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">
<span class="fn__space"></span>
<a href="${value.url.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconLink"></use></svg></a>`;
break;
case "phone":
html = `<input value="${value.phone.content}" class="b3-text-field b3-text-field--text fn__flex-1">
html = `<input value="${value.phone.content}" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">
<span class="fn__space"></span>
<a href="tel:${value.phone.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconPhone"></use></svg></a>`;
break;
case "checkbox":
html = `<svg class="av__checkbox"><use xlink:href="#icon${value.checkbox.checked ? "Check" : "Uncheck"}"></use></svg>`;
break;
case "template":
html = `<div class="fn__flex-1">${value.template.content}</div>`;
html = `<div class="fn__flex-1" placeholder="${window.siyuan.languages.empty}">${value.template.content}</div>`;
break;
case "email":
html = `<input value="${value.email.content}" class="b3-text-field b3-text-field--text fn__flex-1">
html = `<input value="${value.email.content}" class="b3-text-field b3-text-field--text fn__flex-1" placeholder="${window.siyuan.languages.empty}">
<span class="fn__space"></span>
<a href="mailto:${value.email.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconEmail"></use></svg></a>`;
break;
Expand Down Expand Up @@ -188,16 +188,13 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
<span>${escapeHtml(item.key.name)}</span>
</div>
<div data-av-id="${table.avID}" data-col-id="${item.values[0].keyID}" data-block-id="${item.values[0].blockID}" data-id="${item.values[0].id}" data-type="${item.values[0].type}"
data-options="${item.key?.options ? escapeAttr(JSON.stringify(item.key.options)) : "[]"}"
class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}">
${genAVValueHTML(item.values[0])}
</div>
data-options="${item.key?.options ? escapeAttr(JSON.stringify(item.key.options)) : "[]"}"${["block", "created", "updated", "text", "number", "date", "url", "phone", "template", "email"].includes(item.values[0].type) ? "" : ` placeholder="${window.siyuan.languages.empty}`}"
class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes(item.values[0].type) ? "" : ["block", "created", "updated"].includes(item.values[0].type) ? " custom-attr__avvalue--readonly" : " custom-attr__avvalue"}">${genAVValueHTML(item.values[0])}</div>
</div>`;
});
innerHTML += `<div class="fn__hr"></div>
<div class="fn__flex">
<div class="fn__space"></div><div class="fn__space"></div>
<button data-type="addColumn" class="b3-button b3-button--outline"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addAttr}</button>
innerHTML += `<div class="fn__hr></div>
<div class="fn__flex block__icons--addcolumn"">
<button data-type="addColumn" class="b3-button"><svg><use xlink:href="#iconAdd"></use></svg><span>${window.siyuan.languages.newCol}</span></button>
</div><div class="fn__hr--b"></div>`;
html += `<div data-av-id="${table.avID}" data-node-id="${id}" data-type="NodeAttributeView">${innerHTML}</div>`;

Expand Down