[DE forms] Use button component

This commit is contained in:
Julia Radzhabova 2021-08-07 11:44:58 +03:00
parent d93a3740e5
commit 833530756a
6 changed files with 196 additions and 133 deletions

View file

@ -1,5 +1,13 @@
@import "../../../../common/main/resources/less/asc-mixins.less";
// Bootstrap overwrite
@import "../../../../common/main/resources/less/variables.less";
@import "../../../../common/main/resources/less/colors-table.less";
@import "../../../../common/main/resources/less/colors-table-classic.less";
@import "../../../../common/main/resources/less/colors-table-dark.less";
// Core variables and mixins
@import "../../../../../vendor/bootstrap/less/variables.less";
//@import "../../../../../vendor/bootstrap/less/variables.less";
@icon-font-path: "../../../../../vendor/bootstrap/dist/fonts/";
@ -7,7 +15,7 @@
// Reset
@import "../../../../../vendor/bootstrap/less/normalize.less";
@import "../../../../../vendor/bootstrap/less/print.less";
//@import "../../../../../vendor/bootstrap/less/print.less";
// Core CSS
@import "../../../../../vendor/bootstrap/less/scaffolding.less";
@ -29,31 +37,48 @@
//@import "breadcrumbs.less";
//@import "pagination.less";
//@import "pager.less";
@import "../../../../../vendor/bootstrap/less/labels.less";
//@import "../../../../../vendor/bootstrap/less/labels.less";
//@import "badges.less";
//@import "jumbotron.less";
//@import "thumbnails.less";
@import "../../../../../vendor/bootstrap/less/alerts.less";
//@import "../../../../../vendor/bootstrap/less/alerts.less";
//@import "progress-bars.less";
//@import "media.less";
//@import "list-group.less";
//@import "panels.less";
//@import "wells.less";
@import "../../../../../vendor/bootstrap/less/close.less";
//@import "../../../../../vendor/bootstrap/less/close.less";
// Components w/ JavaScript
@import "../../../../../vendor/bootstrap/less/modals.less";
//@import "../../../../../vendor/bootstrap/less/modals.less";
@import "../../../../../vendor/bootstrap/less/tooltip.less";
//@import "../../../../../vendor/bootstrap/less/popovers.less";
@import "../../../../../vendor/bootstrap/less/dropdowns.less";
@import "../../../../../vendor/bootstrap/less/button-groups.less";
@import "../../../../../vendor/bootstrap/less/input-groups.less";
//@import "carousel.less";
// Utility classes
@import "../../../../../vendor/bootstrap/less/utilities.less";
@import "../../../../../vendor/bootstrap/less/responsive-utilities.less";
@import "../../../../common/main/resources/less/buttons.less";
@import "../../../../common/main/resources/less/dropdown-menu.less";
@import "../../../../common/main/resources/less/dropdown-submenu.less";
@import "../../../../common/main/resources/less/separator.less";
@import "../../../../common/main/resources/less/input.less";
@import "../../../../common/main/resources/less/window.less";
@import "../../../../common/main/resources/less/loadmask.less";
@import "../../../../common/main/resources/less/dataview.less";
@import "../../../../common/main/resources/less/tooltip.less";
@import "../../../../common/main/resources/less/scroller.less";
@import "../../../../common/main/resources/less/synchronize-tip.less";
@import "../../../../common/main/resources/less/common.less";
@import "../../../../common/main/resources/less/winxp_fix.less";
@import "../../../../common/main/resources/less/calendar.less";
@import "loadmask.less";
//@import "loadmask.less";
@toolbarBorderColor: #dbdbdb;
@toolbarBorderShadowColor: #FAFAFA;
@ -566,13 +591,13 @@
vertical-align: middle;
}
.btn, button {
&:focus, &:active:focus {
outline: 0 none;
}
background-color: @btnColor;
}
//.btn, button {
// &:focus, &:active:focus {
// outline: 0 none;
// }
//
// background-color: @btnColor;
//}
.modal-dialog {
margin-top: 100px;
@ -628,36 +653,36 @@
}
}
.dropdown-menu {
> li > a {
padding: 8px 20px 8px 28px;
&:hover, &:focus {
background-color: @btnColor;
outline: 0 none;
}
font-size: @buttonFontSize;
}
.divider {
margin: 4px 0;
}
}
.dropdown {
&.open {
> button {
background-color: @btnActiveColor !important;
background-position: -@icon-width*14 -@icon-height;
}
}
}
#box-tools {
display: inline-block;
a {
cursor: pointer;
}
}
//.dropdown-menu {
// > li > a {
// padding: 8px 20px 8px 28px;
// &:hover, &:focus {
// background-color: @btnColor;
// outline: 0 none;
// }
// font-size: @buttonFontSize;
// }
//
// .divider {
// margin: 4px 0;
// }
//}
//
//.dropdown {
// &.open {
// > button {
// background-color: @btnActiveColor !important;
// background-position: -@icon-width*14 -@icon-height;
// }
// }
//}
//
//#box-tools {
// display: inline-block;
// a {
// cursor: pointer;
// }
//}
.masked {
background-color: transparent;
@ -779,4 +804,16 @@
font-weight: normal;
}
}
}
.font-size-small {
.fontsize(@font-size-small);
}
.font-size-normal {
.fontsize(@font-size-base);
}
.font-size-large {
.fontsize(@font-size-large);
}

View file

@ -442,6 +442,12 @@
height: 4px;
}
}
&.no-caret {
.inner-box-caret {
display: none;
}
}
}
.btn-category {
@ -535,7 +541,7 @@
&:not(.split) {
.btn-toolbar {
&.dropdown-toggle:not(.x-huge) {
&.dropdown-toggle:not(.x-huge):not(.no-caret) {
width: 100%;
min-width: 28px;
}

View file

@ -280,7 +280,6 @@ define([
config.buttons = ['ok'];
config.callback = _.bind(function(btn){
if (id == Asc.c_oAscError.ID.EditingError) {
this.disableEditing(true);
Common.NotificationCenter.trigger('api:disconnect', true); // enable download and print
}
this.onEditComplete();
@ -327,7 +326,7 @@ define([
if (this.embedConfig.toolbarDocked === 'bottom') {
$('#toolbar').addClass('bottom');
this.boxSdk.addClass('bottom');
$('#box-tools').removeClass('dropdown').addClass('dropup');
// $('#box-tools').removeClass('dropdown').addClass('dropup');
ttOffset[1] = -40;
} else {
$('#toolbar').addClass('top');
@ -907,56 +906,58 @@ define([
var zf = (this.appOptions.customization && this.appOptions.customization.zoom ? parseInt(this.appOptions.customization.zoom) : -2);
(zf == -1) ? this.api.zoomFitToPage() : ((zf == -2) ? this.api.zoomFitToWidth() : this.api.zoom(zf>0 ? zf : 100));
var dividers = $('#box-tools .divider');
var itemsCount = $('#box-tools a').length;
// var dividers = $('#box-tools .divider');
// var itemsCount = $('#box-tools a').length;
//
var menuItems = this.view.btnOptions.menu.items;
var itemsCount = menuItems.length-3;
if (!this.appOptions.canPrint) {
$('#idt-print').hide();
$(dividers[0]).hide();
menuItems[0].setVisible(false);
menuItems[1].setVisible(false);
itemsCount--;
}
if ( !this.embedConfig.saveUrl && !this.appOptions.canPrint || this.appOptions.canFillForms) {
$('#idt-download').hide();
menuItems[2].setVisible(false);
itemsCount--;
}
if ( !this.appOptions.canFillForms || !this.appOptions.canDownload) {
$('#idt-download-docx').hide();
$('#idt-download-pdf').hide();
$(dividers[0]).hide();
$(dividers[1]).hide();
menuItems[3].setVisible(false);
menuItems[4].setVisible(false);
menuItems[1].setVisible(false);
menuItems[5].setVisible(false);
itemsCount -= 2;
}
if ( !this.embedConfig.shareUrl || this.appOptions.canFillForms) {
$('#idt-share').hide();
menuItems[6].setVisible(false);
itemsCount--;
}
if (!this.appOptions.canBackToFolder) {
$('#idt-close').hide();
menuItems[7].setVisible(false);
itemsCount--;
}
if (itemsCount<3)
$(dividers[2]).hide();
menuItems[8].setVisible(false);
if ( !this.embedConfig.embedUrl || this.appOptions.canFillForms) {
$('#idt-embed').hide();
menuItems[9].setVisible(false);
itemsCount--;
}
if ( !this.embedConfig.fullscreenUrl ) {
$('#idt-fullscreen').hide();
menuItems[10].setVisible(false);
itemsCount--;
}
// if ( !embedConfig.saveUrl && permissions.print === false && (!embedConfig.shareUrl || appOptions.canFillForms) && (!embedConfig.embedUrl || appOptions.canFillForms) && !embedConfig.fullscreenUrl && !config.canBackToFolder)
if (itemsCount<1)
$('#box-tools').addClass('hidden');
this.view.btnOptions.setVisible(false);
else if ((!this.embedConfig.embedUrl || this.appOptions.canFillForms) && !this.embedConfig.fullscreenUrl)
$(dividers[2]).hide();
menuItems[8].setVisible(false);
// common.controller.modals.attach({
// share: '#idt-share',
@ -983,55 +984,9 @@ define([
Common.Gateway.on('downloadas', _.bind(this.onDownloadAs, this));
Common.Gateway.on('requestclose', _.bind(this.onRequestClose, this));
this.view.getTools('#idt-fullscreen')
.on('click', function(){
me.onHyperlinkClick(me.embedConfig.fullscreenUrl);
});
this.view.getTools('#idt-download')
.on('click', function(){
if ( !!me.embedConfig.saveUrl ){
me.onHyperlinkClick(embedConfig.saveUrl);
} else
if (me.api && me.appOptions.canPrint){
me.api.asc_Print(new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86)); // if isChrome or isSafari or isOpera == true use asc_onPrintUrl event
}
Common.Analytics.trackEvent('Save');
});
this.view.getTools('#idt-print')
.on('click', function(){
me.api.asc_Print(new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86)); // if isChrome or isSafari or isOpera == true use asc_onPrintUrl event
Common.Analytics.trackEvent('Print');
});
this.view.getTools('#idt-close')
.on('click', function(){
if (me.appOptions.customization && me.appOptions.customization.goback) {
if (me.appOptions.customization.goback.requestClose && me.appOptions.canRequestClose)
Common.Gateway.requestClose();
else if (me.appOptions.customization.goback.url)
window.parent.location.href = me.appOptions.customization.goback.url;
}
});
var downloadAs = function(format){
me.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
Common.Analytics.trackEvent('Save');
};
this.view.getTools('#idt-download-docx')
.on('click', function(){
downloadAs(Asc.c_oAscFileType.DOCX);
});
this.view.getTools('#idt-download-pdf')
.on('click', function(){
downloadAs(Asc.c_oAscFileType.PDF);
});
$('#id-btn-zoom-in').on('click', me.api.zoomIn.bind(me.api));
$('#id-btn-zoom-out').on('click', me.api.zoomOut.bind(me.api));
$('#id-btn-zoom-in').on('click', this.api.zoomIn.bind(this.api));
$('#id-btn-zoom-out').on('click', this.api.zoomOut.bind(this.api));
this.view.btnOptions.menu.on('item:click', _.bind(this.onOptionsClick, this));
var $pagenum = $('#page-number');
$pagenum.on({
@ -1113,6 +1068,46 @@ define([
Common.Analytics.trackEvent('Load', 'Complete');
},
onOptionsClick: function(menu, item, e) {
switch (item.value) {
case 'fullscr':
this.onHyperlinkClick(this.embedConfig.fullscreenUrl);
break;
case 'download':
if ( !!this.embedConfig.saveUrl ){
this.onHyperlinkClick(this.embedConfig.saveUrl);
} else if (this.api && this.appOptions.canPrint){
this.api.asc_Print(new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86)); // if isChrome or isSafari or isOpera == true use asc_onPrintUrl event
}
Common.Analytics.trackEvent('Save');
break;
case 'print':
this.api.asc_Print(new Asc.asc_CDownloadOptions(null, Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera || Common.Utils.isGecko && Common.Utils.firefoxVersion>86)); // if isChrome or isSafari or isOpera == true use asc_onPrintUrl event
Common.Analytics.trackEvent('Print');
break;
case 'close':
if (this.appOptions.customization && this.appOptions.customization.goback) {
if (this.appOptions.customization.goback.requestClose && this.appOptions.canRequestClose)
Common.Gateway.requestClose();
else if (this.appOptions.customization.goback.url)
window.parent.location.href = this.appOptions.customization.goback.url;
}
break;
case 'download-docx':
this.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.DOCX));
Common.Analytics.trackEvent('Save');
break;
case 'download-pdf':
this.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.PDF));
Common.Analytics.trackEvent('Save');
break;
case 'share':
break;
case 'embed':
break;
}
},
errorDefaultMessage : 'Error code: %1',
unknownErrorText : 'Unknown error.',
convertationTimeoutText : 'Conversion timeout exceeded.',

View file

@ -15,23 +15,43 @@ define([
DE.Views.ApplicationView = Backbone.View.extend({
// Render layout
render: function() {
$btnTools = $('#box-tools button');
this.btnOptions = new Common.UI.Button({
cls: 'btn-toolbar no-caret',
iconCls: 'svg-icon more-vertical',
menu: new Common.UI.Menu({
items: [
{caption: this.txtPrint, value: 'print', iconCls: 'mi-icon svg-icon print'},
{caption: '--'},
{caption: this.txtDownload, value: 'download', iconCls: 'mi-icon svg-icon download'},
{caption: this.txtDownloadDocx, value: 'download-docx', iconCls: 'mi-icon svg-icon download'},
{caption: this.txtDownloadPdf, value: 'download-pdf', iconCls: 'mi-icon'},
{caption: '--'},
{caption: this.txtShare, value: 'share', iconCls: 'mi-icon svg-icon share'},
{caption: this.txtFileLocation, value: 'close', iconCls: 'mi-icon svg-icon go-to-location'},
{caption: '--'},
{caption: this.txtEmbed, value: 'embed', iconCls: 'mi-icon svg-icon embed'},
{caption: this.txtFullScreen, value: 'fullscr', iconCls: 'mi-icon svg-icon fullscr'}
]
})
});
this.btnOptions.render($('#box-tools'));
$btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
$btnTools.parent().append(
'<ul class="dropdown-menu pull-right">' +
'<li><a id="idt-print"><span class="mi-icon svg-icon print"></span>' + this.txtPrint + '</a></li>' +
'<li class="divider"></li>' +
'<li><a id="idt-download"><span class="mi-icon svg-icon download"></span>' + this.txtDownload + '</a></li>' +
'<li><a id="idt-download-docx"><span class="mi-icon svg-icon download"></span>' + this.txtDownloadDocx + '</a></li>' +
'<li><a id="idt-download-pdf"><span class="mi-icon"></span>' + this.txtDownloadPdf + '</a></li>' +
'<li class="divider"></li>' +
'<li><a id="idt-share" data-toggle="modal"><span class="mi-icon svg-icon share"></span>' + this.txtShare + '</a></li>' +
'<li><a id="idt-close" data-toggle="modal"><span class="mi-icon svg-icon go-to-location"></span>' + this.txtFileLocation + '</a></li>' +
'<li class="divider"></li>' +
'<li><a id="idt-embed" data-toggle="modal"><span class="mi-icon svg-icon embed"></span>' + this.txtEmbed + '</a></li>' +
'<li><a id="idt-fullscreen"><span class="mi-icon svg-icon fullscr"></span>' + this.txtFullScreen + '</a></li>' +
'</ul>');
// $btnTools = $('#box-tools button');
// $btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
// $btnTools.parent().append(
// '<ul class="dropdown-menu pull-right">' +
// '<li><a id="idt-print"><span class="mi-icon svg-icon print"></span>' + this.txtPrint + '</a></li>' +
// '<li class="divider"></li>' +
// '<li><a id="idt-download"><span class="mi-icon svg-icon download"></span>' + this.txtDownload + '</a></li>' +
// '<li><a id="idt-download-docx"><span class="mi-icon svg-icon download"></span>' + this.txtDownloadDocx + '</a></li>' +
// '<li><a id="idt-download-pdf"><span class="mi-icon"></span>' + this.txtDownloadPdf + '</a></li>' +
// '<li class="divider"></li>' +
// '<li><a id="idt-share" data-toggle="modal"><span class="mi-icon svg-icon share"></span>' + this.txtShare + '</a></li>' +
// '<li><a id="idt-close" data-toggle="modal"><span class="mi-icon svg-icon go-to-location"></span>' + this.txtFileLocation + '</a></li>' +
// '<li class="divider"></li>' +
// '<li><a id="idt-embed" data-toggle="modal"><span class="mi-icon svg-icon embed"></span>' + this.txtEmbed + '</a></li>' +
// '<li><a id="idt-fullscreen"><span class="mi-icon svg-icon fullscr"></span>' + this.txtFullScreen + '</a></li>' +
// '</ul>');
return this;
},

View file

@ -200,9 +200,10 @@
<div class="group right">
<div id="id-submit-group" style="display: inline-block;"><button id="id-btn-submit" class="control-btn has-caption margin-right-small colored"><span class="caption"></span></button></div>
<div id="id-pages" class="item margin-right-small"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
<div id="box-tools" class="dropdown">
<button class="control-btn svg-icon more-vertical"></button>
</div>
<span id="box-tools"></span>
<!--<div id="box-tools" class="dropdown">-->
<!--<button class="control-btn svg-icon more-vertical"></button>-->
<!--</div>-->
</div>
</div>

View file

@ -1,2 +1,6 @@
// Common styles
@import "../../../../common/forms/resources/less/common.less";
@import "../../../../common/forms/resources/less/common.less";
@header-background-color-ie: @toolbar-header-document-ie;
@header-background-color: var(--toolbar-header-document);