From 298eb06548451c95938b7d9b6cc12ce21b4133d0 Mon Sep 17 00:00:00 2001 From: Ben Gotow Date: Thu, 18 Feb 2016 15:21:36 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84:=20White=20buttons,=20dropdown=20/?= =?UTF-8?q?=20popover=20cleanup,=20hairline=20dividers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stylesheets/category-picker.less | 1 + .../stylesheets/message-templates.less | 3 +- .../stylesheets/translate.less | 1 + .../composer/stylesheets/composer.less | 4 +-- .../lib/message-participants.cjsx | 24 ++++++-------- .../stylesheets/message-list.less | 19 +++++------ .../mode-switch/stylesheets/mode-switch.less | 7 ++-- .../search-bar/stylesheets/search-bar.less | 2 -- src/components/popover.cjsx | 5 +-- static/buttons.less | 9 ++--- static/components/button-dropdown.less | 31 +++++++++--------- static/components/popover.less | 9 ++--- .../tooltip/tooltip-bg-pointer-shadow@2x.png | Bin 0 -> 15822 bytes .../images/tooltip/tooltip-bg-pointer@2x.png | Bin 1296 -> 15376 bytes static/variables/ui-variables.less | 11 ++++--- static/workspace.less | 14 ++++---- 16 files changed, 69 insertions(+), 71 deletions(-) create mode 100644 static/images/tooltip/tooltip-bg-pointer-shadow@2x.png diff --git a/internal_packages/category-picker/stylesheets/category-picker.less b/internal_packages/category-picker/stylesheets/category-picker.less index b3c596a61..b234e572c 100644 --- a/internal_packages/category-picker/stylesheets/category-picker.less +++ b/internal_packages/category-picker/stylesheets/category-picker.less @@ -16,6 +16,7 @@ body.platform-win32 { .menu { background: @background-secondary; width: @popover-width; + max-height: 400px; .header-container { border-bottom: 0; diff --git a/internal_packages/composer-templates/stylesheets/message-templates.less b/internal_packages/composer-templates/stylesheets/message-templates.less index d76ee8a4e..b40c7fc37 100755 --- a/internal_packages/composer-templates/stylesheets/message-templates.less +++ b/internal_packages/composer-templates/stylesheets/message-templates.less @@ -7,6 +7,7 @@ .menu { .content-container { height:150px; + width: 210px; overflow-y:scroll; } .footer-container { @@ -85,7 +86,7 @@ margin: 0 0 0 8px; } } - + .section-body { padding: 10px 0 0 0; diff --git a/internal_packages/composer-translate/stylesheets/translate.less b/internal_packages/composer-translate/stylesheets/translate.less index a57e8bc06..fa8e3e76c 100644 --- a/internal_packages/composer-translate/stylesheets/translate.less +++ b/internal_packages/composer-translate/stylesheets/translate.less @@ -8,6 +8,7 @@ } .content-container { height:185px; + width:170px; overflow:scroll; } } diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less index 433a450f3..9dd0f40c4 100644 --- a/internal_packages/composer/stylesheets/composer.less +++ b/internal_packages/composer/stylesheets/composer.less @@ -316,11 +316,11 @@ body.platform-win32 { &:hover { .primary-item, .only-item { - border-radius: 4px; + border-radius: @border-radius-base; } } .secondary-items { - border-radius: 4px; + border-radius: @border-radius-base; } .item { .contact.is-alias { diff --git a/internal_packages/message-list/lib/message-participants.cjsx b/internal_packages/message-list/lib/message-participants.cjsx index 5c3ac44d5..cb3b21a55 100644 --- a/internal_packages/message-list/lib/message-participants.cjsx +++ b/internal_packages/message-list/lib/message-participants.cjsx @@ -29,19 +29,9 @@ class MessageParticipants extends React.Component _allToParticipants: => _.union(@props.to, @props.cc, @props.bcc) - _selectPlainText: (e) => + _selectText: (e) => textNode = e.currentTarget.childNodes[0] - @_selectText(textNode) - _selectCommaText: (e) => - textNode = e.currentTarget.childNodes[0].childNodes[0] - @_selectText(textNode) - - _selectBracketedText: (e) => - textNode = e.currentTarget.childNodes[1].childNodes[0] # because of React rendering - @_selectText(textNode) - - _selectText: (textNode) => range = document.createRange() range.setStart(textNode, 0) range.setEnd(textNode, textNode.length) @@ -67,12 +57,18 @@ class MessageParticipants extends React.Component if c.name?.length > 0 and c.name isnt c.email
- {c.name}  - <{c.email}>{comma}  +
+ {c.name} +
+
+ {"<"}{c.email}{">#{comma}"} +
else
- {c.email}{comma}  +
+ {c.email}{comma} +
) diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less index b7e75c427..a1ed0191d 100644 --- a/internal_packages/message-list/stylesheets/message-list.less +++ b/internal_packages/message-list/stylesheets/message-list.less @@ -76,12 +76,10 @@ body.platform-win32 { .message-toolbar-arrow.down { order:201; margin-right: 0; - padding-top:6px; margin-left: @spacing-standard * 1.5; } .message-toolbar-arrow.up { order:202; - padding-top:6px; // <1 because of hit region padding on the button margin-right: @spacing-standard * 0.75; } @@ -130,6 +128,7 @@ body.platform-win32 { line-height: @font-size-large * 1.8; display: flex; align-items: center; + padding: 0 @padding-large-horizontal; } .mail-important-icon { margin-right:@spacing-half; @@ -146,7 +145,6 @@ body.platform-win32 { cursor: pointer; -webkit-user-select: none; margin-left: auto; - margin-right: @padding-large-horizontal; display: flex; align-items: center; @@ -192,10 +190,7 @@ body.platform-win32 { width: calc(~"100% - 12px"); margin: 0 auto; - padding: @message-spacing 0; - &:last-child { - padding-bottom: @spacing-double; - } + .message-item-white-wrap { background: @background-primary; border: 0; @@ -203,6 +198,7 @@ body.platform-win32 { border-radius: 4px; } + padding-bottom: @message-spacing * 2; &.before-reply-area { padding-bottom: 0; } &.collapsed { @@ -285,7 +281,7 @@ body.platform-win32 { top: 50%; left: 50%; margin-left: -80px; - margin-top: -14px; + margin-top: -15px; border-radius: 15px; border: 1px solid @border-color-divider; width: 160px; @@ -425,7 +421,7 @@ body.platform-win32 { width: 100%; border: 0; padding: 0; - margin-top: 5px; + margin-top: 10px; overflow: auto; } } @@ -554,7 +550,7 @@ body.platform-win32 { .participant { display: inline-block; - margin-right: 0.5em; + margin-right: 0.25em; } .participant-type { @@ -580,9 +576,12 @@ body.platform-win32 { .participant-primary { color: @text-color-very-subtle; + margin-right: 0.15em; + display:inline-block; } .participant-secondary { color: @text-color-very-subtle; + display:inline-block; } .from-contact { diff --git a/internal_packages/mode-switch/stylesheets/mode-switch.less b/internal_packages/mode-switch/stylesheets/mode-switch.less index 9d1543748..e4c8ac41c 100644 --- a/internal_packages/mode-switch/stylesheets/mode-switch.less +++ b/internal_packages/mode-switch/stylesheets/mode-switch.less @@ -1,11 +1,8 @@ @import 'ui-variables'; .btn-toolbar.mode-toggle { - z-index: 1000; - position: relative; - img.content-mask { - background-color: @text-color-subtle; - } + z-index: 1000; + position: relative; } .btn-toolbar.mode-toggle.mode-false { img.content-mask { diff --git a/internal_packages/search-bar/stylesheets/search-bar.less b/internal_packages/search-bar/stylesheets/search-bar.less index 58297a894..7ee701b81 100644 --- a/internal_packages/search-bar/stylesheets/search-bar.less +++ b/internal_packages/search-bar/stylesheets/search-bar.less @@ -8,8 +8,6 @@ z-index: 100; width:450px; margin-top: (38px - 23px) / 2; - margin-left: 12px; - margin-right: 12px; .menu .header-container { padding:0; diff --git a/src/components/popover.cjsx b/src/components/popover.cjsx index 8e7222a2f..94eee98f7 100644 --- a/src/components/popover.cjsx +++ b/src/components/popover.cjsx @@ -154,7 +154,7 @@ class Popover extends React.Component 'top': -10, pointerStyle = _.extend pointerStyle, 'transform': 'translateX(-50%)' - 'bottom': -10 + 'bottom': -21 else if @props.direction is 'down' popoverStyle = _.extend popoverStyle, @@ -162,7 +162,7 @@ class Popover extends React.Component 'top': '100%' pointerStyle = _.extend pointerStyle, 'transform': 'rotateX(180deg)' - 'top': -10 + 'top': -21 'left':-12 if @props.direction is "down-align-left" @@ -176,6 +176,7 @@ class Popover extends React.Component popoverComponent =
{@props.children}
+
&s;O6P-KYc|zsi&`YbQb>Cs6Ct$g5m!1*%vLc8DTZSE?Kc^IRXJe4cDpF88#w z>~Yx6tY<)LVy+6gacCK{rV7#Y^}Q~^vNL;7N)1E{aFp2tD|Sy;n%eSHoi$4?Xieo{ z36_zGg(!fYxm2eO+pwmMJ^)+lz8G!2(1(Si>1zh-dLJ`KRejmP>xDT`yHN{pIKL{?RSsKxkbR1#D-$xibw*J(qYbxH}j z_IikBsK|Y*KoBtrf+&<&5Ca7kfSANes>ZXLR1l?@5ECH;%|Je9-GQK~?}1v@G|KM2 zuPUYmo$ZteHTP4iQ8bFf-H@{0oqRSsBBY|3OiCEZ0Fa4F8A-^9nT#L~XQXs29p}1C z+t-7f$2~PlwVAtvRYQ3aPg)9ET!*`FtbI|Qg%ik| z&|^&pfyzgw_$aFmDg`zwihz{>+OAS`Dk`AL)*^#bP5(ag{xNFPu;MfT-{uu~Spdz= z>s^UEtG^S=DA+Z{gu_L&M;6wdJincW{R61eN~H+3B-hNXIe?qQIcM=o`hRil7S@cq zmL5;BT^~KxuA}k(FV@am(a!DIY$4s-H?FC2!7$5;oz%-p5pvZ^G0wFI+c4wp=AAN1 zhKWunm=xk%ui>6n&DJ!GjvS|pSe-TJc99XK*g5JfUZX;LA0!I8L5xTmI!I$c>wA!p zi`+f_+I^bTDtkHdh<9GPp9?ARxO3m*bZ^uM6u0G}W3Ow>$J5nKI%ivH)}0@V@aThX zv(cwv>R02Y+sUSWHE!Cr+*;A?WTX)d8}?Z_H)pb2EL+e62}}-%q9DdOd>FSF)9bJ_ znby$_gykFp(WVWq=xMmUZ5Tl;-C(YvPth>+7S8wR;MSfuiXKeRGZEK%DC#Q9*5PwM zf3!2YpI$LvGzbQSEK*!#KA4u`!hn!Pii^w#(^6a*5VA;dk@;X+iVFim7AY<=A52Se zVL-?t#YN_WX(=uY2w9}K$b2v@#f1SOixd}`52mHKFd$@+;v)0Gv=kQxge+2AWImXd z;=+KCMT(2e2h&nq7!a~Zagq68T8aw;LKZ15G9OG!abZBnBE?1KgJ~%)3Vor!L$??281k9Tx33&mg2&IkVT4%%m>p_To@3tNO6(* zU|Na`140&wxB~6hj9~@6TU|_}EErwZZ9D3!;ESmdiECpH{eT)VOJ=qJ^?FRzgUZ(dLiPjfFG zJ9R$0kC(cc<4)?{1IX zEq87BfS^$de$mE|1_%P8fe089OXSU942cpTYDCbOnwThjq2U7xN^o}XeeQ0o2_I*Z zdwJ%W=l{(7=9$_3vfJ8P*UYY4Tt`vV?3U(GJN&i5&ttP@!tZaL(O2P5ZL+yrqo_yb z8=o3#eAg2c#YN@LF1;)AA}10Ocr2lDX}{If<=}s#nYLQY zF8ZL~+F&HKbVb@MK}7`?w|%8eWLehY@!46o*XeMtus9gjO*1~4Wo!(~u?**6EZNH% zsDuA_RqE&3LrvLq(DGXcbUn$@bSjmyr<`_0jnb^o=c5@1?Qqy&51Tfe(1o-up)Jjb z%Sysx=n8$xknXoyjYRn?JFj>$pD3Ya*+GhQT1e8YouR7)MI!jHc)Vhy zrniH_%qk|-I){^hZU>q&q>2D`Us`DhnjYQ=r<6rB4WaNxkkBhiNn&0nIi$u+(2_`l z7>L6V4N_n$&LugZ=!!O=Q~{WGSH-By{Z&{Po~mIWEmsLMJee@FrZP*-!$RhQDiCx< z?NpRlAXBbwxzSsKL9;w9%Oip)CyXi8^E4V%D4l{H2njj}7^Q7v9X7_<$$B`ahjXvA zFgibOI!5sio<$^FAQ4H)FGvEEMB#W@+y1@#IVMLkgsxD_Qq7pA3B+_zLG65(1B znl2EHF7-re9%NO=J!|rg{>23)7LY`1gwkWh*7O3(@AT_B<+}!0! zLDhhA#eVLJP`y427v8 zl?~CaRb_av3$Y?r#tQx)%oQYx1_9Mznr2ypJ7~BlzcFv)c7Xk!t5?pvbh?n3(fZ$Dn3(p7f5?lxn zyh(83`5<0`3ju;R2`)Sz#7l4?K=3BPh3A8K2`&T(-Xys2d=M|eg#f{u1Q(tU;w88c zAb6AD!t+7A1Q!AXZxUR1K8Tm#LV(~+f(y?F@e*7J5WGon;rSq5f(rqHHwi90AH+*= zAwcjZ!G-68cnK~92;L;P@O%(2!G!?9n*R@G3$oyqlY$opR8|b`D6F3!y#Yo z;dA~SrxzW6u5Moar{cu*_fAc9jsF>+{fT?Y{xR<1hGQSR86LbhWAb+T?DbX4*`L;+4II3*QQx}cAQ!84}EOj z-Jhq}W9;46raF3`chxLNO#Cu=VZ|+e{q7qRjel=hTXU&#{%ZQA-yXeqVc&{xPS&43 ze)-7cvfgJ09$G#s4xXt0anU$6ntDO>I=3G>^uxiPiaBJvDWAB!K0awb?MF0Q* delta 813 zcmbPGF@bA>ikf7JYeY$Kep*R+Vo@rCV@iHfs)A>3VtQ&&YGO)d;mK4R1_ox0iB|rM z3KP2=bqowm6wEF43{B014D^p`D10w|}P_mo&%SlebrYI%N z$|bcpxhS)sBr`ux0mM&C$}cUkRZ^Oq!>BoVA*0^p+l;o63Kh8pR?bDKi6!|(A^G_^ zwn`A!1Z3owu?f!3iON_iR$= zv*Nj&9Qmzr(TdPTsiJKUk8FGU`}oHnlDE{G6g)+QHq{+244?OWZ@ca)1r9q=*NF$p zIU@gk`?pBh;~dC;TIZn%?<<~)XdnF`NOAx%c`k-c0+no`U2@j^#klHAMkwH zf2g>=xp+a~Gl4mef1cj;fMd<7RUF0N6uoCIlX=0hFOYqY!43wiHhz|eOyV+)roO@t zc31B_$a*p2;nIVu7Yt(rj(*c{^e;Fu$E|AFiE#5 zhA@S@EIyyFyZGO&&`mh=qT+G+;){lV9}ZN!_!6Vk54Xoe~SSKJYD@<);T3K0RU#9JDC6g diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less index c9af9ec61..f1991c7e5 100644 --- a/static/variables/ui-variables.less +++ b/static/variables/ui-variables.less @@ -168,14 +168,15 @@ @line-height-large: @line-height-computed * 1.3; @line-height-small: @line-height-computed * 0.95; -@border-radius-base: 4px; -@border-radius-large: 6px; -@border-radius-small: 3px; +@border-radius-base: 3px; +@border-radius-large: 5px; +@border-radius-small: 2px; //============================== Shadows ===============================// -@standard-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.21); -@standard-shadow-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.21); +@standard-shadow-color: rgba(0, 0, 0, 0.21); +@standard-shadow: 0 1px 4px 0 @standard-shadow-color; +@standard-shadow-up: 0 -1px 4px 0 @standard-shadow-color; //=============================== Buttons ==============================// diff --git a/static/workspace.less b/static/workspace.less index d2a4c2ed4..6d2087cd0 100644 --- a/static/workspace.less +++ b/static/workspace.less @@ -242,10 +242,10 @@ body.is-blurred { line-height: 1.75em; height: 1.75em; box-shadow: 0 0.5px 0.05px rgba(0,0,0,0.4), 0 -0.5px 0 rgba(0,0,0,0.12); - img.content-mask { background-color: fadeout(@text-color-heading, 10%); } + img.content-mask { background-color: fade(@text-color-heading, 80%); } } .btn-toolbar:active { - img.content-mask { background-color: fadeout(@text-color-heading, 3%); } + img.content-mask { background-color: fade(@text-color-heading, 90%); } } .btn-toolbar:only-of-type { margin-right: @spacing-three-quarters; @@ -271,7 +271,7 @@ body.is-blurred { } .flexbox-handle-horizontal { - width: 6px; + width: 8px; top: 0; bottom: 0; z-index: 2; @@ -279,16 +279,16 @@ body.is-blurred { cursor: col-resize; div { height:100%; - border-right: 1px solid @border-color-divider; + box-shadow: 0.5px 0 0 @border-color-divider; } &.flexbox-handle-right { right:-4px; - padding-right:3px; + padding-right:4px; } &.flexbox-handle-left { - left:-3px; - padding-right:2px; + left:-4px; + padding-right:4px; } }