From ca32ac89b6e6568aa70a427a2bf8b85a00e622cf Mon Sep 17 00:00:00 2001 From: Prateek Saxena Date: Tue, 14 Oct 2014 09:16:44 +0530 Subject: Add a subset of FontAwesome icons using Fontello Most of the code here has been taken from @LaKing's #2554. Only icons required for etherpad have been added. Here is a list of the code points that are being used: 0xe800 0xe801 0xe802 0xe803 0xe804 0xe805 0xe806 0xe807 0xe808 0xe809 0xe80a 0xe80b 0xe80c 0xe80d 0xe80e 0xe80f 0xe810 0xe811 0xe812 0xe813 0xe814 0xe815 0xe816 0xe817 Their related icon names can be seen in: /src/static/css/fontawesome-etherpad.css Even though this patch *adds* all the required icons it only uses them in the in toolbar. The switch to using only FontAwesome icons and the removal of old PNG files will only happen after the timeslider interface has been updated. This is the first step for #2253 --- src/static/css/fontawesome-etherpad.css | 76 +++++++++++++++++++++++++ src/static/css/pad.css | 90 ++++++++++++++++-------------- src/static/font/fontawesome-etherpad.eot | Bin 0 -> 10200 bytes src/static/font/fontawesome-etherpad.svg | 35 ++++++++++++ src/static/font/fontawesome-etherpad.ttf | Bin 0 -> 9984 bytes src/static/font/fontawesome-etherpad.woff | Bin 0 -> 6188 bytes src/templates/pad.html | 1 + 7 files changed, 159 insertions(+), 43 deletions(-) create mode 100644 src/static/css/fontawesome-etherpad.css create mode 100644 src/static/font/fontawesome-etherpad.eot create mode 100644 src/static/font/fontawesome-etherpad.svg create mode 100644 src/static/font/fontawesome-etherpad.ttf create mode 100644 src/static/font/fontawesome-etherpad.woff diff --git a/src/static/css/fontawesome-etherpad.css b/src/static/css/fontawesome-etherpad.css new file mode 100644 index 00000000..13f28f2b --- /dev/null +++ b/src/static/css/fontawesome-etherpad.css @@ -0,0 +1,76 @@ +@font-face { + font-family: 'fontawesome-etherpad'; + src: url('../font/fontawesome-etherpad.eot?81419457'); + src: url('../font/fontawesome-etherpad.eot?81419457#iefix') format('embedded-opentype'), + url('../font/fontawesome-etherpad.woff?81419457') format('woff'), + url('../font/fontawesome-etherpad.ttf?81419457') format('truetype'), + url('../font/fontawesome-etherpad.svg?81419457#fontawesome-etherpad') format('svg'); + font-weight: normal; + font-style: normal; +} +/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ +/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ +/* +@media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: 'fontawesome-etherpad'; + src: url('../font/fontawesome-etherpad.svg?81419457#fontawesome-etherpad') format('svg'); + } +} +*/ + + [class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "fontawesome-etherpad"; + font-style: normal; + font-weight: normal; + speak: none; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + /* opacity: .8; */ + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: .2em; + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} + +.icon-users:before { content: '\e800'; } /* '' */ +.icon-star:before { content: '\e801'; } /* '' */ +.icon-cog:before { content: '\e802'; } /* '' */ +.icon-bold:before { content: '\e803'; } /* '' */ +.icon-italic:before { content: '\e804'; } /* '' */ +.icon-indent-left:before { content: '\e805'; } /* '' */ +.icon-indent-right:before { content: '\e806'; } /* '' */ +.icon-list-bullet:before { content: '\e807'; } /* '' */ +.icon-list-numbered:before { content: '\e808'; } /* '' */ +.icon-strike:before { content: '\e809'; } /* '' */ +.icon-underline:before { content: '\e80a'; } /* '' */ +.icon-cw:before { content: '\e80b'; } /* '' */ +.icon-ccw:before { content: '\e80c'; } /* '' */ +.icon-clock:before { content: '\e80d'; } /* '' */ +.icon-eye-off:before { content: '\e80e'; } /* '' */ +.icon-eye:before { content: '\e80f'; } /* '' */ +.icon-play:before { content: '\e810'; } /* '' */ +.icon-fast-bw:before { content: '\e811'; } /* '' */ +.icon-fast-fw:before { content: '\e812'; } /* '' */ +.icon-pause:before { content: '\e813'; } /* '' */ +.icon-glass:before { content: '\e814'; } /* '' */ +.icon-code:before { content: '\e815'; } /* '' */ +.icon-exchange:before { content: '\e816'; } /* '' */ +.icon-chat:before { content: '\e817'; } /* '' */ \ No newline at end of file diff --git a/src/static/css/pad.css b/src/static/css/pad.css index 309eb833..599b9fd4 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -669,64 +669,68 @@ table#otheruserstable { .buttonicon { width: 16px; height: 16px; - background-image: url('../../static/img/etherpad_lite_icons.png'); - background-repeat: no-repeat; display: inline-block; vertical-align: middle; + + font-family: "fontawesome-etherpad"; + font-size: 15px; + font-style: normal; + font-weight: normal; + color: #666; } -.buttonicon-bold { - background-position: 0px -116px +.buttonicon-bold:before { + content: "\e803"; } -.buttonicon-italic { - background-position: 0px 0px +.buttonicon-italic:before { + content: "\e804"; } -.buttonicon-underline { - background-position: 0px -236px +.buttonicon-underline:before { + content: "\e80a"; } -.buttonicon-strikethrough { - background-position: 0px -200px +.buttonicon-strikethrough:before { + content: "\e809"; } -.buttonicon-insertorderedlist { - background-position: 0px -477px +.buttonicon-insertorderedlist:before { + content: "\e808"; } -.buttonicon-insertunorderedlist { - background-position: 0px -34px +.buttonicon-insertunorderedlist:before { + content: "\e807"; } -.buttonicon-indent { - background-position: 0px -52px +.buttonicon-indent:before { + content: "\e806"; } -.buttonicon-outdent { - background-position: 0px -134px +.buttonicon-outdent:before { + content: "\e805"; } -.buttonicon-undo { - background-position: 0px -255px +.buttonicon-undo:before { + content: "\e80c"; } -.buttonicon-redo { - background-position: 0px -166px +.buttonicon-redo:before { + content: "\e80b"; } -.buttonicon-clearauthorship { - background-position: 0px -86px +.buttonicon-clearauthorship:before { + content: "\e80e"; } -.buttonicon-settings { - background-position: 0px -436px +.buttonicon-settings:before { + content: "\e802"; } -.buttonicon-import_export { - background-position: 0px -68px +.buttonicon-import_export:before { + content: "\e816"; } -.buttonicon-embed { - background-position: 0px -18px +.buttonicon-embed:before { + content: "\e815"; } -.buttonicon-history { - background-position: 0px -218px +.buttonicon-history:before { + content: "\e80d"; } -.buttonicon-chat { - background-position: 0px -102px; +.buttonicon-chat:before { + content: "\e817"; } -.buttonicon-showusers { - background-position: 0px -183px; +.buttonicon-showusers:before { + content: "\e800"; } -.buttonicon-savedRevision { - background-position: 0px -493px +.buttonicon-savedRevision:before { + content: "\e801"; } #focusprotector { z-index: 100; @@ -838,7 +842,7 @@ input[type=checkbox] { border-left: 1px solid #ccc !important; width: 185px !important; } -@media screen and (max-width: 600px) { +@media screen and (max-width: 600px) { .toolbar ul li.separator { display: none; } @@ -856,7 +860,7 @@ input[type=checkbox] { left:0px; right:0px; color:#000; - } + } .gritter-close { display:block !important; left: auto !important; @@ -884,13 +888,13 @@ input[type=checkbox] { .gritter-item-wrapper > div{ background: none; } - #editorcontainer { + #editorcontainer { top: 68px; } - #editbar { + #editbar { height: 62px; } - .toolbar ul.menu_right { + .toolbar ul.menu_right { float: left; margin-top:2px; } diff --git a/src/static/font/fontawesome-etherpad.eot b/src/static/font/fontawesome-etherpad.eot new file mode 100644 index 00000000..9a24fc67 Binary files /dev/null and b/src/static/font/fontawesome-etherpad.eot differ diff --git a/src/static/font/fontawesome-etherpad.svg b/src/static/font/fontawesome-etherpad.svg new file mode 100644 index 00000000..ba49c31c --- /dev/null +++ b/src/static/font/fontawesome-etherpad.svg @@ -0,0 +1,35 @@ + + + +Copyright (C) 2014 by original authors @ fontello.com + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/static/font/fontawesome-etherpad.ttf b/src/static/font/fontawesome-etherpad.ttf new file mode 100644 index 00000000..a179bd19 Binary files /dev/null and b/src/static/font/fontawesome-etherpad.ttf differ diff --git a/src/static/font/fontawesome-etherpad.woff b/src/static/font/fontawesome-etherpad.woff new file mode 100644 index 00000000..1015d8e2 Binary files /dev/null and b/src/static/font/fontawesome-etherpad.woff differ diff --git a/src/templates/pad.html b/src/templates/pad.html index a4366bd5..15fd45e2 100644 --- a/src/templates/pad.html +++ b/src/templates/pad.html @@ -40,6 +40,7 @@ <% e.begin_block("styles"); %> + -- cgit v1.2.3