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

Merge branch 'feature/chart-svg-icons' into develop

Browse source
This commit is contained in:
Julia Radzhabova 2020-05-06 18:20:30 +03:00
parent 9b1aa597c4 0a54513e47
commit e3dd2bc5dd
27 changed files with 242 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/common/main/lib/component/Button.js
View file

@ -647,8 +647,14 @@ define([
oldCls = this.iconCls;
this.iconCls = cls;
btnIconEl.removeClass(oldCls);
btnIconEl.addClass(cls || '');
if (/svgicon/.test(this.iconCls)) {
var icon = /svgicon\s(\S+)/.exec(this.iconCls);
btnIconEl.find('use.zoom-int').attr('xlink:href', icon && icon.length>1 ? '#' + icon[1]: '');
btnIconEl.find('use.zoom-grit').attr('xlink:href', icon && icon.length>1 ? '#' + icon[1] + '-150' : '');
} else {
btnIconEl.removeClass(oldCls);
btnIconEl.addClass(cls || '');
}
},
changeIcon: function(opts) {

BIN
apps/common/main/resources/img/toolbar/charttypes.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.9 KiB

157
apps/common/main/resources/img/toolbar/charttypes.svg Normal file
View file

@ -0,0 +1,157 @@
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="chart-column-normal" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M33 6H27V34H33V6ZM20 14H26V34H20V14ZM19 20H13V34H19V20ZM12 26H6V34H12V26Z" fill="#444444"/>
</symbol>
<symbol id="chart-column-stack" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M33 17H27V34H33V17ZM20 22H26V34H20V22ZM19 26H13V34H19V26ZM12 29H6V34H12V29Z" fill="#444444"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M33 6H27V17H33V6ZM20 14H26V22H20V14ZM19 20H13V26H19V20ZM12 25H6V29H12V25Z" fill="#444444"/>
</symbol>
<symbol id="chart-column-pstack" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M33 14H27V34H33V14ZM20 16H26V34H20V16ZM19 18H13V34H19V18ZM12 21H6V34H12V21Z" fill="#444444"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M12 6H6V21H12V6ZM19 6H13V18H19V6ZM20 6H26V16H20V6ZM33 6H27V14H33V6Z" fill="#444444"/>
</symbol>
<symbol id="chart-column-3d-normal" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 34L27 35V8L23 7V34ZM22 33L18 32V11L22 12V33ZM13 30L17 31V17L13 16V30ZM8 28L12 29V21L8 20V28Z" fill="#444444"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M31 7L27 6L23 7L27 8L31 7ZM22 10L23 10.25V11.75L22 12L18 11L22 10ZM18 15.25L17 15L13 16L17 17L18 16.75V15.25ZM12 19L13 19.25V20.75L12 21L8 20L12 19Z" fill="#444444"/>
<path opacity="0.4" d="M31 7L27 8V35L31 34V7Z" fill="#444444"/>
</symbol>
<symbol id="chart-column-3d-stack" viewBox="0 0 40 40">
<path opacity="0.2" d="M27 7L31 6V16L27 17V7Z" fill="#444444"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M23 6L27 5L31 6L27 7L23 6ZM31 16L27 17V34L31 33V16ZM26 20H23V32H26V20ZM18 10L22 9L23 9.25V10.75L22 11L18 10ZM17 14L13 15L17 16L18 15.75V14.25L17 14ZM8 19L12 18L13 18.25V19.75L12 20L8 19Z" fill="#444444"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M27 7L23 6V16L27 17V7ZM22 11L18 10V20L22 21V11ZM12 20L8 19V23L12 24V20ZM13 15L17 16V23L13 22V15Z" fill="#444444"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 16L27 17V34L23 33V16ZM22 21L18 20V31L22 32V21ZM13 22L17 23V30L13 29V22ZM8 23L12 24V28L8 27V23Z" fill="#444444"/>
</symbol>
<symbol id="chart-column-3d-pstack" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 35L28 36V17L24 16V35ZM23 34L19 33V18L23 19V34ZM14 31L18 32V21L14 20V31ZM9 29L13 30V23L9 22V29Z" fill="#444444"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M13 6L9 5V22L13 23V6ZM14 7L18 8V21L14 20V7ZM23 10L19 9V18L23 19V10ZM28 12L24 11V16L28 17V12Z" fill="#444444"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M9 5L13 6L17 5L13 4L9 5ZM18 8L14 7L18 6L22 7L18 8ZM19 9L23 10L27 9L23 8L19 9ZM28 12L24 11L28 10L32 11L28 12ZM28 17L32 16V35L28 36V17Z" fill="#444444"/>
<path opacity="0.2" d="M28 12L32 11V16L28 17V12Z" fill="#444444"/>
</symbol>
<symbol id="chart-column-3d-normal-per" viewBox="0 0 40 40">
<path d="M24.0002 6L28.0002 7V31L25 30V18V17.5V17L24.0002 16.7617V6Z" fill="#444444"/>
<path d="M19 10L23 11V16.5L21 16L19 16.5V10Z" fill="#444444"/>
<path d="M14 14L18 15V16.7617L17 17V20.25L16 20L14 20.5V14Z" fill="#444444"/>
<path opacity="0.2" d="M21 18L25 17V35L21 36V18Z" fill="#444444"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M32 6L28 7V31L32 30V6ZM17.0002 17L21.0002 18V36L17.0002 35V17ZM12.0002 21L16.0002 22V34L12.0002 33V21ZM11 26L7 25V31L11 32V26Z" fill="#444444"/>
<path id="lighter max_2" opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M23.9999 6L27.9999 5L31.9999 6L27.9999 7L23.9999 6ZM19.0001 10L23.0001 9L27.0001 10L23.0001 11L19.0001 10ZM18 13L14 14L18 15L22 14L18 13ZM25 17L21 16L17 17L21 18L25 17ZM16 20L17 20.25V21.75L16 22L12 21L16 20ZM11 24L12 24.25V25.75L11 26L7 25L11 24Z" fill="#444444"/>
</symbol>
<symbol id="chart-line-normal" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26 16.5L28.5 14L24.5 10L19.5 15L22 17.5L24.5 15L26 16.5ZM6 28.5L8.5 31L19.5 20L17 17.5L6 28.5ZM34 19.5L31.5 22L28.5 19L31 16.5L34 19.5Z" fill="#444444"/>
<path opacity="0.4" d="M6 20.5L15.5 11L23.5 19L31.5 11L34 13.5L23.5 24L15.5 16L8.5 23L6 20.5Z" fill="#444444"/>
</symbol>
<symbol id="chart-line-stack" viewBox="0 0 40 40">
<path d="M6 30.5L17.5 19L22.5 24L31.5 15L34 17.5L22.5 29L17.5 24L8.5 33L6 30.5Z" fill="#444444"/>
<path opacity="0.4" d="M6 22.5L17.5 11L22.5 16L31.5 7L34 9.5L22.5 21L17.5 16L8.5 25L6 22.5Z" fill="#444444"/>
</symbol>
<symbol id="chart-line-pstack" viewBox="0 0 40 40">
<path d="M6 29.5L17.5 18L22.5 23L31.5 14L34 16.5L22.5 28L17.5 23L8.5 32L6 29.5Z" fill="#444444"/>
<rect opacity="0.4" x="6" y="8" width="28" height="4" fill="#444444"/>
</symbol>
<symbol id="chart-line-3d" viewBox="0 0 40 40">
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M17.5 18L5.5 10H9.5L22.5 18H17.5ZM20.5 33L12.5 21H16.5L25.5 33H20.5Z" fill="#444444"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.5 9H30.5L17.5 18H22.5L38.5 9ZM2.5 28L12.5 21L13.62 22.68L4.5 28H2.5ZM38.5 22H30.5L20.5 33H25.5L38.5 22Z" fill="#444444"/>
</symbol>
<symbol id="chart-pie-normal" viewBox="0 0 40 40">
<path d="M5 20C5 22.9667 5.87973 25.8668 7.52796 28.3336C9.17618 30.8003 11.5189 32.7229 14.2597 33.8582C17.0006 34.9935 20.0166 35.2906 22.9264 34.7118C25.8361 34.133 28.5088 32.7044 30.6066 30.6066C32.7044 28.5088 34.133 25.8361 34.7118 22.9264C35.2906 20.0166 34.9935 17.0006 33.8582 14.2597C32.7229 11.5189 30.8003 9.17618 28.3336 7.52796C25.8668 5.87973 22.9667 5 20 5L20 20L5 20Z" fill="#444444"/>
<path opacity="0.4" d="M20 5C18.0302 5 16.0796 5.38799 14.2597 6.14181C12.4399 6.89563 10.7863 8.00052 9.3934 9.3934C8.00052 10.7863 6.89563 12.4399 6.14181 14.2598C5.38799 16.0796 5 18.0302 5 20L20 20V5Z" fill="#444444"/>
</symbol>
<symbol id="chart-pie-doughnut" viewBox="0 0 40 40">
<path d="M5 20C5 22.9667 5.87973 25.8668 7.52796 28.3336C9.17618 30.8003 11.5189 32.7229 14.2597 33.8582C17.0006 34.9935 20.0166 35.2906 22.9264 34.7118C25.8361 34.133 28.5088 32.7044 30.6066 30.6066C32.7044 28.5088 34.133 25.8361 34.7118 22.9264C35.2906 20.0166 34.9935 17.0006 33.8582 14.2597C32.7229 11.5189 30.8003 9.17618 28.3336 7.52796C25.8668 5.87973 22.9667 5 20 5L20 11C21.78 11 23.5201 11.5278 25.0001 12.5168C26.4802 13.5057 27.6337 14.9113 28.3149 16.5558C28.9961 18.2004 29.1743 20.01 28.8271 21.7558C28.4798 23.5016 27.6226 25.1053 26.364 26.364C25.1053 27.6226 23.5016 28.4798 21.7558 28.8271C20.01 29.1743 18.2004 28.9961 16.5558 28.3149C14.9113 27.6337 13.5057 26.4802 12.5168 25.0001C11.5278 23.5201 11 21.78 11 20L5 20Z" fill="#444444"/>
<path opacity="0.4" d="M20 5C18.0302 5 16.0796 5.38799 14.2597 6.14181C12.4399 6.89563 10.7863 8.00052 9.3934 9.3934C8.00052 10.7863 6.89563 12.4399 6.14181 14.2598C5.38799 16.0796 5 18.0302 5 20L11 20C11 18.8181 11.2328 17.6478 11.6851 16.5559C12.1374 15.4639 12.8003 14.4718 13.636 13.636C14.4718 12.8003 15.4639 12.1374 16.5558 11.6851C17.6478 11.2328 18.8181 11 20 11V5Z" fill="#444444"/>
</symbol>
<symbol id="chart-pie-3d-normal" viewBox="0 0 40 40">
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M31.3137 9.22183C34.3143 11.2847 36 14.0826 36 17L36 22C36 24.9174 34.3143 27.7153 31.3137 29.7782C28.3131 31.8411 24.2435 33 20 33C15.7565 33 11.6869 31.8411 8.68629 29.7782C5.68571 27.7153 4 24.9174 4 22V17C4 14.0826 5.68571 11.2847 8.68629 9.22182C11.6869 7.15892 15.7565 6 20 6C24.2435 6 28.3131 7.15893 31.3137 9.22183Z" fill="#444444"/>
<path d="M4 17C4 19.1756 4.93838 21.3023 6.69649 23.1113C8.45459 24.9202 10.9534 26.3301 13.8771 27.1627C16.8007 27.9952 20.0177 28.2131 23.1214 27.7886C26.2251 27.3642 29.0761 26.3166 31.3137 24.7782C33.5513 23.2398 35.0752 21.2798 35.6926 19.146C36.3099 17.0122 35.9931 14.8005 34.7821 12.7905C33.5711 10.7805 31.5203 9.06253 28.8891 7.85383C26.2579 6.64514 23.1645 6 20 6L20 17L4 17Z" fill="#444444"/>
</symbol>
<symbol id="chart-bar-normal" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 6H6V12H15V6ZM6 27V33H34V27H6ZM6 13H20V19H6V13ZM26 20H6V26H26V20Z" fill="#444444"/>
</symbol>
<symbol id="chart-bar-stack" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6H6V12H11V6ZM14 13H6V19H14V13ZM6 20H18V26H6V20ZM23 27H6V33H23V27Z" fill="#444444"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M15 6H11V12H15V6ZM20 13H14V19H20V13ZM18 20H26V26H18V20ZM34 27H23V33H34V27Z" fill="#444444"/>
</symbol>
<symbol id="chart-bar-pstack" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 6H6V12H20V6ZM22 13H6V19H22V13ZM6 20H24V26H6V20ZM26 27H6V33H26V27Z" fill="#444444"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M34 6H20V12H34V6ZM34 13H22V19H34V13ZM24 20H34V26H24V20ZM34 27H26V33H34V27Z" fill="#444444"/>
</symbol>
<symbol id="chart-bar-3d-normal" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 9L8 5V10L20 14V9ZM8 11L23 16V21L8 16V11ZM26 23L8 17L8 22L26 28V23ZM29 30L8 23V28L29 35L29 30Z" fill="#444444"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M24 8L20 9V14L24 13V8ZM23 16L27 15V20L23 21V16ZM30 22L26 23V28L30 27V22ZM33 29L29 30V35L33 34V29Z" fill="#444444"/>
<path opacity="0.4" d="M12 4L24 8L20 9L8 5L12 4Z" fill="#444444"/>
</symbol>
<symbol id="chart-bar-3d-stack" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6L8 5V10L11 11V6ZM8 16V11L14 13V18L8 16ZM17 20L8 17L8 22L17 25V20ZM8 23V28L20 32V27L8 23Z" fill="#444444"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M15 5L12 4L8 5L11 6L15 5ZM20 9L24 8V13L20 14V9ZM27 15L23 16V21L27 20V15ZM26 23L30 22V27L26 28V23ZM29 30L33 29V34L29 35L29 30Z" fill="#444444"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M20 9L11 6V11L20 14V9ZM14 13L23 16V21L14 18V13ZM26 23L17 20V25L26 28V23ZM29 30L20 27V32L29 35V30Z" fill="#444444"/>
<path opacity="0.2" d="M15 5L24 8L20 9L11 6L15 5Z" fill="#444444"/>
</symbol>
<symbol id="chart-bar-3d-pstack" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7L8 5V10L14 12V7ZM8 11L17 14V19L8 16V11ZM20 26V21L8 17V22L20 26ZM23 28L8 23V28L23 33V28Z" fill="#444444"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M29 12L14 7V12L29 17V12ZM17 14L29 18V23L17 19V14ZM29 24L20 21V26L29 29V24ZM29 30L23 28V33L29 35V30Z" fill="#444444"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M18 6L12 4L8 5L14 7L18 6ZM29 12L33 11V16L29 17V12ZM33 17L29 18V23L33 22V17ZM29 24L33 23V28L29 29V24ZM29 30L33 29V34L29 35V30Z" fill="#444444"/>
<path opacity="0.2" d="M18 6L33 11L29 12L14 7L18 6Z" fill="#444444"/>
</symbol>
<symbol id="chart-area-normal" viewBox="0 0 40 40">
<path d="M15.5 24L19.5 29L34 14V34H6L15.5 24Z" fill="#444444"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M19.5 29L15.5 24L6 34L15.5 15L20.5 22H26.2667L19.5 29Z" fill="#444444"/>
</symbol>
<symbol id="chart-area-stack" viewBox="0 0 40 40">
<path d="M15.5 24L19.5 29L34 14V34H6L15.5 24Z" fill="#444444"/>
<path opacity="0.4" d="M15.5 17L19.5 22L34 7V14L19.5 29L15.5 24L6 34V27L15.5 17Z" fill="#444444"/>
</symbol>
<symbol id="chart-area-pstack" viewBox="0 0 40 40">
<path d="M15.5 24L19.5 29L34 14V34H6L15.5 24Z" fill="#444444"/>
<path opacity="0.4" d="M6 6H34V14L19.5 29L15.5 24L6 34V6Z" fill="#444444"/>
</symbol>
<symbol id="chart-point-normal" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7H7V20.5V34H34V33H8V7ZM11.5 30C12.3284 30 13 29.3284 13 28.5C13 27.6716 12.3284 27 11.5 27C10.6716 27 10 27.6716 10 28.5C10 29.3284 10.6716 30 11.5 30ZM16 22.5C16 23.3284 15.3284 24 14.5 24C13.6716 24 13 23.3284 13 22.5C13 21.6716 13.6716 21 14.5 21C15.3284 21 16 21.6716 16 22.5ZM20.5 21C21.3284 21 22 20.3284 22 19.5C22 18.6716 21.3284 18 20.5 18C19.6716 18 19 18.6716 19 19.5C19 20.3284 19.6716 21 20.5 21ZM28 19.5C28 20.3284 27.3284 21 26.5 21C25.6716 21 25 20.3284 25 19.5C25 18.6716 25.6716 18 26.5 18C27.3284 18 28 18.6716 28 19.5ZM26.5 27C27.3284 27 28 26.3284 28 25.5C28 24.6716 27.3284 24 26.5 24C25.6716 24 25 24.6716 25 25.5C25 26.3284 25.6716 27 26.5 27ZM34 19.5C34 20.3284 33.3284 21 32.5 21C31.6716 21 31 20.3284 31 19.5C31 18.6716 31.6716 18 32.5 18C33.3284 18 34 18.6716 34 19.5ZM29.5 15C30.3284 15 31 14.3284 31 13.5C31 12.6716 30.3284 12 29.5 12C28.6716 12 28 12.6716 28 13.5C28 14.3284 28.6716 15 29.5 15Z" fill="#444444"/>
</symbol>
<symbol id="chart-stock-normal" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7H7V20.5V34H34V33H8V7ZM23 12H22V16H20V20H22V24H23V20H25V16H23V12ZM13 27H11V20H13V16H14V20H16V27H14V31H13V27ZM31 11H29V18H31V22H32V18H34V11H32V7H31V11Z" fill="#444444"/>
</symbol>
<symbol id="chart-spark-line" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.86358 21.8725L15.7636 27.7725L20.7636 16.7725L25.682 21.691L31.6394 5.65181L33.5143 6.34819L26.4717 25.309L21.3901 20.2275L16.3901 31.2275L10.2901 25.1275L5.44232 33.5008L3.71148 32.4987L9.86358 21.8725Z" fill="#444444"/>
</symbol>
<defs>
<clipPath id="clip0">
<path d="M0 0H40V40H0V0Z" fill="white"/>
</clipPath>
</defs>
<symbol id="chart-spark-column" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26 6H20V34H26V6ZM13 14H19V34H13V14ZM33 18H27V34H33V18ZM12 20H6V34H12V20Z" fill="#444444"/>
</symbol>
<symbol id="chart-spark-win" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7H12V20H6V7ZM13 7H19V20H13V7ZM33 7H27V20H33V7Z" fill="#444444"/>
<rect opacity="0.4" x="20" y="20" width="6" height="13" fill="#444444"/>
</symbol>
<symbol id="chart-surface-normal" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V15.0117L6 28.0117H8.29308L4.64648 31.6581L5.35357 32.3652L9.70733 28.0117H16.5L27 34.0117L30.7242 25.0116L36 25.0116L36 24.0116L31.138 24.0116L33 19.5117L22.5 8.01172L13 14.3451V6H12ZM17.837 24.3331L19.1385 18.5263L23.5873 23.1301C22.7174 23.5372 21.8181 23.8456 20.906 24.0206C19.7223 24.2476 18.7595 24.3698 17.837 24.3331ZM16.617 25.2036L16.2117 27.0117H7.56291L10.2783 21.1283C10.5037 21.3862 10.7771 21.6877 11.0846 22.0044C11.9473 22.8927 13.1287 23.9536 14.2985 24.4692C15.1229 24.8325 15.8764 25.0699 16.617 25.2036ZM16.8359 24.2269C16.1677 24.1101 15.4773 23.8959 14.7018 23.5541C13.72 23.1214 12.6514 22.1823 11.802 21.3077C11.4314 20.9262 11.1121 20.5669 10.8714 20.2852L18.1822 18.2208L16.8359 24.2269ZM17.615 25.3232C17.6295 25.3241 17.644 25.3249 17.6585 25.3257C18.7407 25.3857 19.8305 25.2451 21.0943 25.0027C22.1885 24.7928 23.2713 24.4012 24.3136 23.8817L28.3718 28.0812L26.5102 32.5801L17.1831 27.2503L17.615 25.3232ZM25.2274 23.3883L28.7887 27.0736L31.833 19.7166L30.7961 18.581C30.6237 18.79 30.4188 19.031 30.1871 19.2902C28.8262 20.8126 27.1112 22.2931 25.2274 23.3883ZM30.1147 17.8347L22.7292 9.74581L19.4441 17.4034L24.5166 22.6527C26.3887 21.6052 28.0891 20.1367 29.4415 18.6238C29.7055 18.3285 29.933 18.058 30.1147 17.8347ZM21.6168 9.80239L18.4881 17.0954L11.1883 19.1566L12.7896 15.6871L21.6168 9.80239Z" fill="#444444"/>
<g opacity="0.4">
<path d="M19.1385 18.5263L17.837 24.3331C18.7595 24.3698 19.7223 24.2476 20.906 24.0206C21.8181 23.8456 22.7174 23.5372 23.5873 23.1301L19.1385 18.5263Z" fill="#444444"/>
<path d="M14.7018 23.5541C15.4773 23.8959 16.1677 24.1101 16.8359 24.2269L18.1822 18.2208L10.8714 20.2852C11.1121 20.5669 11.4314 20.9262 11.802 21.3077C12.6514 22.1823 13.72 23.1214 14.7018 23.5541Z" fill="#444444"/>
<path d="M22.7292 9.74581L30.1147 17.8347C29.933 18.058 29.7055 18.3285 29.4415 18.6238C28.0891 20.1367 26.3887 21.6052 24.5166 22.6527L19.4441 17.4034L22.7292 9.74581Z" fill="#444444"/>
<path d="M18.4881 17.0954L21.6168 9.80239L12.7896 15.6871L11.1883 19.1566L18.4881 17.0954Z" fill="#444444"/>
</g>
</symbol>
<symbol id="chart-surface-wireframe" viewBox="0 0 40 40">
<g opacity="0.4">
<path d="M24.4393 24.0117H17.909L17.6848 25.0117H25.4056L24.4393 24.0117Z" fill="#444444"/>
<path d="M29.6419 25.0117H26.7962L25.8299 24.0117H30.0557L29.6419 25.0117Z" fill="#444444"/>
<path d="M16.66 25.0117L16.8842 24.0117H13.0004L13.0005 19.684L12.0005 19.9664L12.0004 24.3042L9.29291 27.0117H10.7071L12.7071 25.0117H16.66Z" fill="#444444"/>
<path d="M12.0005 18.9273L13.0005 18.6449L13.0005 15.5466L12.7896 15.6871L12.0005 17.397L12.0005 18.9273Z" fill="#444444"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 15.0117V6H13V14.3451L22.5 8.01172L33 19.5117L31.138 24.0116L36 24.0116L36 25.0116L30.7242 25.0116L27 34.0117L16.5 28.0117H9.70733L5.35357 32.3652L4.64648 31.6581L8.29308 28.0117H6L12 15.0117ZM19.1385 18.5263L17.1831 27.2503L26.5102 32.5801L28.3718 28.0812L19.1385 18.5263ZM18.4881 17.0954L21.6168 9.80239L12.7896 15.6871L11.1883 19.1566L18.4881 17.0954ZM22.7292 9.74581L19.4441 17.4034L28.7887 27.0736L31.833 19.7166L22.7292 9.74581ZM7.56291 27.0117L10.6369 20.3514L18.1822 18.2208L16.2117 27.0117H7.56291Z" fill="#444444"/>
</symbol>
<symbol id="chart-contour-normal" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 7V34H34V7H7ZM19.9994 8H8V20H19.9994V8ZM20.9994 8V20H25.9058C26.221 19.4031 26.5232 18.7899 26.8155 18.1718C27.1967 17.366 27.5639 16.5451 27.9217 15.7452C28.5259 14.3941 29.1035 13.1029 29.6756 12.047C30.1349 11.1992 30.6145 10.4552 31.137 9.91811C31.66 9.38042 32.2762 8.99994 32.9999 8.99993L33 8H20.9994ZM25.355 21H20.9994V25.8163C21.7839 25.398 22.5013 24.8046 23.1681 24.0797C23.9739 23.2036 24.6942 22.147 25.355 21ZM20.9994 26.9284C22.0933 26.4431 23.0537 25.6812 23.9041 24.7567C24.8901 23.6847 25.7426 22.3795 26.5028 21H33V33H20.9994V26.9284ZM19.9994 26.2398V21H8V21.875L8.31595 22.112L8.36241 22.1465C8.40379 22.1771 8.46567 22.2224 8.54631 22.2805C8.70763 22.3967 8.94385 22.5636 9.24104 22.7648C9.83585 23.1676 10.6726 23.7061 11.6401 24.2494C13.5964 25.3479 16.0074 26.4194 18.02 26.5003C18.7238 26.5286 19.3815 26.4361 19.9994 26.2398ZM19.9994 27.2817V33H8V23.1193C8.16619 23.2385 8.3967 23.4008 8.68037 23.5929C9.29197 24.007 10.1529 24.5612 11.1505 25.1214C13.1245 26.2298 15.7135 27.4084 17.9798 27.4995C18.6961 27.5283 19.368 27.4498 19.9994 27.2817ZM33 20H27.0327C27.2702 19.5352 27.4986 19.0664 27.7195 18.5994C28.1239 17.7445 28.5003 16.9021 28.8609 16.0954C29.4506 14.7758 29.9978 13.5515 30.5548 12.5234C30.9997 11.7023 31.4275 11.0537 31.8538 10.6154C32.2796 10.1776 32.6537 9.99993 33 9.99993V20Z" fill="#444444"/>
<g opacity="0.4">
<path d="M19.9994 20H8V8H19.9994V20Z" fill="#444444"/>
<path d="M20.9994 8V20H25.9058C26.221 19.4031 26.5232 18.7899 26.8155 18.1718C27.1967 17.366 27.5639 16.5451 27.9217 15.7452C28.5259 14.3941 29.1035 13.1029 29.6756 12.047C30.1349 11.1992 30.6145 10.4552 31.137 9.91811C31.66 9.38042 32.2762 8.99994 32.9999 8.99993L33 8H20.9994Z" fill="#444444"/>
<path d="M8 21.875L8.31595 22.112L8.36241 22.1465C8.40379 22.1771 8.46567 22.2224 8.54631 22.2805C8.70763 22.3967 8.94385 22.5636 9.24104 22.7648C9.83585 23.1676 10.6726 23.7061 11.6401 24.2494C13.5964 25.3479 16.0074 26.4194 18.02 26.5003C18.7238 26.5286 19.3815 26.4361 19.9994 26.2398V21H8V21.875Z" fill="#444444"/>
<path d="M20.9994 21H25.355C24.6942 22.147 23.9739 23.2036 23.1681 24.0797C22.5013 24.8046 21.7839 25.398 20.9994 25.8163V21Z" fill="#444444"/>
</g>
</symbol>
<symbol id="chart-contour-wireframe" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 7V34H34V7H7ZM19.9994 8H8V20H19.9994V8ZM20.9994 8V20H25.9058C26.221 19.4031 26.5232 18.7899 26.8155 18.1718C27.1967 17.366 27.5639 16.5451 27.9217 15.7452C28.5259 14.3941 29.1035 13.1029 29.6756 12.047C30.1349 11.1992 30.6145 10.4552 31.137 9.91811C31.66 9.38042 32.2762 8.99994 32.9999 8.99993L33 8H20.9994ZM25.355 21H20.9994V25.8163C21.7839 25.398 22.5013 24.8046 23.1681 24.0797C23.9739 23.2036 24.6942 22.147 25.355 21ZM20.9994 26.9284C22.0933 26.4431 23.0537 25.6812 23.9041 24.7567C24.8901 23.6847 25.7426 22.3795 26.5028 21H33V33H20.9994V26.9284ZM19.9994 26.2398V21H8V21.8716L8.30468 22.1035L8.31595 22.112L8.36241 22.1465C8.40379 22.1771 8.46567 22.2224 8.54631 22.2805C8.70763 22.3967 8.94385 22.5636 9.24104 22.7648C9.83585 23.1676 10.6726 23.7061 11.6401 24.2494C13.5964 25.3479 16.0074 26.4194 18.02 26.5003C18.7238 26.5286 19.3815 26.4361 19.9994 26.2398ZM19.9994 27.2817V33H8V23.1193C8.16619 23.2385 8.3967 23.4008 8.68037 23.5929C9.29197 24.007 10.1529 24.5612 11.1505 25.1214C13.1245 26.2298 15.7135 27.4084 17.9798 27.4995C18.6961 27.5283 19.368 27.4498 19.9994 27.2817ZM33 20H27.0327C27.2702 19.5352 27.4986 19.0664 27.7195 18.5994C28.1239 17.7445 28.5003 16.9021 28.8609 16.0954C29.4506 14.7758 29.9978 13.5515 30.5548 12.5234C30.9997 11.7023 31.4275 11.0537 31.8538 10.6154C32.2796 10.1776 32.6537 9.99993 33 9.99993V20Z" fill="#444444"/>
</symbol>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
apps/common/main/resources/img/toolbar/charttypes@1.5x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
apps/common/main/resources/img/toolbar/charttypes@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 17 KiB

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

@ -795,6 +795,12 @@
position: relative;
}
svg.icon {
vertical-align: middle;
width: 52px;
padding: 5px;
}
&:hover,
.over,
&:active,

142
apps/common/main/resources/less/toolbar.less
View file

@ -514,135 +514,17 @@
}
.item-chartlist {
.background-ximage-v2('toolbar/charttypes.png', 250px);
width: 50px;
height: 50px;
width: 40px;
height: 40px;
.icon {
width: 40px;
height: 40px;
}
svg.icon {
display: inline-block;
vertical-align: middle;
fill: #444444;
}
}
.line-normal {
background-position: 0 0;
}
.line-stack {
background-position: -50px 0;
}
.line-pstack {
background-position: -100px 0;
}
.line-3d {
background-position: -150px 0;
}
.column-normal {
background-position: 0 -50px;
}
.column-stack{
background-position: -50px -50px;
}
.column-pstack{
background-position: -100px -50px;
}
.column-3d-normal {
background-position: -150px -50px;
}
.column-3d-stack{
background-position: -200px -50px;
}
.column-3d-pstack{
background-position: -150px -100px;
}
.column-3d-normal-per{
background-position: -200px -100px;
}
.bar-normal {
background-position: 0 -100px;
}
.bar-stack{
background-position: -50px -100px;
}
.bar-pstack{
background-position: -100px -100px;
}
.bar-3d-normal {
background-position: -150px -150px;
}
.bar-3d-stack{
background-position: -200px -150px;
}
.bar-3d-pstack{
background-position: -150px -200px;
}
.area-normal {
background-position: 0 -150px;
}
.area-stack{
background-position: -50px -150px;
}
.area-pstack{
background-position: -100px -150px;
}
.pie-normal {
background-position: 0 -200px;
}
.pie-3d-normal {
background-position: -200px -200px;
}
.point-normal{
background-position: -50px -200px;
}
.stock-normal{
background-position: -100px -200px;
}
.pie-doughnut{
background-position: -200px 0;
}
.spark-line{
background-position: 0px -250px;
}
.spark-column{
background-position: -50px -250px;
}
.spark-win{
background-position: -100px -250px;
}
.surface-normal{
background-position: 0px -300px;
}
.surface-wireframe{
background-position: -50px -300px;
}
.contour-normal{
background-position: -100px -300px;
}
.contour-wireframe{
background-position: -150px -300px;
}

14
apps/documenteditor/main/app/view/ChartSettings.js
View file

@ -136,7 +136,7 @@ define([
value = props.get_SeveralChartTypes();
if (this._state.SeveralCharts && value) {
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this._state.ChartType = null;
} else {
var type = this.chartProps.getType();
@ -144,9 +144,9 @@ define([
var record = this.mnuChartTypePicker.store.findWhere({type: type});
this.mnuChartTypePicker.selectRecord(record, true);
if (record) {
this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
} else
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this.updateChartStyles(this.api.asc_getChartPreviews(type));
this._state.ChartType = type;
}
@ -248,9 +248,9 @@ define([
this.btnChartType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-chartlist bar-normal',
iconCls : 'svgicon chart-column-normal',
menu : new Common.UI.Menu({
style: 'width: 435px; padding-top: 12px;',
style: 'width: 364px; padding-top: 12px;',
items: [
{ template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
@ -263,7 +263,7 @@ define([
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnChartType.render($('#chart-button-type'));
@ -386,7 +386,7 @@ define([
rawData = record;
}
this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls);
this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this._state.ChartType = -1;
if (this.api && !this._noApply && this.chartProps) {

4
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -1691,7 +1691,7 @@ define([
this.paragraphControls.push(this.mnuInsertPageCount);
this.btnInsertChart.setMenu( new Common.UI.Menu({
style: 'width: 435px;',
style: 'width: 364px;',
items: [
{template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
]
@ -1705,7 +1705,7 @@ define([
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData(true)),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
picker.on('item:click', function (picker, item, record, e) {
if (record)

1
apps/documenteditor/main/index.html
View file

@ -259,6 +259,7 @@
<img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
<img class="inline-svg" src="../../common/main/resources/img/header/buttons150.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/docx.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/dotx.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/pdf.svg">

1
apps/documenteditor/main/index.html.deploy
View file

@ -293,6 +293,7 @@
<inline src="resources/img/doc-formats/html.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>

1
apps/documenteditor/main/index_loader.html
View file

@ -260,6 +260,7 @@
<script src="../../../vendor/svg-injector/svg-injector.min.js"></script>
<img class="inline-svg" src="../../common/main/resources/img/header/buttons.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/docx.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/dotx.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/pdf.svg">

1
apps/documenteditor/main/index_loader.html.deploy
View file

@ -315,6 +315,7 @@
<inline src="resources/img/doc-formats/html.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<div id="viewport"></div>
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>

14
apps/presentationeditor/main/app/view/ChartSettings.js
View file

@ -119,7 +119,7 @@ define([
value = props.get_SeveralChartTypes();
if (this._state.SeveralCharts && value) {
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this._state.ChartType = null;
} else {
var type = props.getType();
@ -127,9 +127,9 @@ define([
var record = this.mnuChartTypePicker.store.findWhere({type: type});
this.mnuChartTypePicker.selectRecord(record, true);
if (record) {
this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
} else
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this.updateChartStyles(this.api.asc_getChartPreviews(type));
this._state.ChartType = type;
}
@ -200,9 +200,9 @@ define([
var me = this;
this.btnChartType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-chartlist bar-normal',
iconCls : 'svgicon chart-bar-normal',
menu : new Common.UI.Menu({
style: 'width: 435px; padding-top: 12px;',
style: 'width: 364px; padding-top: 12px;',
items: [
{ template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
@ -215,7 +215,7 @@ define([
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnChartType.render($('#chart-button-type'));
@ -320,7 +320,7 @@ define([
rawData = record;
}
this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls);
this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this._state.ChartType = -1;
if (this.api && !this._noApply) {

4
apps/presentationeditor/main/app/view/DocumentHolder.js
View file

@ -3518,7 +3518,7 @@ define([
if (!menu) {
this.placeholderMenuChart = menu = new Common.UI.Menu({
style: 'width: 435px;',
style: 'width: 364px;',
items: [
{template: _.template('<div id="id-placeholder-menu-chart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
]
@ -3540,7 +3540,7 @@ define([
// restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
picker.on('item:click', function (picker, item, record, e) {
me.editChartClick(record.get('type'), me._state.placeholderObj);

4
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -1140,7 +1140,7 @@ define([
);
this.btnInsertChart.setMenu( new Common.UI.Menu({
style: 'width: 435px;',
style: 'width: 364px;',
items: [
{template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>')}
]
@ -1154,7 +1154,7 @@ define([
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData(true)),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
picker.on('item:click', function (picker, item, record, e) {
if (record)

1
apps/presentationeditor/main/index.html
View file

@ -294,6 +294,7 @@
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/otp.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/presentationeditor/main/index.html.deploy
View file

@ -338,6 +338,7 @@
<inline src="resources/img/doc-formats/otp.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>

1
apps/presentationeditor/main/index_loader.html
View file

@ -258,6 +258,7 @@
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/otp.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/presentationeditor/main/index_loader.html.deploy
View file

@ -312,6 +312,7 @@
<inline src="resources/img/doc-formats/otp.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<div id="viewport"></div>

26
apps/spreadsheeteditor/main/app/view/ChartSettings.js
View file

@ -151,7 +151,7 @@ define([
value = props.asc_getSeveralChartTypes();
if (this._state.SeveralCharts && value) {
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this._state.ChartType = null;
} else {
var type = this.chartProps.getType();
@ -159,9 +159,9 @@ define([
var record = this.mnuChartTypePicker.store.findWhere({type: type});
this.mnuChartTypePicker.selectRecord(record, true);
if (record) {
this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
} else
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this.updateChartStyles(this.api.asc_getChartPreviews(type));
this._state.ChartType = type;
}
@ -226,9 +226,9 @@ define([
var record = this.mnuSparkTypePicker.store.findWhere({type: type});
this.mnuSparkTypePicker.selectRecord(record, true);
if (record) {
this.btnSparkType.setIconCls('item-chartlist ' + record.get('iconCls'));
this.btnSparkType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
} else
this.btnSparkType.setIconCls('');
this.btnSparkType.setIconCls('svgicon');
this._state.SparkType = type;
styleChanged = true;
}
@ -601,9 +601,9 @@ define([
// charts
this.btnChartType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-chartlist bar-normal',
iconCls : 'svgicon chart-bar-normal',
menu : new Common.UI.Menu({
style: 'width: 435px; padding-top: 12px;',
style: 'width: 364px; padding-top: 12px;',
items: [
{ template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
@ -617,7 +617,7 @@ define([
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnChartType.render($('#chart-button-type'));
@ -677,9 +677,9 @@ define([
// sparks
this.btnSparkType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-chartlist spark-column',
iconCls : 'svgicon chart-spark-column',
menu : new Common.UI.Menu({
style: 'width: 200px; padding-top: 12px;',
style: 'width: 167px; padding-top: 12px;',
items: [
{ template: _.template('<div id="id-spark-menu-type" class="menu-insertchart" style="margin: 5px 5px 0 10px;"></div>') }
]
@ -693,7 +693,7 @@ define([
allowScrollbar: false,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getSparkGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getSparkData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnSparkType.render($('#spark-button-type'));
@ -913,7 +913,7 @@ define([
rawData = record;
}
this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls);
this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this._state.ChartType = -1;
if (this.api && !this._noApply && this.chartProps) {
@ -1062,7 +1062,7 @@ define([
rawData = record;
}
this.btnSparkType.setIconCls('item-chartlist ' + rawData.iconCls);
this.btnSparkType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this._state.SparkType = -1;
if (this.api && !this._noApply && this._originalProps) {

24
apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
View file

@ -115,9 +115,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.btnChartType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-chartlist bar-normal',
iconCls : 'svgicon chart-bar-normal',
menu : new Common.UI.Menu({
style: 'width: 435px; padding-top: 12px;',
style: 'width: 364px; padding-top: 12px;',
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="id-chart-dlg-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
@ -131,7 +131,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnChartType.render($('#chart-dlg-button-type'));
@ -734,9 +734,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
// Sparklines
this.btnSparkType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'item-chartlist spark-column',
iconCls : 'svgicon chart-spark-column',
menu : new Common.UI.Menu({
style: 'width: 200px; padding-top: 12px;',
style: 'width: 167px; padding-top: 12px;',
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="id-spark-dlg-menu-type" class="menu-insertchart" style="margin: 5px 5px 0 10px;"></div>') }
@ -750,7 +750,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
restoreHeight: 120,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getSparkGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getSparkData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnSparkType.render($('#spark-dlg-button-type'));
@ -1016,7 +1016,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
rawData = record;
}
this.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls);
this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this.chartSettings.changeType(rawData.type);
this.updateAxisProps(rawData.type, true);
this.vertAxisProps = this.chartSettings.getVertAxisProps();
@ -1240,7 +1240,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
rawData = record;
}
this.btnSparkType.setIconCls('item-chartlist ' + rawData.iconCls);
this.btnSparkType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
if (this._changedProps) {
this._changedProps.asc_setType(rawData.type);
}
@ -1286,9 +1286,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
var record = this.mnuChartTypePicker.store.findWhere({type: this._state.ChartType});
this.mnuChartTypePicker.selectRecord(record, true);
if (record) {
this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
} else
this.btnChartType.setIconCls('');
this.btnChartType.setIconCls('svgicon');
this._noApply = false;
@ -1357,9 +1357,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
var record = this.mnuSparkTypePicker.store.findWhere({type: this._state.SparkType});
this.mnuSparkTypePicker.selectRecord(record, true);
if (record)
this.btnSparkType.setIconCls('item-chartlist ' + record.get('iconCls'));
this.btnSparkType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
else
this.btnSparkType.setIconCls('');
this.btnSparkType.setIconCls('svgicon');
this.updateSparkStyles((this.sparklineStyles) ? this.sparklineStyles : props.asc_getStyles());

4
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -1815,7 +1815,7 @@ define([
if ( this.btnInsertChart ) {
this.btnInsertChart.setMenu(new Common.UI.Menu({
style: 'width: 435px;',
style: 'width: 364px;',
items: [
{ template: _.template('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
@ -1829,7 +1829,7 @@ define([
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData(true)/*.concat(Common.define.chartData.getSparkGroupData(true))*/),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()/*.concat(Common.define.chartData.getSparkData())*/),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
picker.on('item:click', function (picker, item, record, e) {
if (record)

1
apps/spreadsheeteditor/main/index.html
View file

@ -308,6 +308,7 @@
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/csv.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/spreadsheeteditor/main/index.html.deploy
View file

@ -351,6 +351,7 @@
<inline src="resources/img/doc-formats/csv.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<script data-main="app" src="../../../vendor/requirejs/require.js"></script>
</body>

1
apps/spreadsheeteditor/main/index_loader.html
View file

@ -261,6 +261,7 @@
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/csv.svg">
<img class="inline-svg" src="../../common/main/resources/img/doc-formats/blank.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/spreadsheeteditor/main/index_loader.html.deploy
View file

@ -312,6 +312,7 @@
<inline src="resources/img/doc-formats/csv.svg" />
<inline src="resources/img/doc-formats/blank.svg" />
<inline src="resources/img/toolbar/shapetypes.svg" />
<inline src="resources/img/toolbar/charttypes.svg" />
<div id="viewport"></div>