From e829b84a75a4d35ce3c1913fdf1a641ae108026d Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Wed, 22 Dec 2021 21:42:51 -0300 Subject: [PATCH] Update Room Tools Styling --- src/assets/images/icons/chat-history.png | Bin 0 -> 574 bytes src/assets/images/icons/cog.png | Bin 0 -> 448 bytes src/assets/images/icons/like-room.png | Bin 0 -> 481 bytes src/assets/images/icons/room-link.png | Bin 0 -> 322 bytes src/assets/images/icons/zoom-less.png | Bin 0 -> 252 bytes src/assets/images/icons/zoom-more.png | Bin 0 -> 475 bytes src/assets/styles/icons.scss | 36 ++++++++++++++++++ .../room-tools/RoomToolsWidgetView.scss | 14 ++++++- .../room-tools/RoomToolsWidgetView.tsx | 22 +++++------ 9 files changed, 60 insertions(+), 12 deletions(-) create mode 100644 src/assets/images/icons/chat-history.png create mode 100644 src/assets/images/icons/cog.png create mode 100644 src/assets/images/icons/like-room.png create mode 100644 src/assets/images/icons/room-link.png create mode 100644 src/assets/images/icons/zoom-less.png create mode 100644 src/assets/images/icons/zoom-more.png diff --git a/src/assets/images/icons/chat-history.png b/src/assets/images/icons/chat-history.png new file mode 100644 index 0000000000000000000000000000000000000000..da51f37e2c9cd9f2c174cf25f359d9791d20c218 GIT binary patch literal 574 zcmV-E0>S->P)aB^>EX>4U6ba`-PAVE-2F#rGvnd3@N%}XuHOjal;%1_J8 zN##-i17i~|6H60IqeKG(0}BHPFf=eQHUyGJK(;wlDA51~n3$WT0in5BvY9D}&jkQa zx)o>}E!d0z00D|gL_t(Ijh&OtYQjJe$A4RVfj}_$0TOQ>^x(x85X8q22?ZZQLLVX^ zQu+!#RfIy%z4Xu?;;E&Owj>1d2-`!lYd&mK`-8BP$?Sh-XEuT&l6u5%4(WNDT7}i> zvLd8jq~~pjq7e7-6TUv6)k#-HtAjgf(`;H5p@uS|ClrxHqk@r7j?>cd$_sbHCg zBptB?bW+>2jPmHm|YT%kYl4I*Bye1B5GVE_OC M07*qoM6N<$g4q4?u>b%7 literal 0 HcmV?d00001 diff --git a/src/assets/images/icons/cog.png b/src/assets/images/icons/cog.png new file mode 100644 index 0000000000000000000000000000000000000000..b7101d7184477e9a60482a69a579a33a2402ae2d GIT binary patch literal 448 zcmV;x0YCnUP)aB^>EX>4U6ba`-PAVE-2F#rGvnd3@N%}XuHOjal;%1_J8 zN##-i17i~|6H60IqeKG(0}BHPFf=eQHUyGJK(;wlDA51~n3$WT0in5BvY9D}&jkQa zx)o>}E!d0z009h1L_t(IjkT3M4#F@Dg0Ewj&cYq}vh%RsfBvc8h3lhCX z*G@e~7-%BLb($1`r~Eiy96u*fNHas)D&`z@0ASjtcAZVRkFHwj!Z|$(Qfw zq8cMY+tePg$TM$Fik?CZ2c#O=NCE8l-vFg`ljB!awHT_k_E_tbMXzV$+S^?j^|y2b zOhvK4)A8W?=gV~hrs4rm3PkY`kgFd81D{H8LWM-)<0*bp@jJWSAB)DVc{%0E+g#Cc zt+kl@u>ycGr_?4T#YC6`hD)l*GjCDX51xs{r{T&%7QtyiJyC=n6LOsIWU_u qTz#;r;T-Air~C%9zNvskf7Bbt`jlP>L(ee)0000aB^>EX>4U6ba`-PAVE-2F#rGvnd3@N%}XuHOjal;%1_J8 zN##-i17i~|6H60IqeKG(0}BHPFf=eQHUyGJK(;wlDA51~n3$WT0in5BvY9D}&jkQa zx)o>}E!d0z00AvYL_t(IjkT5CO~Wu0g+EtWfDuYusU4szK#(Y}Wd%Ay2VjKm&{ue9 zVFjM8A~k^#xN!d> zJRU0E-?ltI-aw@FB*U`Y1EBL^bZ?qr^%>T?^#XcQdce^ebnS+elle;4Hw^7=y|1yN%b3A$Ve9M2vP@1O7 z7=tkes0UlkmYcxQGaOHg-jrR3W`1!FM{m~d3xlq$-qD7NjaT1_T%~FmTL#?B##fTlbVtn1;qF|I=qYp9V27CkyKddkcFn zc41~_=4R$FFflMNW0~aUu+1_=<01p=j2W|+GA`U1xoM_m$9Yx;|6QUP(z-W#fL8T+ zx;Tbd^lqK7QLsUQ$8~>RQg))}+|WCR6kkX-pS$HcM^#KtYlh37%Xb3zmg_SV@HxwO zFZ31qx#FalwUUqBqSx#kn~uJ_eMh8XPPm%ngkL8G#=G>*h QK$kIiy85}Sb4q9e03xJp%K!iX literal 0 HcmV?d00001 diff --git a/src/assets/images/icons/zoom-less.png b/src/assets/images/icons/zoom-less.png new file mode 100644 index 0000000000000000000000000000000000000000..36423da8e9e577b191089f8199b12d2aca77646e GIT binary patch literal 252 zcmeAS@N?(olHy`uVBq!ia0vp@KrF_=1|+3_iKzf7&H|6fVg?3oArNM~bhqvgP;i~6 zi(^Q|t>lCQEdMtq?0Hb1G2#9H$H)5*8+P>jD@R=1Q~5a{hw-E1qZ=lRX5FggX`Gnj zevLz{<#xjwMo(oAxtl9Ff*rV=stpZ8lsDyS%=-6#PkSS0meMV?Nq<%Jlzz;ga-n%u zy2Hf|{do_h5*U^VJ`0g(yV~fxTiOmx#(4cCFjYNER1cwE}63gmVEmEdeWQ! x?WfaB^>EX>4U6ba`-PAVE-2F#rGvnd3@N%}XuHOjal;%1_J8 zN##-i17i~|6H60IqeKG(0}BHPFf=eQHUyGJK(;wlDA51~n3$WT0in5BvY9D}&jkQa zx)o>}E!d0z00AdSL_t(Ijm?t3N&`U<#=i@`z`?Dt5R0$4UASezwnRo{ItOR!z1dd#A>~X)+y>}E!o^z+7r%FVD(@m zow|bVmIDB;^(k(3A1_yD*{WISQ2Ybv?fnC)~Z!5>(R-dA0R R=d1t#002ovPDHLkV1m)8!`T1; literal 0 HcmV?d00001 diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index 21a92c90..e73bd296 100644 --- a/src/assets/styles/icons.scss +++ b/src/assets/styles/icons.scss @@ -309,6 +309,42 @@ height: 16px; } + &.icon-cog { + background: url("../images/icons/cog.png"); + width: 21px; + height: 21px; + } + + &.icon-chat-history { + background: url("../images/icons/chat-history.png"); + width: 17px; + height: 21px; + } + + &.icon-room-link { + background: url("../images/icons/room-link.png"); + width: 17px; + height: 15px; + } + + &.icon-zoom-more { + background: url("../images/icons/zoom-more.png"); + width: 12px; + height: 22px; + } + + &.icon-zoom-less { + background: url("../images/icons/zoom-less.png"); + width: 12px; + height: 22px; + } + + &.icon-like-room { + background: url("../images/icons/like-room.png"); + width: 20px; + height: 22px; + } + &.icon-arrows { background: url("../images/icons/arrows.png"); width: 17px; diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss index 51e42d8f..044a286b 100644 --- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss @@ -1,7 +1,7 @@ .nitro-room-tools { position: absolute; bottom: 125px; - left: -133px; + left: -145px; background: rgba($dark,.95); box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4); border-top-right-radius: $border-radius; @@ -36,4 +36,16 @@ opacity: .5; } } + + .tools-item { + .icon { + width: 22px; + background-repeat: no-repeat; + background-position: center; + } + + &:hover { + text-decoration: underline; + } + } } diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx index d52ef382..d9e9b6e8 100644 --- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -45,21 +45,21 @@ export const RoomToolsWidgetView: FC<{}> = props => return (
-
-
handleToolClick('settings') }> - { LocalizeText('room.settings.button.text') } +
+
handleToolClick('settings') }> + { LocalizeText('room.settings.button.text') }
-
handleToolClick('zoom') }> - { LocalizeText('room.zoom.button.text') } +
handleToolClick('zoom') }> + { LocalizeText('room.zoom.button.text') }
-
handleToolClick('chat_history') }> - { LocalizeText('room.chathistory.button.text') } +
handleToolClick('chat_history') }> + { LocalizeText('room.chathistory.button.text') }
-
handleToolClick('like_room') }> - { LocalizeText('room.like.button.text') } +
handleToolClick('like_room') }> + { LocalizeText('room.like.button.text') }
-
handleToolClick('toggle_room_link') }> - { LocalizeText('navigator.embed.caption') } +
handleToolClick('toggle_room_link') }> + { LocalizeText('navigator.embed.caption') }
setIsExpanded(value => !value)}>