改进数据库属性面板样式 (#13248)
* 改进数据库属性面板样式 * 改进数据库属性面板样式 * 添加占位符 * 添加占位符 * 改进数据库属性面板样式、添加占位符 * 语法错误 * 改进添加字段按钮 的样式 * 改进 添加字段 按钮的样式 * 改进 添加字段 按钮的样式 * 添加占位符
This commit is contained in:
Jeffrey Chen
GitHub
parent
40b0cd4cba
commit
f716e16e37
12 changed files with 62 additions and 15 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"empty": "ריק",
|
||||
"newRowInRelation": "צור ערך חדש ב-${x} <b class='ft__on-surface'>${y}</b>",
|
||||
"keyContent": "תוכן המפתח",
|
||||
"addDesc": "הוסף תיאור",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"empty": "空白",
|
||||
"newRowInRelation": "${x} に新しい項目を作成 <b class='ft__on-surface'>${y}</b>",
|
||||
"keyContent": "キーコンテンツ",
|
||||
"addDesc": "説明を追加",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"empty": "Пусто",
|
||||
"newRowInRelation": "Создать новую запись в ${x} <b class='ft__on-surface'>${y}</b>",
|
||||
"keyContent": "Содержимое ключа",
|
||||
"addDesc": "Добавить описание",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"empty": "空白",
|
||||
"newRowInRelation": "在 ${x} 中新建條目 <b class='ft__on-surface'>${y}</b>",
|
||||
"keyContent": "主鍵內容",
|
||||
"addDesc": "添加描述",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"empty": "空白",
|
||||
"newRowInRelation": "在 ${x} 中新建条目 <b class='ft__on-surface'>${y}</b>",
|
||||
"keyContent": "主键内容",
|
||||
"addDesc": "添加描述",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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":
|
||||
|
|
@ -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");
|
||||
}
|
||||
|
|
@ -100,12 +100,12 @@ 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;
|
||||
|
|
@ -113,10 +113,10 @@ export const genAVValueHTML = (value: IAVCellValue) => {
|
|||
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;
|
||||
|
|
@ -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>`;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue