From cc4f755a6c9cf996442f9c5356f6f0fbdcf41a8f Mon Sep 17 00:00:00 2001 From: Artur Signell Date: Wed, 16 Sep 2015 13:52:43 +0300 Subject: Create a Valo icon font for icons used in Valo (#18472) Valo uses only a handful of icons from Font Awesome. This change introduces a separate icon font for valo (9KB instead of 80KB) and decouples Valo from Font Awesome to enable updating Font Awesome without taking Valo into account. This change also makes it easy to not load Font Awesome when using Valo by setting $v-font-awesome:false For backwards compatibility, Font Awesome is loaded by default Change-Id: Ib01e3cf34e2468c885fcb8c7859cd1d1af4491aa --- .../tests-valo-no-font-awesome/_variables.scss | 3 ++ .../themes/tests-valo-no-font-awesome/styles.scss | 6 +++ .../VAADIN/themes/valo/components/_checkbox.scss | 2 +- .../themes/valo/components/_colorpicker.scss | 4 +- .../VAADIN/themes/valo/components/_combobox.scss | 4 +- .../VAADIN/themes/valo/components/_datefield.scss | 10 ++--- .../VAADIN/themes/valo/components/_label.scss | 2 +- .../VAADIN/themes/valo/components/_menubar.scss | 6 +-- .../themes/valo/components/_notification.scss | 2 +- .../themes/valo/components/_richtextarea.scss | 10 ++--- .../VAADIN/themes/valo/components/_table.scss | 8 ++-- .../VAADIN/themes/valo/components/_tabsheet.scss | 4 +- .../VAADIN/themes/valo/components/_tree.scss | 4 +- .../themes/valo/components/_twincolselect.scss | 4 +- WebContent/VAADIN/themes/valo/fonts/_fonts.scss | 8 +++- .../valo/fonts/valoicons/valoicons-webfont.eot | Bin 0 -> 12610 bytes .../valo/fonts/valoicons/valoicons-webfont.svg | 46 +++++++++++++++++++++ .../valo/fonts/valoicons/valoicons-webfont.ttf | Bin 0 -> 12492 bytes .../valo/fonts/valoicons/valoicons-webfont.woff | Bin 0 -> 7856 bytes .../valo/fonts/valoicons/valoicons-webfont.woff2 | Bin 0 -> 6400 bytes 20 files changed, 91 insertions(+), 32 deletions(-) create mode 100644 WebContent/VAADIN/themes/tests-valo-no-font-awesome/_variables.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-no-font-awesome/styles.scss create mode 100644 WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.eot create mode 100644 WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.svg create mode 100644 WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.ttf create mode 100644 WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff create mode 100644 WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff2 (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/tests-valo-no-font-awesome/_variables.scss b/WebContent/VAADIN/themes/tests-valo-no-font-awesome/_variables.scss new file mode 100644 index 0000000000..59b31a4a68 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-no-font-awesome/_variables.scss @@ -0,0 +1,3 @@ +$v-font-awesome: false; + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo-no-font-awesome/styles.scss b/WebContent/VAADIN/themes/tests-valo-no-font-awesome/styles.scss new file mode 100644 index 0000000000..d66db2b0d6 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-no-font-awesome/styles.scss @@ -0,0 +1,6 @@ +@import "variables"; +@import "../tests-valo/valotest"; + +.tests-valo-no-font-awesome { + @include valotest; +} diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss index 1be12d3533..690aa57f36 100644 --- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -35,7 +35,7 @@ */ @mixin valo-checkbox-icon-style { content: "\f00c"; - font-family: FontAwesome; + font-family: ValoIcons; } diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss index 18f92500dc..fe365aa6ff 100644 --- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss +++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss @@ -160,8 +160,8 @@ outline: none; &:before { - font-family: FontAwesome; - content: "\F141"; + font-family: ValoIcons; + content: "\f141"; } } diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index ace3dbb4bb..a200641a0d 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -334,7 +334,7 @@ * @group combobox */ @mixin valo-combobox-button-icon-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f078"; } @@ -420,7 +420,7 @@ height: ceil($v-unit-size/1.5); line-height: ceil($v-unit-size/1.5); text-align: center; - font-family: FontAwesome; + font-family: ValoIcons; @include transform( scale(.8) ); color: valo-font-color($v-background-color); diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss index 52a4acf821..f27bc9073a 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -266,7 +266,7 @@ * @group datefield */ @mixin valo-datefield-button-icon-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f073"; } @@ -570,7 +570,7 @@ * @group datefield */ @mixin valo-datefield-calendarpanel-nextmonth-icon-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f105"; } @@ -581,7 +581,7 @@ * @group datefield */ @mixin valo-datefield-calendarpanel-prevmonth-icon-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f104"; } @@ -592,7 +592,7 @@ * @group datefield */ @mixin valo-datefield-calendarpanel-nextyear-icon-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f101"; } @@ -603,7 +603,7 @@ * @group datefield */ @mixin valo-datefield-calendarpanel-prevyear-icon-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f100"; } diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index 3057aaa40f..f94fc1ff9f 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -259,7 +259,7 @@ $v-letter-spacing--h4: 0 !default; font-size: round($v-font-size * 0.95); &:before { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f00c"; margin-right: .5em; margin-left: round($v-unit-size/-2); diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss index 0f9c61d2ce..e1350ff9e7 100644 --- a/WebContent/VAADIN/themes/valo/components/_menubar.scss +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -54,7 +54,7 @@ display: none; + .#{$primary-stylename}-menuitem-caption:after { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f078"; font-size: 0.7em; vertical-align: .15em; @@ -285,7 +285,7 @@ * @group menubar */ @mixin valo-menubar-submenu-indicator-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f054"; line-height: $v-selection-item-height + 2px; } @@ -298,7 +298,7 @@ */ @mixin valo-menubar-checked-icon-style { content: "\f00c"; - font-family: FontAwesome; + font-family: ValoIcons; } diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss index 9538ebdc29..cf288cca25 100644 --- a/WebContent/VAADIN/themes/valo/components/_notification.scss +++ b/WebContent/VAADIN/themes/valo/components/_notification.scss @@ -185,7 +185,7 @@ $v-notification-title-color: $v-focus-color !default; font-weight: $v-font-weight + 100; &:before { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f00c"; margin-right: .5em; } diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss index 0dc3ee274c..ca731e6373 100644 --- a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss @@ -2,7 +2,7 @@ * * @group richtextarea */ -$valo-richtextarea-use-font-awesome: true !default; +$valo-richtextarea-use-valo-icons: true !default; /** * @@ -45,9 +45,9 @@ $valo-richtextarea-use-font-awesome: true !default; @include valo-gradient($color: darken($v-background-color, 10%), $gradient: $grad, $direction: to top); } - @if $valo-richtextarea-use-font-awesome { + @if $valo-richtextarea-use-valo-icons { - // List of title attribute values and Font Awesome icons for the formatting buttons + // List of title attribute values and Valo Icons for the formatting buttons $icons: "Toggle Bold" "\f032", "Toggle Italic" "\f033", "Toggle Underline" "\f0cd", @@ -73,7 +73,7 @@ $valo-richtextarea-use-font-awesome: true !default; } div:before { - font-family: FontAwesome; + font-family: ValoIcons; } @each $pair in $icons { @@ -84,7 +84,7 @@ $valo-richtextarea-use-font-awesome: true !default; } } } - } // Use FontAwesome + } // Use ValoIcons .#{$primary-stylename} .gwt-RichTextToolbar-bottom { font-size: round($v-font-size * 0.8); diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index 671506ed6e..f7e17483d8 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -599,7 +599,7 @@ $v-table-background-color: null !default; */ @mixin valo-table-sort-asc-icon-style { content: '\f0de'; - font-family: FontAwesome; + font-family: ValoIcons; } /** @@ -610,7 +610,7 @@ $v-table-background-color: null !default; */ @mixin valo-table-sort-desc-icon-style { content: '\f0dd'; - font-family: FontAwesome; + font-family: ValoIcons; } /** @@ -620,7 +620,7 @@ $v-table-background-color: null !default; * @group table */ @mixin valo-table-column-selector-icon-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f013"; } @@ -632,7 +632,7 @@ $v-table-background-color: null !default; */ @mixin valo-table-column-visible-icon-style { content: "\f00c"; - font-family: FontAwesome; + font-family: ValoIcons; } diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss index bb3e55042a..be6796db97 100644 --- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss +++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss @@ -378,7 +378,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; * @group tabsheet */ @mixin valo-tabsheet-scroller-prev-icon-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f053"; } @@ -389,7 +389,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; * @group tabsheet */ @mixin valo-tabsheet-scroller-next-icon-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f054"; } diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss index db8b3ba795..f8c46ac08f 100644 --- a/WebContent/VAADIN/themes/valo/components/_tree.scss +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -290,7 +290,7 @@ $v-tree-expand-animation-enabled: false !default; */ @mixin valo-tree-collapsed-icon-style { content: "\f0da"; - font-family: FontAwesome; + font-family: ValoIcons; } /** @@ -303,6 +303,6 @@ $v-tree-expand-animation-enabled: false !default; @mixin valo-tree-expanded-icon-style ($force: false) { @if $v-tree-animations-enabled == false or $force { content: "\f0d7"; - font-family: FontAwesome; + font-family: ValoIcons; } } diff --git a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss index 11a81159c0..b9b9bcd06d 100644 --- a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss +++ b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss @@ -89,7 +89,7 @@ * @group twin-column-select */ @mixin valo-twincolselect-add-icon-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f054"; } @@ -100,6 +100,6 @@ * @group twin-column-select */ @mixin valo-twincolselect-remove-icon-style { - font-family: FontAwesome; + font-family: ValoIcons; content: "\f053"; } diff --git a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss index 8f0a129335..e330612e92 100644 --- a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss +++ b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss @@ -5,6 +5,7 @@ @import "lato/lato"; @import "lora/lora"; +$v-font-awesome: true !default; $fontawesome-pathPrefix: null; @@ -13,8 +14,11 @@ $fontawesome-pathPrefix: null; } @mixin valo-fonts { - // Font Awesome icons from the Base theme - @include v-font(FontAwesome, "#{$fontawesome-pathPrefix}../base/fonts/fontawesome-webfont"); + // Valo Icons + @include v-font(ValoIcons, "#{$fontawesome-pathPrefix}../valo/fonts/valoicons/valoicons-webfont"); + @if $v-font-awesome { + @include v-font(FontAwesome, "#{$fontawesome-pathPrefix}../base/fonts/fontawesome-webfont"); + } } diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.eot new file mode 100644 index 0000000000..7b95e11d7b Binary files /dev/null and b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.eot differ diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.svg b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.svg new file mode 100644 index 0000000000..c975dce73b --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.ttf new file mode 100644 index 0000000000..1bf68bf55b Binary files /dev/null and b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.ttf differ diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff new file mode 100644 index 0000000000..7c7dda4ed4 Binary files /dev/null and b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff differ diff --git a/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff2 b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff2 new file mode 100644 index 0000000000..f9f5f5031d Binary files /dev/null and b/WebContent/VAADIN/themes/valo/fonts/valoicons/valoicons-webfont.woff2 differ -- cgit v1.2.3