UX: replace FA5 compress/expand icons

Adds a new SVG sprite file that contains non-FontAwesome 5 icons to our subset.

Adds the FontAwesome 4.7.0 icons for expand / collapse.
This commit is contained in:
Penar Musaraj 2018-12-03 22:29:20 -05:00
parent 4831c4c2ee
commit 56948896ff
5 changed files with 24 additions and 6 deletions

View File

@ -154,7 +154,7 @@ export default Ember.Controller.extend({
@computed("maximized")
maximizeIcon(maximized) {
return maximized ? "compress" : "expand";
return maximized ? "discourse-compress" : "discourse-expand";
},
@computed("model.isSaving")

View File

@ -26,6 +26,8 @@ export default Ember.Component.extend({
@computed("composeState")
fullscreenIcon(composeState) {
return composeState === "fullscreen" ? "compress" : "expand";
return composeState === "fullscreen"
? "discourse-compress"
: "discourse-expand";
}
});

View File

@ -60,8 +60,9 @@
right: 7px;
&:before {
// ideally, the SVG used here should be in HTML and reference the SVG sprite
// the SVG used here is the "expand" icon from FontAwesome 4.7.0
content: svg-uri(
'<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 512 512" fill="#{$secondary}"> <path d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"/></svg>'
'<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 1792 1792" fill="#{$secondary}"><path d="M883 1056q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23zm781-864v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45z"/></svg>'
);
opacity: 0.8;
}

View File

@ -50,6 +50,8 @@ module SvgSprite
"crosshairs",
"cube",
"desktop",
"discourse-compress",
"discourse-expand",
"download",
"ellipsis-h",
"ellipsis-v",
@ -59,7 +61,6 @@ module SvgSprite
"exclamation-circle",
"exclamation-triangle",
"external-link-alt",
"expand",
"fab-apple",
"fab-discourse",
"fab-facebook-f",
@ -223,7 +224,7 @@ Discourse SVG subset of #{fa_license}
<svg xmlns='http://www.w3.org/2000/svg' style='display: none;'>
""".dup
Dir["#{Rails.root}/vendor/assets/svg-icons/fontawesome/*.svg"].each do |fname|
Dir["#{Rails.root}/vendor/assets/svg-icons/**/*.svg"].each do |fname|
svg_file = Nokogiri::XML(File.open(fname)) do |config|
config.options = Nokogiri::XML::ParseOptions::NOBLANKS
end
@ -247,7 +248,7 @@ Discourse SVG subset of #{fa_license}
def self.search(searched_icon)
searched_icon = process(searched_icon.dup)
Dir["#{Rails.root}/vendor/assets/svg-icons/fontawesome/*.svg"].each do |fname|
Dir["#{Rails.root}/vendor/assets/svg-icons/**/*.svg"].each do |fname|
svg_file = Nokogiri::XML(File.open(fname))
svg_filename = "#{File.basename(fname, ".svg")}"

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Additional SVG icons
-->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<!-- "compress" icon from https://github.com/encharm/Font-Awesome-SVG-PNG -->
<symbol id="discourse-compress" viewBox="0 0 1792 1792">
<path d="M896 960v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45zm755-672q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23z"></path>
</symbol>
<!-- "expand" icon from https://github.com/encharm/Font-Awesome-SVG-PNG -->
<symbol id="discourse-expand" viewBox="0 0 1792 1792">
<path d="M883 1056q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23zm781-864v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45z"></path>
</symbol>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB