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

Change icons for custom toolbar buttons (scale, theme, state)

Browse Source
This commit is contained in:
Julia Radzhabova
2024-01-25 17:53:26 +03:00
parent e7b85f5603
commit 38946d3ebb
3 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
apps/common/main/lib/component/Button.js
View File

@ -972,35 +972,66 @@ define([
Common.UI.ButtonCustom = Common.UI.Button.extend(_.extend({
initialize : function(options) {
options.iconCls = 'icon-custom ' + (options.iconCls || '');
Common.UI.Button.prototype.initialize.call(this, options);
this.iconsSet = Common.UI.iconsStr2IconsObj(this.options.iconsSet || ['']);
this.iconsSet = Common.UI.iconsStr2IconsObj(options.iconsSet || ['']);
var icons = Common.UI.getSuitableIcons(this.iconsSet);
this.iconImg = icons['normal'];
Common.UI.Button.prototype.initialize.call(this, _.extend({
iconImg: this.iconImg
}, options));
this.iconNormalImg = icons['normal'];
this.iconActiveImg = icons['active'];
},
render: function (parentEl) {
Common.UI.Button.prototype.render.call(this, parentEl);
var _current_active = false,
me = this;
this.cmpButtonFirst = $('button:first', this.$el || $(this.el));
const _callback = function (records, observer) {
var _hasactive = me.cmpButtonFirst.hasClass('active') || me.cmpButtonFirst.is(':active');
if ( _hasactive !== _current_active ) {
me.updateIcon();
_current_active = _hasactive;
}
};
this.cmpButtonFirst[0] && (new MutationObserver(_callback))
.observe(this.cmpButtonFirst[0], {
attributes : true,
attributeFilter : ['class'],
});
if (this.menu && !this.split) {
var onMouseDown = function (e) {
_callback();
$(document).on('mouseup', onMouseUp);
};
var onMouseUp = function (e) {
_callback();
$(document).off('mouseup', onMouseUp);
};
this.cmpButtonFirst.on('mousedown', _.bind(onMouseDown, this));
}
this.updateIcon();
Common.NotificationCenter.on('uitheme:changed', this.updateIcons.bind(this));
Common.NotificationCenter.on('window:resize', this.updateIcons.bind(this));
},
updateIcons: function() {
var icons = Common.UI.getSuitableIcons(this.iconsSet);
this.iconImg = this.options.iconImg = icons['normal'];
this.iconNormalImg = icons['normal'];
this.iconActiveImg = icons['active'];
this.cmpEl && this.cmpEl.find("img").attr("src", this.pressed ? this.iconActiveImg : this.iconImg);
this.updateIcon();
},
toggle: function(toggle, suppressEvent) {
Common.UI.Button.prototype.toggle.call(this, toggle, suppressEvent);
this.cmpEl && this.cmpEl.find("img").attr("src", this.pressed ? this.iconActiveImg : this.iconImg);
updateIcon: function() {
this.$icon && this.$icon.css({'background-image': 'url('+ (this.cmpButtonFirst && (this.cmpButtonFirst.hasClass('active') || this.cmpButtonFirst.is(':active')) ? this.iconActiveImg : this.iconNormalImg) +')'});
},
applyScaling: function (ratio) {
if ( this.options.scaling !== ratio ) {
this.options.scaling = ratio;
this.updateIcons();
}
}
}, Common.UI.ButtonCustom || {}));
});

4
apps/common/main/lib/controller/LayoutManager.js
View File

@ -158,6 +158,7 @@ Common.UI.LayoutManager = new(function() {
separator: true/false - inserted before item,
}
],
enableToggle: true/false - can press and depress button, only when no menu or has split menu
lockInViewMode: true/false - lock in view mode
}
]
@ -185,6 +186,7 @@ Common.UI.LayoutManager = new(function() {
caption: ((typeof item.text == 'object') ? item.text[lang] || item.text['en'] : item.text) || '',
menu: item.menu && item.menu.length > 0,
split: item.menu && item.menu.length > 0 && !!item.split,
enableToggle: item.enableToggle && (!item.menu || !!item.split),
value: item.id,
guid: plugin.guid,
hint: ((typeof item.hint == 'object') ? item.hint[lang] || item.hint['en'] : item.hint) || '',
@ -214,7 +216,7 @@ Common.UI.LayoutManager = new(function() {
}
if ( !btn.menu || btn.split) {
btn.on('click', function(b, e) {
api && api.onPluginButtonClick && api.onPluginButtonClick(b.options.guid, b.options.value);
api && api.onPluginButtonClick && api.onPluginButtonClick(b.options.guid, b.options.value, b.pressed);
});
}
var $slot = $('<span class="btn-slot text x-huge"></span>').appendTo(_group);

5
apps/common/main/resources/less/buttons.less
View File

@ -417,6 +417,11 @@
}
}
.icon-custom {
background-position: 0 0 !important;
background-size: cover;
}
.btn-toolbar {
display: inline-block;
position: relative;