Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE forms] Use button component

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

125
apps/common/forms/resources/less/common.less
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 // Core variables and mixins
@import "../../../../../vendor/bootstrap/less/variables.less"; //@import "../../../../../vendor/bootstrap/less/variables.less";
@icon-font-path: "../../../../../vendor/bootstrap/dist/fonts/"; @icon-font-path: "../../../../../vendor/bootstrap/dist/fonts/";
@ -7,7 +15,7 @@
// Reset // Reset
@import "../../../../../vendor/bootstrap/less/normalize.less"; @import "../../../../../vendor/bootstrap/less/normalize.less";
@import "../../../../../vendor/bootstrap/less/print.less"; //@import "../../../../../vendor/bootstrap/less/print.less";
// Core CSS // Core CSS
@import "../../../../../vendor/bootstrap/less/scaffolding.less"; @import "../../../../../vendor/bootstrap/less/scaffolding.less";
@ -29,31 +37,48 @@
//@import "breadcrumbs.less"; //@import "breadcrumbs.less";
//@import "pagination.less"; //@import "pagination.less";
//@import "pager.less"; //@import "pager.less";
@import "../../../../../vendor/bootstrap/less/labels.less"; //@import "../../../../../vendor/bootstrap/less/labels.less";
//@import "badges.less"; //@import "badges.less";
//@import "jumbotron.less"; //@import "jumbotron.less";
//@import "thumbnails.less"; //@import "thumbnails.less";
@import "../../../../../vendor/bootstrap/less/alerts.less"; //@import "../../../../../vendor/bootstrap/less/alerts.less";
//@import "progress-bars.less"; //@import "progress-bars.less";
//@import "media.less"; //@import "media.less";
//@import "list-group.less"; //@import "list-group.less";
//@import "panels.less"; //@import "panels.less";
//@import "wells.less"; //@import "wells.less";
@import "../../../../../vendor/bootstrap/less/close.less"; //@import "../../../../../vendor/bootstrap/less/close.less";
// Components w/ JavaScript // 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/tooltip.less";
//@import "../../../../../vendor/bootstrap/less/popovers.less"; //@import "../../../../../vendor/bootstrap/less/popovers.less";
@import "../../../../../vendor/bootstrap/less/dropdowns.less"; @import "../../../../../vendor/bootstrap/less/dropdowns.less";
@import "../../../../../vendor/bootstrap/less/button-groups.less";
@import "../../../../../vendor/bootstrap/less/input-groups.less";
//@import "carousel.less"; //@import "carousel.less";
// Utility classes // Utility classes
@import "../../../../../vendor/bootstrap/less/utilities.less"; @import "../../../../../vendor/bootstrap/less/utilities.less";
@import "../../../../../vendor/bootstrap/less/responsive-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; @toolbarBorderColor: #dbdbdb;
@toolbarBorderShadowColor: #FAFAFA; @toolbarBorderShadowColor: #FAFAFA;
@ -566,13 +591,13 @@
vertical-align: middle; vertical-align: middle;
} }
.btn, button { //.btn, button {
&:focus, &:active:focus { // &:focus, &:active:focus {
outline: 0 none; // outline: 0 none;
} // }
//
background-color: @btnColor; // background-color: @btnColor;
} //}
.modal-dialog { .modal-dialog {
margin-top: 100px; margin-top: 100px;
@ -628,36 +653,36 @@
} }
} }
.dropdown-menu { //.dropdown-menu {
> li > a { // > li > a {
padding: 8px 20px 8px 28px; // padding: 8px 20px 8px 28px;
&:hover, &:focus { // &:hover, &:focus {
background-color: @btnColor; // background-color: @btnColor;
outline: 0 none; // outline: 0 none;
} // }
font-size: @buttonFontSize; // font-size: @buttonFontSize;
} // }
//
.divider { // .divider {
margin: 4px 0; // margin: 4px 0;
} // }
} //}
//
.dropdown { //.dropdown {
&.open { // &.open {
> button { // > button {
background-color: @btnActiveColor !important; // background-color: @btnActiveColor !important;
background-position: -@icon-width*14 -@icon-height; // background-position: -@icon-width*14 -@icon-height;
} // }
} // }
} //}
//
#box-tools { //#box-tools {
display: inline-block; // display: inline-block;
a { // a {
cursor: pointer; // cursor: pointer;
} // }
} //}
.masked { .masked {
background-color: transparent; background-color: transparent;
@ -780,3 +805,15 @@
} }
} }
} }
.font-size-small {
.fontsize(@font-size-small);
}
.font-size-normal {
.fontsize(@font-size-base);
}
.font-size-large {
.fontsize(@font-size-large);
}

8
apps/common/main/resources/less/buttons.less
View file

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

131
apps/documenteditor/forms/app/controller/ApplicationController.js
View file

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

52
apps/documenteditor/forms/app/view/ApplicationView.js
View file

@ -15,23 +15,43 @@ define([
DE.Views.ApplicationView = Backbone.View.extend({ DE.Views.ApplicationView = Backbone.View.extend({
// Render layout // Render layout
render: function() { 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 = $('#box-tools button');
$btnTools.parent().append( // $btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
'<ul class="dropdown-menu pull-right">' + // $btnTools.parent().append(
'<li><a id="idt-print"><span class="mi-icon svg-icon print"></span>' + this.txtPrint + '</a></li>' + // '<ul class="dropdown-menu pull-right">' +
'<li class="divider"></li>' + // '<li><a id="idt-print"><span class="mi-icon svg-icon print"></span>' + this.txtPrint + '</a></li>' +
'<li><a id="idt-download"><span class="mi-icon svg-icon download"></span>' + this.txtDownload + '</a></li>' + // '<li class="divider"></li>' +
'<li><a id="idt-download-docx"><span class="mi-icon svg-icon download"></span>' + this.txtDownloadDocx + '</a></li>' + // '<li><a id="idt-download"><span class="mi-icon svg-icon download"></span>' + this.txtDownload + '</a></li>' +
'<li><a id="idt-download-pdf"><span class="mi-icon"></span>' + this.txtDownloadPdf + '</a></li>' + // '<li><a id="idt-download-docx"><span class="mi-icon svg-icon download"></span>' + this.txtDownloadDocx + '</a></li>' +
'<li class="divider"></li>' + // '<li><a id="idt-download-pdf"><span class="mi-icon"></span>' + this.txtDownloadPdf + '</a></li>' +
'<li><a id="idt-share" data-toggle="modal"><span class="mi-icon svg-icon share"></span>' + this.txtShare + '</a></li>' + // '<li class="divider"></li>' +
'<li><a id="idt-close" data-toggle="modal"><span class="mi-icon svg-icon go-to-location"></span>' + this.txtFileLocation + '</a></li>' + // '<li><a id="idt-share" data-toggle="modal"><span class="mi-icon svg-icon share"></span>' + this.txtShare + '</a></li>' +
'<li class="divider"></li>' + // '<li><a id="idt-close" data-toggle="modal"><span class="mi-icon svg-icon go-to-location"></span>' + this.txtFileLocation + '</a></li>' +
'<li><a id="idt-embed" data-toggle="modal"><span class="mi-icon svg-icon embed"></span>' + this.txtEmbed + '</a></li>' + // '<li class="divider"></li>' +
'<li><a id="idt-fullscreen"><span class="mi-icon svg-icon fullscr"></span>' + this.txtFullScreen + '</a></li>' + // '<li><a id="idt-embed" data-toggle="modal"><span class="mi-icon svg-icon embed"></span>' + this.txtEmbed + '</a></li>' +
'</ul>'); // '<li><a id="idt-fullscreen"><span class="mi-icon svg-icon fullscr"></span>' + this.txtFullScreen + '</a></li>' +
// '</ul>');
return this; return this;
}, },

7
apps/documenteditor/forms/index.html
View file

@ -200,9 +200,10 @@
<div class="group right"> <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-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="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"> <span id="box-tools"></span>
<button class="control-btn svg-icon more-vertical"></button> <!--<div id="box-tools" class="dropdown">-->
</div> <!--<button class="control-btn svg-icon more-vertical"></button>-->
<!--</div>-->
</div> </div>
</div> </div>

4
apps/documenteditor/forms/resources/less/application.less
View file

@ -1,2 +1,6 @@
// Common styles // 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);