Skip to content
Snippets Groups Projects
Unverified Commit d37cf0c2 authored by Rodrigo Nascimento's avatar Rodrigo Nascimento
Browse files

Finixh moving flex tab template

parent 79c2c839
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 270 additions and 270 deletions
client/routes/adminRouter.js
+ 0
− 1
View file @ d37cf0c2
...@@ -17,7 +17,6 @@ FlowRouter.route('/admin/rooms', { ...@@ -17,7 +17,6 @@ FlowRouter.route('/admin/rooms', {
FlowRouter.route('/admin/info', { FlowRouter.route('/admin/info', {
name: 'admin-info', name: 'admin-info',
action() { action() {
RocketChat.TabBar.showGroup('adminInfo');
BlazeLayout.render('main', {center: 'adminInfo'}); BlazeLayout.render('main', {center: 'adminInfo'});
} }
}); });
......
packages/rocketchat-emoji-custom/admin/adminEmoji.html
+ 53
− 53
View file @ d37cf0c2
<template name="adminEmoji"> <template name="adminEmoji">
<section class="page-container page-list"> <div class="flex-tab-container">
<header class="fixed-title"> <section class="page-container page-list flex-tab-main-content">
{{> burger}} <header class="fixed-title">
<h2> {{> burger}}
<span class="room-title">{{_ "Custom_Emoji"}}</span> <h2>
</h2> <span class="room-title">{{_ "Custom_Emoji"}}</span>
</header> </h2>
<div class="content"> </header>
{{#unless hasPermission 'manage-emoji'}} <div class="content">
<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p> {{#unless hasPermission 'manage-emoji'}}
{{else}} <p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
<form class="search-form" role="form"> {{else}}
<div class="input-line search"> <form class="search-form" role="form">
<input type="text" id="emoji-filter" placeholder="{{_ "Search"}}" dir="auto"> <div class="input-line search">
<i class="icon-search"></i> <input type="text" id="emoji-filter" placeholder="{{_ "Search"}}" dir="auto">
{{#unless isReady}}<i class="icon-spin"></i>{{/unless}} <i class="icon-search"></i>
{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
</div>
</form>
<div class="results">
{{{_ "Showing_results" customemoji.length}}}
</div> </div>
</form> <div class="list">
<div class="results"> <table>
{{{_ "Showing_results" customemoji.length}}} <thead>
</div> <tr>
<div class="list"> <th>&nbsp;</th>
<table> <th width="51%">{{_ "Name"}}</th>
<thead> <th width="49%">{{_ "Aliases"}}</th>
<tr> </tr>
<th>&nbsp;</th> </thead>
<th width="51%">{{_ "Name"}}</th> <tbody>
<th width="49%">{{_ "Aliases"}}</th> {{#each customemoji}}
</tr> <tr class="emoji-info row-link">
</thead> <td>
<tbody> <div class="emojiAdminPreview-image">
{{#each customemoji}} {{> emojiPreview name=name extension=extension}}
<tr class="emoji-info row-link"> </div>
<td> </td>
<div class="emojiAdminPreview-image"> <td>{{name}}</td>
{{> emojiPreview name=name extension=extension}} <td>{{aliases}}</td>
</div> </tr>
</td> {{/each}}
<td>{{name}}</td> </tbody>
<td>{{aliases}}</td> </table>
</tr> {{#if hasMore}}
{{/each}} <button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
</tbody> {{/if}}
</table> </div>
{{#if hasMore}} {{/unless}}
<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button> </div>
{{/if}} </section>
</div> {{> flexTabBar template=flexTemplate data=flexData}}
{{/unless}} </div>
</div>
</section>
<section class="flex-tab">
{{> Template.dynamic template=flexTemplate data=flexData}}
</section>
</template> </template>
packages/rocketchat-theme/client/imports/base.less
+ 3
− 2
View file @ d37cf0c2
...@@ -2246,6 +2246,7 @@ label.required::after { ...@@ -2246,6 +2246,7 @@ label.required::after {
.flex-tab-main-content { .flex-tab-main-content {
flex-grow: 1; flex-grow: 1;
position: relative;
} }
.room-container { .room-container {
...@@ -3033,7 +3034,7 @@ body:not(.is-cordova) { ...@@ -3033,7 +3034,7 @@ body:not(.is-cordova) {
} }
.flex-tab-bar { .flex-tab-bar {
width: 40px; min-width: 40px;
height: 100%; height: 100%;
z-index: 130; z-index: 130;
will-change: transform; will-change: transform;
...@@ -3159,7 +3160,7 @@ body:not(.is-cordova) { ...@@ -3159,7 +3160,7 @@ body:not(.is-cordova) {
display: none; display: none;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: @flex-tab-width; min-width: @flex-tab-width;
z-index: 110; z-index: 110;
overflow-x: visible; overflow-x: visible;
.transition(transform .25s cubic-bezier(.5, 0, .1, 1)); .transition(transform .25s cubic-bezier(.5, 0, .1, 1));
......
packages/rocketchat-ui-admin/admin/rooms/adminRooms.html
+ 56
− 56
View file @ d37cf0c2
<template name="adminRooms"> <template name="adminRooms">
<section class="page-container page-list"> <div class="flex-tab-container">
<header class="fixed-title"> <section class="page-container page-list flex-tab-main-content">
{{> burger}} <header class="fixed-title">
<h2> {{> burger}}
<span class="room-title">{{_ "Rooms"}}</span> <h2>
</h2> <span class="room-title">{{_ "Rooms"}}</span>
</header> </h2>
<div class="content"> </header>
{{#unless hasPermission 'view-room-administration'}} <div class="content">
<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p> {{#unless hasPermission 'view-room-administration'}}
{{else}} <p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
<form class="search-form" role="form"> {{else}}
<div class="input-line search"> <form class="search-form" role="form">
<input type="text" id="rooms-filter" placeholder="{{_ "Search"}}" dir="auto"> <div class="input-line search">
<i class="icon-search"></i> <input type="text" id="rooms-filter" placeholder="{{_ "Search"}}" dir="auto">
{{#unless isReady}}<i class="icon-spin"></i>{{/unless}} <i class="icon-search"></i>
{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
</div>
<label><input type="checkbox" name="room-type" value="c"> {{_ "Channels"}}</label>
<label><input type="checkbox" name="room-type" value="d"> {{_ "Direct_Messages"}}</label>
<label><input type="checkbox" name="room-type" value="p"> {{_ "Private_Groups"}}</label>
</form>
<div class="results">
{{{_ "Showing_results" roomCount}}}
</div> </div>
<label><input type="checkbox" name="room-type" value="c"> {{_ "Channels"}}</label> <div class="list">
<label><input type="checkbox" name="room-type" value="d"> {{_ "Direct_Messages"}}</label> <table>
<label><input type="checkbox" name="room-type" value="p"> {{_ "Private_Groups"}}</label> <thead>
</form> <tr>
<div class="results"> <th width="30%">{{_ "Name"}}</th>
{{{_ "Showing_results" roomCount}}} <th width="20%">{{_ "Type"}}</th>
</div> <th width="20%">{{_ "Users"}}</th>
<div class="list"> <th width="10%">{{_ "Msgs"}}</th>
<table> <th width="20%">{{_ "Default"}}</th>
<thead> </tr>
<tr> </thead>
<th width="30%">{{_ "Name"}}</th> <tbody>
<th width="20%">{{_ "Type"}}</th> {{#each rooms}}
<th width="20%">{{_ "Users"}}</th> <tr class="room-info row-link">
<th width="10%">{{_ "Msgs"}}</th> <td>{{name}}</td>
<th width="20%">{{_ "Default"}}</th> <td>{{type}}</td>
</tr> <td>{{usernames.length}}</td>
</thead> <td>{{msgs}}</td>
<tbody> <td>{{default}}</td>
{{#each rooms}} </tr>
<tr class="room-info row-link"> {{/each}}
<td>{{name}}</td> </tbody>
<td>{{type}}</td> </table>
<td>{{usernames.length}}</td> {{#if hasMore}}
<td>{{msgs}}</td> <button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
<td>{{default}}</td> {{/if}}
</tr> </div>
{{/each}} {{/unless}}
</tbody> </div>
</table> </section>
{{#if hasMore}} {{> flexTabBar template=flexTemplate data=flexData}}
<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button> </div>
{{/if}}
</div>
{{/unless}}
</div>
</section>
<section class="flex-tab">
{{> Template.dynamic template=flexTemplate data=flexData}}
</section>
</template> </template>
packages/rocketchat-ui-admin/admin/users/adminUsers.html
+ 55
− 55
View file @ d37cf0c2
<template name="adminUsers"> <template name="adminUsers">
<section class="page-container page-list"> <div class="flex-tab-container">
<header class="fixed-title"> <section class="page-container page-list flex-tab-main-content">
{{> burger}} <header class="fixed-title">
<h2> {{> burger}}
<span class="room-title">{{_ "Users"}}</span> <h2>
</h2> <span class="room-title">{{_ "Users"}}</span>
</header> </h2>
<div class="content"> </header>
{{#unless hasPermission 'view-user-administration'}} <div class="content">
<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p> {{#unless hasPermission 'view-user-administration'}}
{{else}} <p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
<form class="search-form" role="form"> {{else}}
<div class="input-line search"> <form class="search-form" role="form">
<input type="text" id="users-filter" placeholder="{{_ "Search"}}" dir="auto"> <div class="input-line search">
<i class="icon-search"></i> <input type="text" id="users-filter" placeholder="{{_ "Search"}}" dir="auto">
{{#unless isReady}}<i class="icon-spin"></i>{{/unless}} <i class="icon-search"></i>
{{#unless isReady}}<i class="icon-spin"></i>{{/unless}}
</div>
</form>
<div class="results">
{{{_ "Showing_results" users.length}}}
</div> </div>
</form> <div class="list">
<div class="results"> <table>
{{{_ "Showing_results" users.length}}} <thead>
</div> <tr>
<div class="list"> <th>&nbsp;</th>
<table> <th width="34%">{{_ "Name"}}</th>
<thead> <th width="33%">{{_ "Username"}}</th>
<tr> <th width="33%">{{_ "Email"}}</th>
<th>&nbsp;</th> </tr>
<th width="34%">{{_ "Name"}}</th> </thead>
<th width="33%">{{_ "Username"}}</th> <tbody>
<th width="33%">{{_ "Email"}}</th> {{#each users}}
</tr> <tr class="user-info row-link">
</thead> <td>
<tbody> <div class="user-image status-{{status}}">
{{#each users}} {{> avatar username=username}}
<tr class="user-info row-link"> </div>
<td> </td>
<div class="user-image status-{{status}}"> <td>{{name}}</td>
{{> avatar username=username}} <td>{{username}}</td>
</div> <td>{{emailAddress}}</td>
</td> </tr>
<td>{{name}}</td> {{/each}}
<td>{{username}}</td> </tbody>
<td>{{emailAddress}}</td> </table>
</tr> {{#if hasMore}}
{{/each}} <button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button>
</tbody> {{/if}}
</table> </div>
{{#if hasMore}} {{/unless}}
<button class="button secondary load-more {{isLoading}}">{{_ "Load_more"}}</button> </div>
{{/if}} </section>
</div> {{> flexTabBar template=flexTemplate data=flexData}}
{{/unless}} </div>
</div>
</section>
<section class="flex-tab">
{{> Template.dynamic template=flexTemplate data=flexData}}
</section>
</template> </template>
packages/rocketchat-ui-flextab/flex-tab/flexTabBar.html
+ 10
− 5
View file @ d37cf0c2
<template name="flexTabBar"> <template name="flexTabBar">
{{#each buttons}} <section class="flex-tab">
<div class="tab-button {{active}} {{visible}} {{class}}" title="{{title}}"> {{> Template.dynamic template=template data=data}}
<button aria-label="{{title}}"><i class="{{icon}}"></i></button> </section>
</div> <div class="flex-tab-bar" role="toolbar">
{{/each}} {{#each buttons}}
<div class="tab-button {{active}} {{visible}} {{class}}" title="{{title}}">
<button aria-label="{{title}}"><i class="{{icon}}"></i></button>
</div>
{{/each}}
</div>
</template> </template>
packages/rocketchat-ui/views/app/room.html
+ 93
− 98
View file @ d37cf0c2
...@@ -6,113 +6,108 @@ ...@@ -6,113 +6,108 @@
</div> </div>
</div> </div>
<div class="flex-tab-container"> <div class="flex-tab-container">
<section class="messages-container flex-tab-main-content {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}"> <section class="messages-container flex-tab-main-content {{adminClass}}" id="{{windowId}}" aria-label="{{_ "Channel"}}">
{{#unless embeddedVersion}} {{#unless embeddedVersion}}
<header class="fixed-title"> <header class="fixed-title">
{{> burger}} {{> burger}}
<h2> <h2>
{{#if showToggleFavorite}} {{#if showToggleFavorite}}
<a href="#favorite" class="toggle-favorite"><i class="{{favorite}}" aria-label="{{_ favoriteLabel}}"></i></a> <a href="#favorite" class="toggle-favorite"><i class="{{favorite}}" aria-label="{{_ favoriteLabel}}"></i></a>
{{/if}}
<i class="{{roomIcon}} status-{{userStatus}}"></i>
<span class="room-title">{{roomName}}</span>
<span class="room-topic">{{{RocketChatMarkdown roomTopic}}}</span>
</h2>
</header>
{{/unless}}
<div class="container-bars {{containerBarsShow unreadData uploading}}">
{{#with unreadData}}
{{#if since}}
{{#if count}}
<div class="unread-bar">
<button class="jump-to">
<span class="jump-to-large">{{_ "Jump_to_first_unread"}}</span>
<span class="jump-to-small">{{_ "Jump"}}</span>
</button>
<span class="unread-count-since">
{{_ "S_new_messages_since_s" count formatUnreadSince}}
</span>
<span class="unread-count">
{{_ "N_new_messages" count}}
</span>
<button class="mark-read">
{{_ "Mark_as_read"}}
</button>
</div>
{{/if}} {{/if}}
{{/if}} <i class="{{roomIcon}} status-{{userStatus}}"></i>
{{/with}} <span class="room-title">{{roomName}}</span>
{{#each uploading}} <span class="room-topic">{{{RocketChatMarkdown roomTopic}}}</span>
<div class="upload-progress {{#if error}}upload-error{{/if}}"> </h2>
{{#if error}} </header>
<div class="upload-progress-text"> {{/unless}}
{{error}} <div class="container-bars {{containerBarsShow unreadData uploading}}">
<button> {{#with unreadData}}
{{_ "close"}} {{#if since}}
</button> {{#if count}}
</div> <div class="unread-bar">
{{else}} <button class="jump-to">
<div class="upload-progress-progress" style="width: {{percentage}}%;"></div> <span class="jump-to-large">{{_ "Jump_to_first_unread"}}</span>
<div class="upload-progress-text"> <span class="jump-to-small">{{_ "Jump"}}</span>
{{name}}... {{percentage}}% </button>
<button> <span class="unread-count-since">
{{_ "cancel"}} {{_ "S_new_messages_since_s" count formatUnreadSince}}
</button> </span>
</div> <span class="unread-count">
{{_ "N_new_messages" count}}
</span>
<button class="mark-read">
{{_ "Mark_as_read"}}
</button>
</div>
{{/if}}
{{/if}} {{/if}}
</div> {{/with}}
{{/each}} {{#each uploading}}
</div> <div class="upload-progress {{#if error}}upload-error{{/if}}">
<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}}"> {{#if error}}
<div class="ticks-bar"></div> <div class="upload-progress-text">
<button class="new-message not"> {{error}}
<i class="icon-down-big"></i> <button>
{{_ "New_messages"}} {{_ "close"}}
</button> </button>
<div class="jump-recent {{#unless hasMoreNext}}not{{/unless}}"> </div>
<button>{{_ "Jump_to_recent_messages"}} <i class="icon-level-down"></i></button> {{else}}
</div> <div class="upload-progress-progress" style="width: {{percentage}}%;"></div>
{{#unless canPreview}} <div class="upload-progress-text">
<div class="content room-not-found"> {{name}}... {{percentage}}%
<div> <button>
{{_ "You_must_join_to_view_messages_in_this_channel"}} {{_ "cancel"}}
</button>
</div>
{{/if}}
</div> </div>
{{/each}}
</div>
<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}}">
<div class="ticks-bar"></div>
<button class="new-message not">
<i class="icon-down-big"></i>
{{_ "New_messages"}}
</button>
<div class="jump-recent {{#unless hasMoreNext}}not{{/unless}}">
<button>{{_ "Jump_to_recent_messages"}} <i class="icon-level-down"></i></button>
</div> </div>
{{/unless}} {{#unless canPreview}}
<div class="wrapper {{#if hasMoreNext}}has-more-next{{/if}} {{hideUsername}} {{hideAvatar}}"> <div class="content room-not-found">
<ul aria-live="polite"> <div>
{{#if canPreview}} {{_ "You_must_join_to_view_messages_in_this_channel"}}
{{#if hasMore}} </div>
</div>
{{/unless}}
<div class="wrapper {{#if hasMoreNext}}has-more-next{{/if}} {{hideUsername}} {{hideAvatar}}">
<ul aria-live="polite">
{{#if canPreview}}
{{#if hasMore}}
<li class="load-more">
{{> loading}}
</li>
{{else}}
<li class="start">
{{_ "Start_of_conversation"}}
</li>
{{/if}}
{{/if}}
{{#each messagesHistory}}
{{#nrr nrrargs 'message' .}}{{/nrr}}
{{/each}}
{{#if hasMoreNext}}
<li class="load-more"> <li class="load-more">
{{> loading}} {{> loading}}
</li> </li>
{{else}}
<li class="start">
{{_ "Start_of_conversation"}}
</li>
{{/if}} {{/if}}
{{/if}} </ul>
{{#each messagesHistory}} </div>
{{#nrr nrrargs 'message' .}}{{/nrr}}
{{/each}}
{{#if hasMoreNext}}
<li class="load-more">
{{> loading}}
</li>
{{/if}}
</ul>
</div> </div>
</div> <footer class="footer">
<footer class="footer"> {{> messageBox}}
{{> messageBox}} </footer>
</footer> </section>
</section> {{> flexTabBar template=flexTemplate data=flexData}}
<section class="flex-tab">
{{> Template.dynamic template=flexTemplate data=flexData}}
</section>
<div class="flex-tab-bar" role="toolbar">
{{> flexTabBar}}
</div>
</div> </div>
</div> </div>
</template> </template>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment