mirror of
https://github.com/ONLYOFFICE/desktop-apps.git
synced 2026-04-07 14:09:22 +08:00
refactoring
This commit is contained in:
Dmitry-Ilyushechkin
@ -1880,6 +1880,7 @@ li.menu-item {
|
||||
.btn.btn--big.btn--svg.login {
|
||||
margin: 7px;
|
||||
padding: 0;
|
||||
background-color: @background-action-panel;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1887,6 +1888,7 @@ li.menu-item {
|
||||
.btn.btn--big.btn--svg.login {
|
||||
width: 330px;
|
||||
height: 48px;
|
||||
background-color: @background-action-panel;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2444,6 +2446,7 @@ li.menu-item {
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
color: @text-normal;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin: 4px 0 10px;
|
||||
|
||||
@ -47,81 +47,85 @@ dialog {
|
||||
}
|
||||
}
|
||||
|
||||
&.dlg-about {
|
||||
.title {
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30px 16px 16px 32px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 0px 30px 28px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
padding-top: 5px;
|
||||
border-bottom: @scaled-one-px solid @border-divider;
|
||||
}
|
||||
}
|
||||
|
||||
&.dlg-template-preview {
|
||||
overflow: hidden;
|
||||
background-color: @background-action-panel;
|
||||
.title {
|
||||
height: 48px;
|
||||
padding: 12px 16px;
|
||||
background-color: @background-action-panel;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 0 24px 24px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
padding-top: 15px;
|
||||
border-top: @scaled-one-px solid @border-divider;
|
||||
}
|
||||
}
|
||||
|
||||
&.dlg-providers, &.dlg-connect-to, &.dlg-template-preview, &.dlg-about {
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -265,12 +269,6 @@ dialog {
|
||||
}
|
||||
}
|
||||
|
||||
.dlg-connect-to {
|
||||
.box-cmp-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.lr-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -332,6 +330,3 @@ dialog {
|
||||
}
|
||||
}
|
||||
|
||||
dialog.dlg-about {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@ -1,9 +1,47 @@
|
||||
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);
|
||||
@ -17,6 +55,13 @@ 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();
|
||||
|
||||
@ -149,48 +149,9 @@
|
||||
${cloudIcon}
|
||||
</div>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
templateDialogBody: function(model) {
|
||||
const type = utils.parseFileFormat(model.type);
|
||||
const size = formatSize(model.size);
|
||||
|
||||
return `
|
||||
<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}">
|
||||
</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';
|
||||
}
|
||||
}
|
||||
|
||||
utils.fn.extend(ControllerTemplates.prototype, (function() {
|
||||
let isCloudTmplsLoading = false;
|
||||
|
||||
@ -257,17 +218,7 @@
|
||||
|
||||
collection.events.click.attach((col, model) => {
|
||||
if (model.isCloud) {
|
||||
const body = this.view.templateDialogBody(model);
|
||||
const $body = $(body);
|
||||
const $img = $body.find('img.icon');
|
||||
const $icon = $body.find('.icon--default');
|
||||
|
||||
$img.on('load', () => {
|
||||
$icon.hide();
|
||||
$img.show();
|
||||
});
|
||||
|
||||
new PreviewTemplateDialog(model, { bodyTemplate: $body }).show();
|
||||
new PreviewTemplateDialog(model).show();
|
||||
} else {
|
||||
sdk.command('create:new', JSON.stringify({
|
||||
template: {
|
||||
|
||||
Reference in New Issue
Block a user