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

edit style

Browse source
This commit is contained in:
OVSharova 2021-07-29 02:50:34 +03:00
parent 3e9f3b0b3a
commit 6fcf934299
5 changed files with 66 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/presentationeditor/main/app/template/Toolbar.template
View file

@ -4,7 +4,7 @@
<%= tabsmarkup %> <%= tabsmarkup %>
<div class="extra right"></div> <div class="extra right"></div>
</section> </section>
<section class="box-controls"> <section class="box-controls">%
<section class="panel static"> <section class="panel static">
<div class="group no-mask small"> <div class="group no-mask small">
<div class="elset"> <div class="elset">

23
apps/presentationeditor/main/app/template/Transitions.template
View file

@ -1,34 +1,33 @@
<section id="transitions-panel" class="panel" data-tab="transit"> <section id="transitions-panel" class="panel" data-tab="transit">
<div class="group flex small" id="transit-field-effects" style=" width: 60%; min-width: 300px; " ></div> <div class="group flex small" id="transit-field-effects" style=" width: 56%; min-width: 300px; " ></div>
<div class="group small"> <div class="group small">
<span class="btn-slot text x-huge" id="transit-button-parametrs"></span> <span class="btn-slot text x-huge" id="transit-button-parametrs"></span>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>
<div class="group small"> <div class="group small">
<div class="elset" style="width:110px; margin-left:6px;"> <div class="elset" ">
<span class="btn-slot text" id="label-duration" style="display: inline-block; float: left; width: 8px;font-size: 11px;text-align: left; margin-top: 4px;" >Durations</span> <div class="btn-slot text" id="label-duration" style="font-size: 11px; text-align: left; "><%=Duration%></div>
<span id="transit-spin-duration" class="btn-slot text spinner" style="display: inline-block; float: right; width: 30px; "></span> <span id="transit-spin-duration" class="btn-slot text spinner" "></span>
</div> </div>
<div class="elset"> <div class="elset">
<span class="btn-slot text x-huge" id="transit-button-preview" ></span> <span class="btn-slot text" id="transit-button-preview" ></span>
</div> </div>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>
<div class="group small" > <div class="group small" >
<div class="elset"> <div class="elset">
<span class="btn-slot text" id="transit-checkbox-startonclick"></span> <span class="btn-slot text" id="transit-checkbox-startonclick"></span>
</div> </div>
<div class="elset" style="width:120px;"> <div class="elset">
<!-- <span class="btn-slot text" id="label-delay" style="display: inline-block; float: left; font-size: 11px;text-align: left; margin-top: 4px" >Delay</span> --> <span class="btn-slot text" id="transit-checkbox-delay" ></span>
<span id="transit-spin-delay" class="btn-slot text spinner" style="display: inline-block; float: right; "></span> <div id="transit-spin-delay" class="btn-slot text spinner"></div>
<span class="btn-slot text" id="transit-checkbox-delay" style="display: inline-block; float: left;"></span> </div>
</div>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>
<div class="group small"> <div class="group small">
<div class="elset"> <div class="elset">
<span class="btn-slot text " id="transit-button-apply" style="display: inline-block; float:right;"></span> <span class="btn-slot text " id="transit-button-apply" "></span>
</div> </div>
<div class="elset"> <div class="elset">
<span class="btn-slot text x-huge" ></span> <span class="btn-slot text x-huge" ></span>

106
apps/presentationeditor/main/app/view/Transitions.js
View file

@ -118,7 +118,7 @@ define([
options: {}, options: {},
initialize: function (options) { initialize: function (options) {
this.$el=$(_.template(template)( {} )); this.$el=$(_.template(template)( {Duration:this.strDuration} ));
this.SladeSettings=PE.Views.ShapeSettings; this.SladeSettings=PE.Views.ShapeSettings;
Common.UI.BaseView.prototype.initialize.call(this, options); Common.UI.BaseView.prototype.initialize.call(this, options);
@ -139,58 +139,44 @@ define([
]; ];
this._arrEffectType = [ this._arrEffectType = [
{caption: this.textSmoothly, value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly}, {caption: this.textSmoothly, value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly, checkable: true, toggleGroup: 'effects'},
{caption: this.textBlack, value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black}, {caption: this.textBlack, value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black, checkable: true, toggleGroup: 'effects'},
{caption: this.textLeft, value: Asc.c_oAscSlideTransitionParams.Param_Left}, {caption: this.textLeft, value: Asc.c_oAscSlideTransitionParams.Param_Left, checkable: true, toggleGroup: 'effects'},
{caption: this.textTop, value: Asc.c_oAscSlideTransitionParams.Param_Top}, {caption: this.textTop, value: Asc.c_oAscSlideTransitionParams.Param_Top, checkable: true, toggleGroup: 'effects'},
{caption: this.textRight, value: Asc.c_oAscSlideTransitionParams.Param_Right}, {caption: this.textRight, value: Asc.c_oAscSlideTransitionParams.Param_Right, checkable: true, toggleGroup: 'effects'},
{caption: this.textBottom, value: Asc.c_oAscSlideTransitionParams.Param_Bottom}, {caption: this.textBottom, value: Asc.c_oAscSlideTransitionParams.Param_Bottom, checkable: true, toggleGroup: 'effects'},
{caption: this.textTopLeft, value: Asc.c_oAscSlideTransitionParams.Param_TopLeft}, {caption: this.textTopLeft, value: Asc.c_oAscSlideTransitionParams.Param_TopLeft, checkable: true, toggleGroup: 'effects'},
{caption: this.textTopRight, value: Asc.c_oAscSlideTransitionParams.Param_TopRight}, {caption: this.textTopRight, value: Asc.c_oAscSlideTransitionParams.Param_TopRight, checkable: true, toggleGroup: 'effects'},
{caption: this.textBottomLeft, value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft}, {caption: this.textBottomLeft, value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft, checkable: true, toggleGroup: 'effects'},
{caption: this.textBottomRight, value: Asc.c_oAscSlideTransitionParams.Param_BottomRight}, {caption: this.textBottomRight, value: Asc.c_oAscSlideTransitionParams.Param_BottomRight, checkable: true, toggleGroup: 'effects'},
{caption: this.textVerticalIn, value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn}, {caption: this.textVerticalIn, value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn, checkable: true, toggleGroup: 'effects'},
{caption: this.textVerticalOut, value: Asc.c_oAscSlideTransitionParams.Split_VerticalOut}, {caption: this.textVerticalOut, value: Asc.c_oAscSlideTransitionParams.Split_VerticalOut, checkable: true, toggleGroup: 'effects'},
{caption: this.textHorizontalIn, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalIn}, {caption: this.textHorizontalIn, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalIn, checkable: true, toggleGroup: 'effects'},
{caption: this.textHorizontalOut, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut}, {caption: this.textHorizontalOut, value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut, checkable: true, toggleGroup: 'effects'},
{caption: this.textClockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise}, {caption: this.textClockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise, checkable: true, toggleGroup: 'effects'},
{caption: this.textCounterclockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise}, {caption: this.textCounterclockwise, value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise, checkable: true, toggleGroup: 'effects'},
{caption: this.textWedge, value: Asc.c_oAscSlideTransitionParams.Clock_Wedge}, {caption: this.textWedge, value: Asc.c_oAscSlideTransitionParams.Clock_Wedge, checkable: true, toggleGroup: 'effects'},
{caption: this.textZoomIn, value: Asc.c_oAscSlideTransitionParams.Zoom_In}, {caption: this.textZoomIn, value: Asc.c_oAscSlideTransitionParams.Zoom_In, checkable: true, toggleGroup: 'effects'},
{caption: this.textZoomOut, value: Asc.c_oAscSlideTransitionParams.Zoom_Out}, {caption: this.textZoomOut, value: Asc.c_oAscSlideTransitionParams.Zoom_Out, checkable: true, toggleGroup: 'effects'},
{caption: this.textZoomRotate, value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate} {caption: this.textZoomRotate, value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate, checkable: true, toggleGroup: 'effects'}
]; ];
this.listEffects = new Common.UI.ComboDataView({ this.listEffects = new Common.UI.ComboDataView({
cls: 'combo-styles', cls: 'combo-styles',
itemWidth: 91, itemWidth: 87,
itemHeight: 44, itemHeight: 40,
enableKeyEvents: true, enableKeyEvents: true,
beforeOpenHandler: function (e) { beforeOpenHandler: function (e) {
var cmp = this, var cmp = this,
menu = cmp.openButton.menu, menu = cmp.openButton.menu//,
minMenuColumn = 4; //minMenuColumn = 3;
if (menu.cmpEl) { if (menu.cmpEl) {
var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent();
var itemMargin = /*parseInt($(itemEl.get(0)).parent().css('margin-right'))*/-1;
Common.Utils.applicationPixelRatio() > 1 && Common.Utils.applicationPixelRatio() < 2 && (itemMargin = itemMargin + 1/Common.Utils.applicationPixelRatio());
var itemWidth = itemEl.is(':visible') ? parseInt(itemEl.css('width')) :
(cmp.itemWidth + parseInt(itemEl.css('padding-left')) + parseInt(itemEl.css('padding-right')) +
parseInt(itemEl.css('border-left-width')) + parseInt(itemEl.css('border-right-width')));
var minCount = cmp.menuPicker.store.length >= minMenuColumn ? minMenuColumn : cmp.menuPicker.store.length,
columnCount = Math.min(cmp.menuPicker.store.length, Math.round($('.dataview', $(cmp.fieldPicker.el)).width() / (itemMargin + itemWidth) + 0.5));
columnCount = columnCount < minCount ? minCount : columnCount;
menu.menuAlignEl = cmp.cmpEl; menu.menuAlignEl = cmp.cmpEl;
menu.menuAlign = 'tl-tl'; menu.menuAlign = 'tl-tl';
var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - columnCount * (itemMargin + itemWidth) - 1;
menu.setOffset(Math.min(offset, 0));
//columnCount * (itemWidth + itemMargin)
menu.cmpEl.css({ menu.cmpEl.css({
'width': columnCount * (itemWidth + itemMargin), 'width': cmp.cmpEl.width()- cmp.openButton.$el.width(),
'min-height': cmp.cmpEl.height() 'min-height': cmp.cmpEl.height()
}); });
} }
@ -224,17 +210,17 @@ define([
this.listEffects.menuPicker.itemTemplate =this.listEffects.fieldPicker.itemTemplate; this.listEffects.menuPicker.itemTemplate =this.listEffects.fieldPicker.itemTemplate;
this.btnPreview = new Common.UI.Button({ this.btnPreview = new Common.UI.Button({
cls: 'btn-toolbar text',// x-huge icon-top', cls: 'btn-toolbar ',// x-huge icon-top',
caption: this.txtPreview, caption: this.txtPreview,
split: false, split: false,
iconCls: 'toolbar__icon btn-rem-comment' iconCls: 'toolbar__icon btn-preview'
}); });
this.btnParametrs = new Common.UI.Button({ this.btnParametrs = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
caption: this.txtParametrs, caption: this.txtParametrs,
split: true, iconCls: 'toolbar__icon icon btn-insertshape',
iconCls: 'toolbar__icon icon btn-insertshape' menu: new Common.UI.Menu({items:this._arrEffectType})
}); });
this.btnApplyToAll = new Common.UI.Button({ this.btnApplyToAll = new Common.UI.Button({
@ -288,29 +274,12 @@ define([
(new Promise(function (accept, reject) { (new Promise(function (accept, reject) {
accept(); accept();
})).then(function(){ })).then(function(){
var itemsMenu=[];
_.each(me._arrEffectType, function (item){
itemsMenu.push(
{
caption: item.caption,
value: item.value,
checkable: true,
toggleGroup: 'effects',
disabled:false
}
);
});
me.btnParametrs.setMenu(
new Common.UI.Menu({
items: itemsMenu
})
);
setEvents.call(me); setEvents.call(me);
}); });
}, },
getPanel: function () { getPanel: function () {
//this.$el = $(_.template(template)( {} ));
this.listEffects&&this.listEffects.render(this.$el.find('#transit-field-effects')); this.listEffects&&this.listEffects.render(this.$el.find('#transit-field-effects'));
this.btnPreview && this.btnPreview.render(this.$el.find('#transit-button-preview')); this.btnPreview && this.btnPreview.render(this.$el.find('#transit-button-preview'));
this.btnParametrs && this.btnParametrs.render(this.$el.find('#transit-button-parametrs')); this.btnParametrs && this.btnParametrs.render(this.$el.find('#transit-button-parametrs'));
@ -328,16 +297,9 @@ define([
this.fireEvent('show', this); this.fireEvent('show', this);
}, },
getUserName: function (username) {
return Common.Utils.String.htmlEncode(AscCommon.UserInfoParser.getParsedName(username));
},
turnSpelling: function (state) {
},
SetDisabled: function (state, langs) { SetDisabled: function (state, langs) {
//this.btnPreview && this.btnPreview.setDisabled(state|| !Common.Utils.InternalSettings.get())
//this.btnCommentRemove && this.btnCommentRemove.setDisabled(state || !Common.Utils.InternalSettings.get(this.appPrefix + "settings-livecomment"));
}, },
renderComponent: function (compid, obj) renderComponent: function (compid, obj)
{ {
@ -402,7 +364,7 @@ define([
txtParametrs: 'Parametrs', txtParametrs: 'Parametrs',
txtApplyToAll: 'Apply to All Slides', txtApplyToAll: 'Apply to All Slides',
strDuration: 'Duration', strDuration: 'Duration',
strDelay: 'Delay', strDelay: 'DelayDelayDelayDelay',
strStartOnClick: 'Start On Click', strStartOnClick: 'Start On Click',
textNone: 'None', textNone: 'None',

2
apps/presentationeditor/main/resources/less/app.less
View file

@ -131,7 +131,7 @@
@import "rightmenu.less"; @import "rightmenu.less";
@import "advanced-settings.less"; @import "advanced-settings.less";
@import "document-preview.less"; @import "document-preview.less";
@import "Transitions"; @import "transitions";
@import "sprites/iconssmall@1x"; @import "sprites/iconssmall@1x";
@import "sprites/iconsbig@1x"; @import "sprites/iconsbig@1x";

20
apps/presentationeditor/main/resources/less/Transitions.less → apps/presentationeditor/main/resources/less/transitions.less
View file

@ -1,19 +1,37 @@
#transitions-panel { #transitions-panel {
input { input {
text-align: left; text-align: left;
padding-left: 3px;
}
.spinner-up i
{
margin-top: 3px;
margin-top: calc(3px/@pixel-ratio-factor);
}
.spinner-down i
{
margin-top: 4px;
margin-top: calc(4px/@pixel-ratio-factor);
}
.spinner
{
margin-left:10px;
} }
.item { .item {
background: transparent; background: transparent;
border-color: transparent; border-color: transparent;
border-radius: @scaled-one-px-value-ie;
border-radius: @scaled-one-px-value;
border-width: calc(2*@scaled-one-px-value-ie) ; border-width: calc(2*@scaled-one-px-value-ie) ;
border-width: calc(@scaled-two-px-value); border-width: calc(@scaled-two-px-value);
&:hover{ &:hover{
border-color: @border-preview-hover-ie; border-color: @border-preview-hover-ie;
border-color: @border-preview-hover; border-color: @border-preview-hover;
box-shadow: none;
} }
&.selected &.selected
{ {
box-shadow: none;
border-color: @border-preview-select-ie; border-color: @border-preview-select-ie;
border-color: @border-preview-select; border-color: @border-preview-select;
} }