nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 03:13:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update Room Tools Styling

Browse Source
This commit is contained in:
MyNameIsBatman 2021-12-22 21:42:51 -03:00
parent 92e3719ac5
commit e829b84a75
9 changed files with 60 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/icons/chat-history.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 574 B

BIN
src/assets/images/icons/cog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 448 B

BIN
src/assets/images/icons/like-room.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 481 B

BIN
src/assets/images/icons/room-link.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 B

BIN
src/assets/images/icons/zoom-less.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 B

BIN
src/assets/images/icons/zoom-more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 475 B

36
src/assets/styles/icons.scss
View File

@ -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;

14
src/views/room/widgets/room-tools/RoomToolsWidgetView.scss
View File

@ -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;
}
}
}

22
src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -45,21 +45,21 @@ export const RoomToolsWidgetView: FC<{}> = props =>
return (
<div className={'nitro-room-tools ps-3 d-flex' + classNames({ ' open': isExpended })}>
<div className="list-group list-group-flush w-100 me-1">
<div className="list-group-item" onClick={ () => handleToolClick('settings') }>
<i className="fas fa-cog me-2" />{ LocalizeText('room.settings.button.text') }
<div className="d-flex flex-column gap-2 w-100 py-2 pe-2">
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('settings') }>
<i className="icon icon-cog" /> { LocalizeText('room.settings.button.text') }
</div>
<div className="list-group-item" onClick={ () => handleToolClick('zoom') }>
<i className={ 'fas me-2 ' +classNames({ 'fa-search-minus': !isZoomedIn, 'fa-search-plus': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') }
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('zoom') }>
<i className={ 'icon ' +classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') }
</div>
<div className="list-group-item" onClick={ () => handleToolClick('chat_history') }>
<i className="fas fa-comment-alt me-2" />{ LocalizeText('room.chathistory.button.text') }
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('chat_history') }>
<i className="icon icon-chat-history" />{ LocalizeText('room.chathistory.button.text') }
</div>
<div className={ 'list-group-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
<i className="fas fa-heart me-2" />{ LocalizeText('room.like.button.text') }
<div className={ 'd-flex align-items-center gap-2 cursor-pointer tools-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
<i className="icon icon-like-room" /> { LocalizeText('room.like.button.text') }
</div>
<div className="list-group-item" onClick={ () => handleToolClick('toggle_room_link') }>
<i className="fas fa-link me-2" />{ LocalizeText('navigator.embed.caption') }
<div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('toggle_room_link') }>
<i className="icon icon-room-link" />{ LocalizeText('navigator.embed.caption') }
</div>
</div>
<div className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}>