Skip to content

Commit

Permalink
Merge pull request #7448 from RocketChat/flex-tab
Browse files Browse the repository at this point in the history 
[NEW] flex-tab now is side by side with message list
  • Loading branch information
@rodrigok
rodrigok committed Jul 13, 2017
2 parents 1f3fc29 + 74f96cf commit 475ed0a
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 118 deletions.
15 changes: 15 additions & 0 deletions packages/rocketchat-katex/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

55 changes: 29 additions & 26 deletions packages/rocketchat-theme/client/imports/base.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:root {
--header-height: 61px;
}

*,
*::before,
*::after {
Expand Down Expand Up @@ -1561,7 +1565,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 @@ -1627,7 +1630,6 @@ label.required::after {
}

.announcement {
margin-top: 61px;
height: 40px;
line-height: 40px;
overflow: hidden;
Expand All @@ -1640,10 +1642,6 @@ label.required::after {
& ~ .container-bars {
top: 95px;
}

& ~ .messages-box {
margin-top: 100px;
}
}

.cms-page {
Expand Down Expand Up @@ -2018,8 +2016,8 @@ label.required::after {

.container-bars {
position: absolute;
top: 55px;
z-index: 100;
top: 4px; /* --header-height */
z-index: 1;
font-weight: bold;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -2127,10 +2125,22 @@ label.required::after {
.messages-container {
position: relative;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 1;

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

&-main {
flex: 1 1 auto;
width: 50%;
position: relative;
}

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

& .footer {
position: absolute;
padding: 8px 20px 0;
border-width: 1px 0 0;
z-index: 100;
Expand Down Expand Up @@ -2301,7 +2310,6 @@ label.required::after {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
z-index: 10;
position: relative;
background-color: #ffffff;
}
Expand All @@ -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 @@ -2602,7 +2607,7 @@ label.required::after {
position: absolute;
right: 2px;
height: 100%;
z-index: 10;
z-index: 1;
pointer-events: none;

& .tick {
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 @@ -3225,6 +3231,7 @@ body:not(.is-cordova) {

&.opened .flex-tab {
display: block;
height: calc(100% - 61px); /* --header-height */
}
}

Expand Down Expand Up @@ -4784,7 +4791,7 @@ a + br.only-after-a {
position: absolute;
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
187 changes: 97 additions & 90 deletions packages/rocketchat-ui/client/views/app/room.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,106 +28,113 @@ <h2>
<span class="room-topic">{{{RocketChatMarkdown roomTopic}}}</span>
</h2>
</header>
{{#if showAnnouncement}}
<div class="fixed-title announcement">
{{{RocketChatMarkdown roomAnnouncement}}}
</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>
<div class="messages-container-wrapper">
<div class="messages-container-main">
{{#unless embeddedVersion}}
{{#if showAnnouncement}}
<div class="fixed-title announcement">
{{{RocketChatMarkdown roomAnnouncement}}}
</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>
{{/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>
{{/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>
Loading

0 comments on commit 475ed0a

Please sign in to comment.