style/ribbon/file properties: add icons to buttons

This commit is contained in:
Adorian Doran 2025-03-12 02:01:19 +02:00
parent 62b5bbc9ce
commit 0c8e7806f4

View File

@ -8,20 +8,20 @@ import { t } from "../../services/i18n.js";
const TPL = ` const TPL = `
<div class="file-properties-widget"> <div class="file-properties-widget">
<style> <style>
.file-table { .file-table {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
} }
.file-table th, .file-table td { .file-table th, .file-table td {
padding: 5px; padding: 5px;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.file-buttons { .file-buttons {
padding: 10px; padding: 10px;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
} }
</style> </style>
@ -39,16 +39,25 @@ const TPL = `
<th class="text-nowrap">${t("file_properties.file_size")}:</th> <th class="text-nowrap">${t("file_properties.file_size")}:</th>
<td class="file-filesize"></td> <td class="file-filesize"></td>
</tr> </tr>
<tr> <tr>
<td colspan="4"> <td colspan="4">
<div class="file-buttons"> <div class="file-buttons">
<button class="file-download btn btn-sm btn-primary" type="button">${t("file_properties.download")}</button> <button class="file-download btn btn-sm btn-primary" type="button">
&nbsp; <span class="bx bx-download"></span>
<button class="file-open btn btn-sm btn-primary" type="button">${t("file_properties.open")}</button> ${t("file_properties.download")}
&nbsp; </button>
<button class="file-upload-new-revision btn btn-sm btn-primary">${t("file_properties.upload_new_revision")}</button>
<button class="file-open btn btn-sm btn-primary" type="button">
<span class="bx bx-link-external"></span>
${t("file_properties.open")}
</button>
<button class="file-upload-new-revision btn btn-sm btn-primary">
<span class="bx bx-folder-open"></span>
${t("file_properties.upload_new_revision")}
</button>
<input type="file" class="file-upload-new-revision-input" style="display: none"> <input type="file" class="file-upload-new-revision-input" style="display: none">
</div> </div>
</td> </td>