pengjunjie/desktop-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/desktop-apps.git synced 2026-02-10 18:05:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request 'feature/templates-preview' (#440) from feature/templates-preview into release/v9.1.0

Browse Source
This commit is contained in:
Maxim Kadushkin
2025-09-17 11:08:02 +00:00
parent 0df20216fe f2669124d5
commit 3bd91074b2
8 changed files with 227 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
common/loginpage/build/startpage.json
View File

@ -88,6 +88,7 @@
,"../src/panels.js"
,"../src/dialogabout.js"
,"../src/dialogproviders.js"
,"../src/dialogpreview.js"
],
"dest": "../deploy/build.js"
}

5
common/loginpage/locale/en-GB.js
View File

@ -59,6 +59,7 @@ l10n.en_GB = {
actAbout: 'About',
actSettings: 'Settings',
actTemplates: 'Templates',
actPreviewTemplates: 'Template',
actClouds: 'Clouds',
actHome: 'Home',
licKeyHolder: 'input activation key',
@ -129,6 +130,10 @@ l10n.en_GB = {
tplNoResultsTitle: "Nothing found",
tplNoResultsText: "No results matching your query could be found",
tplErrorTLS: "Windows XP doesn't support current TLS 1.1 and TLS 1.2 protocol versions, so Cloud Templates cannot be used on this operating system.",
tplFree: "Free",
tplUseTemplate : 'Use this template',
tplFileSize: "File size",
tplFileType: "File type",
colFileName: "File name",
colLocation: 'Location',
colLastOpened: 'Last opened',

71
common/loginpage/src/css/styles.less
View File

@ -1928,6 +1928,7 @@ li.menu-item {
.btn.btn--big.btn--svg.login {
margin: 7px;
padding: 0;
background-color: @background-action-panel;
}
}
@ -1935,6 +1936,7 @@ li.menu-item {
.btn.btn--big.btn--svg.login {
width: 330px;
height: 48px;
background-color: @background-action-panel;
}
}
@ -2456,3 +2458,72 @@ li.menu-item {
}
}
}
.template-preview-body {
display: flex;
.img-container {
max-height: 80vh;
overflow-y: auto;
margin-right: 16px;
flex-shrink: 0;
.rtl & {
margin-right: 0;
margin-left: 16px;
}
.icon--default {
border: initial;
}
.icon {
display:none;
border: @scaled-one-px solid @border-divider;
border-radius: 4px;
width: 475px;
margin-right: 16px;
.rtl & {
margin-right: 0;
margin-left: 16px;
}
}
}
.description {
display: flex;
flex-direction: column;
.name {
color: @text-normal;
font-weight: bold;
font-size: 14px;
margin: 4px 0 10px;
}
.pricing, .descr, .file-info {
font-size: 12px;
color: @text-normal;
margin: 0 0 10px;
}
.file-info {
display: flex;
justify-content: space-between;
margin-top: auto;
}
.file-info .value {
font-weight: bold;
}
.btn--landing {
margin-left: auto;
margin-top: 10px;
border-radius: 4px;
.rtl & {
margin-left: 0;
margin-right: auto;
}
}
}
}

125
common/loginpage/src/css/window.less
View File

@ -47,65 +47,85 @@ dialog {
}
}
&.dlg-about {
border-radius: 8px;
.title {
font-size: 18px;
font-weight: bold;
display: flex;
justify-content: space-between;
padding: 30px 16px 16px 32px;
border-bottom: none;
background: none;
}
.body {
padding: 0px 30px 28px;
}
.separator {
padding-top: 5px;
border-bottom: @scaled-one-px solid @border-divider;
}
}
&.dlg-providers, &.dlg-connect-to {
&.dlg {
border-radius: 8px;
background-color: @background-action-panel;
.title {
border-bottom: initial;
font-weight: bold;
}
}
&.dlg-providers {
overflow: hidden;
.title, .body, .empty .btn.btn--big.btn--svg.login {
background-color: @background-action-panel;
}
.body {
padding: 10px 25px;
}
}
&.dlg-connect-to {
background-color: @background-action-panel;
will-change: transform;
.title {
height: 56px;
padding: 16px 16px 16px 32px;
.rtl &{
padding: 16px 32px 16px 16px;
&.dlg-about {
will-change: transform;
.title {
font-size: 18px;
display: flex;
justify-content: space-between;
padding: 30px 16px 16px 32px;
background: none;
.rtl &{
padding: 30px 32px 16px 16px;
}
}
.body {
padding: 0px 30px 28px;
.separator {
padding-top: 5px;
border-bottom: @scaled-one-px solid @border-divider;
}
}
}
.body {
padding: 0 32px 16px;
&.dlg-template-preview {
overflow: hidden;
.title {
height: 48px;
padding: 12px 16px;
}
.body {
padding: 0 24px 24px;
.separator {
padding-top: 15px;
border-top: @scaled-one-px solid @border-divider;
}
}
}
.title, .body {
background-color: transparent;
&.dlg-providers {
overflow: hidden;
will-change: transform;
.body {
padding: 10px 25px;
}
}
.box-cmp-select .btn, .tbox,
button.btn.btn--landing {
border-radius: 4px;
&.dlg-connect-to {
will-change: transform;
.title {
height: 56px;
padding: 16px 16px 16px 32px;
.rtl &{
padding: 16px 32px 16px 16px;
}
}
.body {
padding: 0 32px 16px;
.btn, .tbox {
border-radius: 4px;
}
.box-cmp-select {
width: 100%;
}
}
.title, .body {
background-color: transparent;
}
}
}
@ -249,12 +269,6 @@ dialog {
}
}
.dlg-connect-to {
.box-cmp-select {
width: 100%;
}
}
.lr-flex {
display: flex;
justify-content: space-between;
@ -316,6 +330,3 @@ dialog {
}
}
dialog.dlg-about {
will-change: transform;
}

72
common/loginpage/src/dialogpreview.js Normal file
View File

@ -0,0 +1,72 @@
function PreviewTemplateDialog(model, params = {}) {
const type = utils.parseFileFormat(model.type);
const size = formatSize(model.size);
const bodyTemplate = `
<div class="template-preview-body">
<div class="img-container">
<svg class='icon--default'><use xlink:href='#template-item'></use></svg>
<img class="icon" src="${model.preview}" style="display:none;">
</div>
<div class="description">
<h3 class="name">${model.name}</h3>
<p class="pricing" l10n>${utils.Lang.tplFree}</p>
<p class="descr">${model.descr}</p>
<div class="file-info separator">
<div>
<span class="label" l10n>${utils.Lang.tplFileSize}:</span>
<span class="value">${size}</span>
</div>
<div>
<span class="label" l10n>${utils.Lang.tplFileType}:</span>
<span class="value">${type}</span>
</div>
</div>
<button class="btn btn--landing" l10n>${utils.Lang.tplUseTemplate}</button>
</div>
</div>
`;
function formatSize(size) {
if (!size) return '';
if (size < 1024) {
return Math.round(size) + ' kb';
} else {
return Math.round(size / 1024) + ' mb';
}
}
params = {
...params,
dialogClass: 'dlg-template-preview',
titleText: utils.Lang.actPreviewTemplates,
defaultWidth: 800,
bodyTemplate: bodyTemplate
};
Dialog.call(this, params);
this.model = model;
}
PreviewTemplateDialog.prototype = Object.create(Dialog.prototype);
PreviewTemplateDialog.prototype.constructor = PreviewTemplateDialog;
PreviewTemplateDialog.prototype.show = function(width) {
Dialog.prototype.show.call(this, width);
const {$el} = this.getElements();
const $img = $el.find('img.icon');
const $icon = $el.find('svg.icon--default');
$img.on('load', () => {
$icon.hide();
$img.show();
});
$el.find('.btn.btn--landing').on('click', () => {
this.close();
window.sdk.openTemplate(this.model.path, this.model.fullName);
});
};
window.PreviewTemplateDialog = PreviewTemplateDialog;

1
common/loginpage/src/index.html
View File

@ -177,6 +177,7 @@
<script type="text/javascript" src="panels.js"></script>
<script type="text/javascript" src="dialogabout.js"></script>
<script type="text/javascript" src="dialogproviders.js"></script>
<script type="text/javascript" src="dialogpreview.js"></script>
<!-- debug begin -->

5
common/loginpage/src/locale.js
View File

@ -92,6 +92,7 @@ l10n.en = {
actAbout: 'About',
actSettings: 'Settings',
actTemplates: 'Templates',
actPreviewTemplates: 'Template',
actClouds: 'Clouds',
actHome: 'Home',
licKeyHolder: 'input activation key',
@ -162,6 +163,10 @@ l10n.en = {
tplNoResultsTitle: "Nothing found",
tplNoResultsText: "No results matching your query could be found",
tplErrorTLS: "Windows XP doesn't support current TLS 1.1 and TLS 1.2 protocol versions, so Cloud Templates cannot be used on this operating system.",
tplFree: "Free",
tplUseTemplate : 'Use this template',
tplFileSize: "File size",
tplFileType: "File type",
colFileName: "File name",
colLocation: 'Location',
colLastOpened: 'Last opened',

5
common/loginpage/src/paneltemplates.js
View File

@ -218,7 +218,7 @@
collection.events.click.attach((col, model) => {
if (model.isCloud) {
window.sdk.openTemplate(model.path, model.name);
new PreviewTemplateDialog(model).show();
} else {
sdk.command('create:new', JSON.stringify({
template: {
@ -314,10 +314,13 @@
const m = new FileTemplateModel({
uid: id,
name: info['name_form'],
fullName: [info['name_form'], file_ext].join('.'),
descr: info['template_desc'],
preview: info.card_prewiew ? info.card_prewiew.data.attributes.url : undefined,
path: info.file_oform ? info.file_oform.data[0].attributes.url : undefined,
type: utils.fileExtensionToFileFormat(file_ext),
icon: info.template_image ? info.template_image.data.attributes.formats.thumbnail.url : undefined,
size: info.file_oform ? info.file_oform.data[0].attributes.size : undefined,
isCloud: true,
});