pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-25 14:07:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

[DE] Add loading preview for smart arts

Browse Source
This commit is contained in:
Julia.Svinareva
2023-11-10 00:26:40 +03:00
parent 055839e062
commit 24fa55325f
3 changed files with 52 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/common/main/resources/less/common.less
View File

@ -388,4 +388,27 @@ body {
.color-btn-wrap {
display: flex;
align-items: center;
}
.menu-add-smart-art {
.loading-item {
.box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
.box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
display: flex;
justify-content: center;
align-items: center;
.loading-spinner {
display: block;
width: 28px;
height: 28px;
background-image: ~"url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDQ0IiBzdHJva2Utd2lkdGg9IjEuNSIgcj0iNy4yNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTYwJSwgNDAlIiAvPjwvc3ZnPg==)";
background-color: transparent;
opacity: 0.8;
animation-duration: .8s;
animation-name: rotation;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
}

21
apps/documenteditor/main/app/controller/Toolbar.js
View File

@ -3592,6 +3592,8 @@ define([
onApiBeginSmartArtPreview: function (type) {
this.smartArtGenerating = type;
this.smartArtGroups = this.toolbar.btnInsertSmartArt.menu.items;
var menuPicker = _.findWhere(this.smartArtGroups, {value: type}).menuPicker;
menuPicker.loaded = true;
this.smartArtData = Common.define.smartArt.getSmartArtData();
},
@ -3602,18 +3604,13 @@ define([
section = _.findWhere(this.smartArtData, {sectionId: sectionId}),
item = _.findWhere(section.items, {type: image.asc_getName()}),
menu = _.findWhere(this.smartArtGroups, {value: sectionId}),
menuPicker = menu.menuPicker;
if (item) {
var arr = [{
tip: item.tip,
value: item.type,
imageUrl: image.asc_getImage()
}];
//if (menuPicker.store.length < 1) {
//menuPicker.store.reset(arr);
//} else {
menuPicker.store.add(arr);
//}
menuPicker = menu.menuPicker,
pickerItem = menuPicker.store.findWhere({isLoading: true});
if (pickerItem) {
pickerItem.set('tip', item.tip, {silent: true});
pickerItem.set('value', item.type, {silent: true});
pickerItem.set('imageUrl', image.asc_getImage(), {silent: true});
pickerItem.set('isLoading', false);
}
this.currentSmartArtMenu = menu;
}, this));

26
apps/documenteditor/main/app/view/Toolbar.js
View File

@ -2364,6 +2364,7 @@ define([
caption: item.caption,
value: item.sectionId,
itemId: item.id,
itemsLength: length,
iconCls: item.icon ? 'menu__icon ' + item.icon : undefined,
menu: new Common.UI.Menu({
items: [
@ -2374,15 +2375,27 @@ define([
});
var onShowBeforeSmartArt = function (menu) { // + <% if(typeof imageUrl === "undefined" || imageUrl===null || imageUrl==="") { %> style="visibility: hidden;" <% } %>/>',
me.btnInsertSmartArt.menu.items.forEach(function (item, index) {
var items = [];
for (var i=0; i<item.options.itemsLength; i++) {
items.push({
isLoading: true
});
}
item.menuPicker = new Common.UI.DataView({
el: $('#' + item.options.itemId),
parentMenu: me.btnInsertSmartArt.menu.items[index].menu,
itemTemplate: _.template([
'<div>',
'<img src="<%= imageUrl %>" width="' + 70 + '" height="' + 70 + '" />',
'</div>'
].join('')),
store: new Common.UI.DataViewStore(),
'<% if (isLoading) { %>',
'<div class="loading-item" style="width: 70px; height: 70px;">',
'<i class="loading-spinner"></i>',
'</div>',
'<% } else { %>',
'<div>',
'<img src="<%= imageUrl %>" width="' + 70 + '" height="' + 70 + '" />',
'</div>',
'<% } %>'
].join('')),
store: new Common.UI.DataViewStore(items),
delayRenderTips: true,
scrollAlwaysVisible: true,
showLast: false
@ -2393,8 +2406,9 @@ define([
}
Common.NotificationCenter.trigger('edit:complete', me);
});
item.menuPicker.loaded = false;
item.$el.on('mouseenter', function () {
if (item.menuPicker.store.length === 0) {
if (!item.menuPicker.loaded) {
me.fireEvent('smartart:mouseenter', [item.value]);
}
});