Skip to content

Commit

Permalink
flex-tab now is side by side with message list
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggazzo
ggazzo committed Jul 7, 2017
1 parent 5207aac commit 3e4e783
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 102 deletions.
35 changes: 19 additions & 16 deletions packages/rocketchat-theme/client/imports/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1561,7 +1561,6 @@ label.required::after {
.fixed-title {
display: flex;
align-items: center;
position: absolute;
flex-flow: row nowrap;
padding: 0 10px 0 20px;
border-width: 0 0 1px;
Expand Down Expand Up @@ -2131,6 +2130,16 @@ label.required::after {
left: 0;
z-index: 1;

&-wrapper {
height: 100%;
display: flex;
}

&-main {
width: 1px;
flex: 1 1 1px;
}

& .room-topic {
font-size: 14px;
opacity: 0.4;
Expand All @@ -2155,7 +2164,6 @@ label.required::after {
}

& .footer {
position: absolute;
padding: 8px 20px 0;
border-width: 1px 0 0;
z-index: 100;
Expand Down Expand Up @@ -2314,11 +2322,9 @@ label.required::after {
display: flex;
align-items: center;
overflow: hidden;
position: absolute;
right: 20px;
opacity: 0.5;
white-space: nowrap;
transition: opacity 0.2 linear;
transition: opacity 0.2s linear;

& > * {
margin: 0 3px;
Expand Down Expand Up @@ -2518,7 +2524,6 @@ label.required::after {

.messages-box {
position: relative;
margin: 60px 20px 0 0;
overflow: hidden;
width: 100%;
height: calc(100% - 130px);
Expand Down Expand Up @@ -2640,7 +2645,7 @@ label.required::after {
font-size: 12px;
font-weight: 600;
text-align: center;
z-index: 10;
z-index: 1;
padding: 0 10px;
min-width: 140px;
}
Expand Down Expand Up @@ -3024,6 +3029,7 @@ body:not(.is-cordova) {

.flex-tab-container {
display: flex;
flex: 0 0 41px;
z-index: 2;
border-width: 0 0 0 1px;

Expand Down Expand Up @@ -4789,6 +4795,7 @@ a + br.only-after-a {
right: 40px;
border-width: 0 0 0 1px;
height: 100%;
z-index: 100;
}
}

Expand Down Expand Up @@ -4887,17 +4894,13 @@ a + br.only-after-a {
}

@media (width <= 440px) {
.flex-tab-container.opened {
position: absolute;
width: 100%;
height: 100%;
top: 0;
.flex-tab-container.opened .flex-tab {
left: 0;
width: auto;
}

& .flex-tab {
position: relative;
right: auto;
}
.flex-tab-container.opened {
left: 0;
}
}

Expand Down
176 changes: 90 additions & 86 deletions packages/rocketchat-ui/client/views/app/room.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,100 +34,104 @@ <h2>
</div>
{{/if}}
{{/unless}}
<div class="container-bars {{containerBarsShow unreadData uploading}}">
{{#with unreadData}}
{{#if since}}
{{#if count}}
<div class="unread-bar color-primary-action-color background-component-color">
<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}}
{{/with}}
{{#each uploading}}
<div class="upload-progress color-primary-action-color background-component-color {{#if error}}error-background error-border{{/if}}">
{{#if error}}
<div class="upload-progress-text">
{{error}}
<button>
{{_ "close"}}
</button>
</div>
{{else}}
<div class="upload-progress-progress" style="width: {{percentage}}%;"></div>
<div class="upload-progress-text">
{{name}}... {{percentage}}%
<button>
{{_ "cancel"}}
</button>
<div class="messages-container-wrapper">
<div class="messages-container-main">
<div class="container-bars {{containerBarsShow unreadData uploading}}">
{{#with unreadData}}
{{#if since}}
{{#if count}}
<div class="unread-bar color-primary-action-color background-component-color">
<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}}
{{/with}}
{{#each uploading}}
<div class="upload-progress color-primary-action-color background-component-color {{#if error}}error-background error-border{{/if}}">
{{#if error}}
<div class="upload-progress-text">
{{error}}
<button>
{{_ "close"}}
</button>
</div>
{{else}}
<div class="upload-progress-progress" style="width: {{percentage}}%;"></div>
<div class="upload-progress-text">
{{name}}... {{percentage}}%
<button>
{{_ "cancel"}}
</button>
</div>
{{/if}}
</div>
{{/if}}
{{/each}}
</div>
{{/each}}
</div>
<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}}">
<div class="ticks-bar"></div>
<button class="new-message background-primary-action-color color-content-background-color not">
<i class="icon-down-big"></i>
{{_ "New_messages"}}
</button>
<div class="jump-recent background-component-color {{#unless hasMoreNext}}not{{/unless}}">
<button>{{_ "Jump_to_recent_messages"}} <i class="icon-level-down"></i></button>
</div>
{{#unless canPreview}}
<div class="content room-not-found error-color">
<div>
{{_ "You_must_join_to_view_messages_in_this_channel"}}
<div class="messages-box {{#if selectable}}selectable{{/if}} {{viewMode}}">
<div class="ticks-bar"></div>
<button class="new-message background-primary-action-color color-content-background-color not">
<i class="icon-down-big"></i>
{{_ "New_messages"}}
</button>
<div class="jump-recent background-component-color {{#unless hasMoreNext}}not{{/unless}}">
<button>{{_ "Jump_to_recent_messages"}} <i class="icon-level-down"></i></button>
</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">
{{#if isLoading}}
{{> loading}}
{{#unless canPreview}}
<div class="content room-not-found error-color">
<div>
{{_ "You_must_join_to_view_messages_in_this_channel"}}
</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">
{{#if isLoading}}
{{> loading}}
{{/if}}
</li>
{{else}}
<li class="start color-info-font-color">
{{_ "Start_of_conversation"}}
</li>
{{/if}}
</li>
{{else}}
<li class="start color-info-font-color">
{{_ "Start_of_conversation"}}
</li>
{{/if}}
{{/if}}
{{#each messagesHistory}}
{{#nrr nrrargs 'message' .}}{{/nrr}}
{{/each}}
{{#if hasMoreNext}}
<li class="load-more">
{{#if isLoading}}
{{> loading}}
{{/if}}
</li>
{{/if}}
</ul>
{{#each messagesHistory}}
{{#nrr nrrargs 'message' .}}{{/nrr}}
{{/each}}
{{#if hasMoreNext}}
<li class="load-more">
{{#if isLoading}}
{{> loading}}
{{/if}}
</li>
{{/if}}
</ul>
</div>
</div>
<footer class="footer border-component-color">
{{> messageBox}}
</footer>
</div>
{{#with flexData}}
{{> flexTabBar}}
{{/with}}
</div>
<footer class="footer border-component-color">
{{> messageBox}}
</footer>
</section>
{{#with flexData}}
{{> flexTabBar}}
{{/with}}
</div>
</div>
</template>

0 comments on commit 3e4e783

Please sign in to comment.