From e8176931690c619bc978b45cc4b3243840d40095 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Fri, 25 Sep 2015 14:59:03 -0400 Subject: [PATCH] added pluggable auth icons --- .../assets/fontcustom/fontcustom-preview.html | 233 ++++++++++++++++++ .../client/assets/fontcustom/fontcustom.css | 43 ++++ ...ustom_037607f2fd8b86abb9de4b13a05fde60.eot | Bin 0 -> 2194 bytes ...ustom_037607f2fd8b86abb9de4b13a05fde60.svg | 47 ++++ ...ustom_037607f2fd8b86abb9de4b13a05fde60.ttf | Bin 0 -> 2008 bytes ...stom_037607f2fd8b86abb9de4b13a05fde60.woff | Bin 0 -> 1436 bytes .../new_icons/.fontcustom-manifest.json | 54 ++++ .../fontcustom/new_icons/fontcustom.yml | 96 ++++++++ .../assets/fontcustom/new_icons/google.svg | 17 ++ .../assets/fontcustom/new_icons/saml-02.svg | 15 ++ .../src/login/thirdPartySignOn.block.less | 6 +- .../src/login/thirdPartySignOn.directive.js | 10 +- awx/ui/templates/ui/index.html | 1 + 13 files changed, 516 insertions(+), 6 deletions(-) create mode 100644 awx/ui/client/assets/fontcustom/fontcustom-preview.html create mode 100644 awx/ui/client/assets/fontcustom/fontcustom.css create mode 100644 awx/ui/client/assets/fontcustom/fontcustom_037607f2fd8b86abb9de4b13a05fde60.eot create mode 100644 awx/ui/client/assets/fontcustom/fontcustom_037607f2fd8b86abb9de4b13a05fde60.svg create mode 100644 awx/ui/client/assets/fontcustom/fontcustom_037607f2fd8b86abb9de4b13a05fde60.ttf create mode 100644 awx/ui/client/assets/fontcustom/fontcustom_037607f2fd8b86abb9de4b13a05fde60.woff create mode 100644 awx/ui/client/assets/fontcustom/new_icons/.fontcustom-manifest.json create mode 100644 awx/ui/client/assets/fontcustom/new_icons/fontcustom.yml create mode 100644 awx/ui/client/assets/fontcustom/new_icons/google.svg create mode 100644 awx/ui/client/assets/fontcustom/new_icons/saml-02.svg diff --git a/awx/ui/client/assets/fontcustom/fontcustom-preview.html b/awx/ui/client/assets/fontcustom/fontcustom-preview.html new file mode 100644 index 0000000000..385f401107 --- /dev/null +++ b/awx/ui/client/assets/fontcustom/fontcustom-preview.html @@ -0,0 +1,233 @@ + + + + fontcustom glyphs preview + + + + + + + + + +
+
+

fontcustom contains 2 glyphs:

+ Toggle Preview Characters +
+ + +
+
+ PpPpPpPpPpPpPpPpPpPp +
+
+ 12141618212436486072 +
+
+ + +
+
+ +
+
+ PpPpPpPpPpPpPpPpPpPp +
+
+ 12141618212436486072 +
+
+ + +
+
+ + + +
+ + diff --git a/awx/ui/client/assets/fontcustom/fontcustom.css b/awx/ui/client/assets/fontcustom/fontcustom.css new file mode 100644 index 0000000000..1fead6332d --- /dev/null +++ b/awx/ui/client/assets/fontcustom/fontcustom.css @@ -0,0 +1,43 @@ +/* + Icon Font: fontcustom +*/ + +@font-face { + font-family: "fontcustom"; + src: url("./fontcustom_037607f2fd8b86abb9de4b13a05fde60.eot"); + src: url("./fontcustom_037607f2fd8b86abb9de4b13a05fde60.eot?#iefix") format("embedded-opentype"), + url("./fontcustom_037607f2fd8b86abb9de4b13a05fde60.woff") format("woff"), + url("./fontcustom_037607f2fd8b86abb9de4b13a05fde60.ttf") format("truetype"), + url("./fontcustom_037607f2fd8b86abb9de4b13a05fde60.svg#fontcustom") format("svg"); + font-weight: normal; + font-style: normal; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: "fontcustom"; + src: url("./fontcustom_037607f2fd8b86abb9de4b13a05fde60.svg#fontcustom") format("svg"); + } +} + +[data-icon]:before { content: attr(data-icon); } + +[data-icon]:before, +.icon-google:before, +.icon-saml-02:before { + display: inline-block; + font-family: "fontcustom"; + font-style: normal; + font-weight: normal; + font-variant: normal; + line-height: 1; + text-decoration: inherit; + text-rendering: optimizeLegibility; + text-transform: none; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; +} + +.icon-google:before { content: "\f100"; } +.icon-saml-02:before { content: "\f101"; } diff --git a/awx/ui/client/assets/fontcustom/fontcustom_037607f2fd8b86abb9de4b13a05fde60.eot b/awx/ui/client/assets/fontcustom/fontcustom_037607f2fd8b86abb9de4b13a05fde60.eot new file mode 100644 index 0000000000000000000000000000000000000000..2bdff030a74a071579052ebbb3736356feca6128 GIT binary patch literal 2194 zcmds2U1%It6h3!nXYTCmB-zRSCEM+Gl5Ka}G}%sOv%78F)@tLnl!m6&RuMs$?fyZM z4ar6u5D^jdMJPVR3W5beL`7)uL5X0V#D{`b`rt!f#5bX!5A~_-`rX;d4_dL$p39x{ zd(S=h+%xyQs}lXpi5PiEfQMwsAt1TJ1a)S{K}3PBT-bKu{>u7|P1!aMQH@$OPi?Bu zGA#kOXb$RLI!{%qLpDogT7<-;i;yhBrs=FO$-)??jDs!ciT=$SR3eNXdYvSiDV3g? zUcUNHiHLs#Y5eTdhwQU|zVJ1So&*0Kp z_{eOlQfAMK03{Qj-nsJS1)8Qepg#=WoG;H+Kc4;}MI;yDzp&6+Y9I4_(8T_2=#M#P z!}1&JEB9aQE8Zo4_jZ0dcySi?3t8nd^)W71y|z?%3BA`F3$l@_?l4k`T*6 zyv7xFuegRZ-m$Yr)<|cKr1ADEwHmwd;4_0|;SE*dRv{;o4$>seKpIkpQxkbx&KL60 zNVM0(dnKMqr?`TV;>TDaRY;}5MDw|91hR~j&KGzj8Y$!p874Gon5TOgk9cVH*6Ql5 z2c4m*V$qCAiXurqu1Q8D7TXgw)O1KoYq}mv`(=HdeWLdCn7pqipd^%=iR7p?vPVn# zjA%3%>EEsU(poec;KjiAY+e> zCS+aHv^sz?oCYVXlNj zVB8T7Dam12g(F!zpPO(`D+ed`>6$F-dL$U^PYmuJjKwF1hBVCx3@3G6QFg_`vDm)M z)nW zW8$rCIt{3S1~ZF6Ct3?Di_LnYZSJoeFl}o*H)@`4HRjFfX1mg;&cfuOZL8LrZ&#L= z+AXxOzxA*4)%x;m8I7#ubg#C97ZG692}^V_6F-FcP{&=3O*tB)Bbb}Vpb|DLwHE7D z)6Q7tq`4gc7&|w1WK0DA2+{s$Z@pMuTxz!FP0Je3Se9izg3ry@6dh&|_xn!}?~Hh% jCFWrgU!HH4#x2Xm + + + + +Created by FontForge 20150401 at Fri Sep 25 14:52:01 2015 + By John Mitchell +Copyright (c) 2015, John Mitchell + + + + + + + + + + diff --git a/awx/ui/client/assets/fontcustom/fontcustom_037607f2fd8b86abb9de4b13a05fde60.ttf b/awx/ui/client/assets/fontcustom/fontcustom_037607f2fd8b86abb9de4b13a05fde60.ttf new file mode 100644 index 0000000000000000000000000000000000000000..edfa1ff528fe004829b6c952cb6fe7f5a2604048 GIT binary patch literal 2008 zcmds2UuauZ82?Ug?mag*w{33ow^^FrHe0fFZI<3N$yT#jUCqi^SvTDj5j14^2W=AC zL{|_I5%fjaQ=K3v3`A6f79W%f_DOsYw6e#&h;KqcALi3s{GIf6Ehy--=Wy=#|2x0$ zyXT%ujEMT^b&_bYPkhn1~CA^pa_ zMJ^xYqqXJsP3I&TkiUc+SZbDv?0ErDGV$nNF5Ya>0=)tIX~<@yxLp2d;fFYpoJam# ztGU`f=Xk%4{oAmgBN2-A{npx_FAn7IlN(SlemXgS<$!j#9mKXFtF&kC#jx$}HYN8I zc#2GihuqUBbcN)eS~#+vZkCcgjg#GGw}h2lVijmE*z`UP(VIX^GWui>=Go^!7b{QQ z!22+NXL}fcZ5Hao2uw&@qE8r~V0|a@JsKjfSP?sB4w8tDkduysDxeGj*a2^gK&jj9 z{xTr6_F&4vhD@YBl)mQz&ja}TQU5#IJKHpF&(B0x&j*4F-b!4&E>Ecp}af%s4;Ca`9X|0U?;pqyx|;r9?Kz1HnKpn@cib zNx(hP&v?K=>vz}J?>_8~&gJuFSW*;8a&b*E0^#sT&`=XTEurbUFX5K;E%ve6*Jtv9 zK93SrcA~L~)cA-NcNxK;H!wJ?yAs+U8yD%;H)lisfIB29+~IU_m(#;lg$D;i(OW#K zjvXC{`a@^kp`!1n>Zi{ieKn&rXY-6Sde!C~I3@4eyhL%@wRtCLY~1E$@~~%ZUV;8K@x?k_=)#j& zdpsi_RczjYec!Tqi7wFxHt!@KZqhw}nM{_kc?J3!ou?+XXpL5=PF1Q=8)xk}mFNVh zMJbx13{8N)2)`ONz%9VD4UZa?X$h0gH(P5f^=hqc9xt6Rt<+Rz!o1k5HOz&2yHqPL z!KH%eMlY&EtDsF}GH1*K01&Lqt zKqaP0biKT?T5mSYRB9@jN~NIr*ADF8ruf4Q;r;%7h<{9 literal 0 HcmV?d00001 diff --git a/awx/ui/client/assets/fontcustom/fontcustom_037607f2fd8b86abb9de4b13a05fde60.woff b/awx/ui/client/assets/fontcustom/fontcustom_037607f2fd8b86abb9de4b13a05fde60.woff new file mode 100644 index 0000000000000000000000000000000000000000..dc683eb4fa48eef833380156a25a1c5248ba546e GIT binary patch literal 1436 zcmZuxX;4#F6uvKkBuW60fFUFrC?JFi(O4G6h!rA%Mu**`Me=w6 z0dQIBfwkEZ|2ChWTRdL00O|^0j0Qo^(P?>+8-14nfaoFTL!gn<3C&`KC<6c-q#zu| z!tcL!z{I)POz8Ut`Yb-c4hcySWkH>#5^|Cm7zXeusXxh}4uyG*(2~P0AI8b0A_?Sd zsPTdDv&`vUB!^DugE~NmaKld`M!6yz);=K);`E!9{bE#tqF{v6;*A-n z22|2vSu#*Z^eHcKt~oG>L)2h4y$7;PVL4t#d(CCGO&< z7%C=7P$@t>m@*02704b_TL3Zx-2RX&(i;NQ>Poe`d&g3(T5Vv2=S%lU zgoh9;NMTt5ksOVB)84Ke#t_0PBc5!-{3ZFRV7e=0OXvGaGOUq82lBB$ z6qOaAP6QrdUIy}#YEU^6teKsJS|=wRmBL;29{HD$eQie@}uI*Wc%d*CXcqd1|^h0rvB zf8cNr;uv;L!ilApwK~MzI@L1>cEz+vIkCaj?u&y*2z7;pEVaovG1cpvZyO)xQk3?> z!IczszHRJ@%+_xvW`g>z;UD{sgzmCex@n~?85??*+2!0<*C=eBnSC-tOJe-R8q_T> zx!qP%JXyonAGt2qa;db&(1z3>`*RibqiRb$E;Jr+Vp_ci9ljSg%Y1mI|`R;;vpM)kbBaZt*7}vw1V23hq1NNUku`d}rG7RqNY==M|eC z+3v*&AAq&??w$>PRS9nHYrI^0YDqbgz{Cin^V^d}!Rlzy?keJ@k9W{!d6V%*JLE+esB&i=+}4|8Tk zu*j~pL2><~UXjTgZ+Oy6&!!kc?%a_y@^9P@@p32TrU+t-w|9^1;vc9K#Z**XdU#HE zjk0Z%!LQ`^?8vxgz-Pg G0QesiWf&^} literal 0 HcmV?d00001 diff --git a/awx/ui/client/assets/fontcustom/new_icons/.fontcustom-manifest.json b/awx/ui/client/assets/fontcustom/new_icons/.fontcustom-manifest.json new file mode 100644 index 0000000000..3f5b945913 --- /dev/null +++ b/awx/ui/client/assets/fontcustom/new_icons/.fontcustom-manifest.json @@ -0,0 +1,54 @@ +{ + "checksum": { + "previous": "037607f2fd8b86abb9de4b13a05fde6090c547d09c5428dac65a185505077e6a", + "current": "037607f2fd8b86abb9de4b13a05fde6090c547d09c5428dac65a185505077e6a" + }, + "fonts": [ + "..//fontcustom_037607f2fd8b86abb9de4b13a05fde60.ttf", + "..//fontcustom_037607f2fd8b86abb9de4b13a05fde60.svg", + "..//fontcustom_037607f2fd8b86abb9de4b13a05fde60.woff", + "..//fontcustom_037607f2fd8b86abb9de4b13a05fde60.eot" + ], + "glyphs": { + "google": { + "codepoint": 61696, + "source": "./google.svg" + }, + "saml-02": { + "codepoint": 61697, + "source": "./saml-02.svg" + } + }, + "options": { + "autowidth": false, + "config": "fontcustom.yml", + "css_selector": ".icon-{{glyph}}", + "debug": false, + "font_ascent": 448, + "font_descent": 64, + "font_design_size": 16, + "font_em": 512, + "font_name": "fontcustom", + "force": false, + "input": { + "templates": ".", + "vectors": "." + }, + "no_hash": false, + "output": { + "css": "../", + "fonts": "../", + "preview": "../" + }, + "preprocessor_path": null, + "quiet": false, + "templates": [ + "css", + "preview" + ] + }, + "templates": [ + "../fontcustom.css", + "../fontcustom-preview.html" + ] +} \ No newline at end of file diff --git a/awx/ui/client/assets/fontcustom/new_icons/fontcustom.yml b/awx/ui/client/assets/fontcustom/new_icons/fontcustom.yml new file mode 100644 index 0000000000..69a38ba71b --- /dev/null +++ b/awx/ui/client/assets/fontcustom/new_icons/fontcustom.yml @@ -0,0 +1,96 @@ +# ============================================================================= +# Font Custom Configuration +# This file should live in the directory where you run `fontcustom compile`. +# For more info, visit . +# ============================================================================= + + +# ----------------------------------------------------------------------------- +# Project Info +# ----------------------------------------------------------------------------- + +# The font's name. Also determines the file names of generated templates. +#font_name: icons + +# Format of CSS selectors. {{glyph}} is substituted for the glyph name. +#css_selector: .i-{{glyph}} + +# Generate fonts without asset-busting hashes. +#no_hash: true + +# Encode WOFF fonts into the generated CSS. +#base64: true + +# Forces compilation, even if inputs have not changed +#force: true + +# Display (possibly useful) debugging messages. +#debug: true + +# Hide status messages. +#quiet: true + + +# ----------------------------------------------------------------------------- +# Input / Output Locations +# You can save generated fonts, CSS, and other files to different locations +# here. Font Custom can also read input vectors and templates from different +# places. +# +# NOTE: +# - Be sure to preserve the whitespace in these YAML hashes. +# - INPUT[:vectors] and OUTPUT[:fonts] are required. Everything else is +# optional. +# - Specify output locations for custom templates by including their file +# names as the key. +# ----------------------------------------------------------------------------- + +#input: +# vectors: my/vectors +# templates: my/templates + +#output: +# fonts: app/assets/fonts +# css: app/assets/stylesheets +# preview: app/views/styleguide +# my-custom-template.yml: path/to/template/output + + +# ----------------------------------------------------------------------------- +# Templates +# A YAML array of templates and files to generate alongside fonts. Custom +# templates should be saved in the INPUT[:templates] directory and referenced +# by their base file name. +# +# For Rails and Compass templates, set `preprocessor_path` as the relative +# path from OUTPUT[:css] to OUTPUT[:fonts]. By default, these are the same +# directory. +# +# Included in Font Custom: preview, css, scss, scss-rails +# Default: css, preview +# ----------------------------------------------------------------------------- + +#templates: +#- scss-rails +#- preview +#- my-custom-template.yml + +#preprocessor_path: ../fonts/ + + +# ----------------------------------------------------------------------------- +# Font Settings (defaults shown) +# ----------------------------------------------------------------------------- + +# Size (in pica points) for which your font is designed. +#font_design_size: 16 + +# The em size. Setting this will scale the entire font to the given size. +#font_em: 512 + +# The font's ascent and descent. Used to calculate the baseline. +#font_ascent: 448 +#font_descent: 64 + +# Horizontally fit glyphs to their individual vector widths. +#autowidth: false diff --git a/awx/ui/client/assets/fontcustom/new_icons/google.svg b/awx/ui/client/assets/fontcustom/new_icons/google.svg new file mode 100644 index 0000000000..530a136d6c --- /dev/null +++ b/awx/ui/client/assets/fontcustom/new_icons/google.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/awx/ui/client/assets/fontcustom/new_icons/saml-02.svg b/awx/ui/client/assets/fontcustom/new_icons/saml-02.svg new file mode 100644 index 0000000000..1f33a6c8fc --- /dev/null +++ b/awx/ui/client/assets/fontcustom/new_icons/saml-02.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/awx/ui/client/src/login/thirdPartySignOn.block.less b/awx/ui/client/src/login/thirdPartySignOn.block.less index fcf31cde10..5e251254a4 100644 --- a/awx/ui/client/src/login/thirdPartySignOn.block.less +++ b/awx/ui/client/src/login/thirdPartySignOn.block.less @@ -12,7 +12,7 @@ } .ThirdPartySignOn-item { - margin-left: 10px; + margin-left: 15px; } .ThirdPartySignOn-button { @@ -33,3 +33,7 @@ .ThirdPartySignOn-icon { font-size: 35px; } + +.ThirdPartySignOn-icon--fontCustom { + font-size: 30px; +} diff --git a/awx/ui/client/src/login/thirdPartySignOn.directive.js b/awx/ui/client/src/login/thirdPartySignOn.directive.js index b4952ed91e..46bf5528a7 100644 --- a/awx/ui/client/src/login/thirdPartySignOn.directive.js +++ b/awx/ui/client/src/login/thirdPartySignOn.directive.js @@ -19,21 +19,21 @@ export default scope.loginItems = [ { type: "foo", - icon: "fa-github", + icon: "ThirdPartySignOn-icon--fontCustom icon-google", link: "https://google.com", - tooltip: "Login in via Google" + tooltip: "Sign in with Google" }, { type: "foo", icon: "fa-github", link: "https://google.com", - tooltip: "Login in via Github" + tooltip: "Sign in with Github" }, { type: "foo", - icon: "fa-github", + icon: "ThirdPartySignOn-icon--fontCustom icon-saml-02", link: "https://google.com", - tooltip: "Login in via SAML" + tooltip: "Sign in with SAML" } ] diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index 664b1474c1..74ce0464a2 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -7,6 +7,7 @@ +