From 7def2a83481259af13cb30c70cdeb2530740ae18 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 7 Jul 2017 15:28:32 -0300 Subject: [PATCH 1/7] flex-tab now is side by side with message list --- .../rocketchat-theme/client/imports/base.css | 41 ++-- .../rocketchat-ui/client/views/app/room.html | 176 +++++++++--------- 2 files changed, 118 insertions(+), 99 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/base.css b/packages/rocketchat-theme/client/imports/base.css index 139776250008..e96b7aad2bbb 100644 --- a/packages/rocketchat-theme/client/imports/base.css +++ b/packages/rocketchat-theme/client/imports/base.css @@ -1561,7 +1561,7 @@ label.required::after { .fixed-title { display: flex; align-items: center; - position: absolute; + /*position: absolute;*/ flex-flow: row nowrap; padding: 0 10px 0 20px; border-width: 0 0 1px; @@ -2131,6 +2131,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; @@ -2155,7 +2165,6 @@ label.required::after { } & .footer { - position: absolute; padding: 8px 20px 0; border-width: 1px 0 0; z-index: 100; @@ -2314,11 +2323,11 @@ label.required::after { display: flex; align-items: center; overflow: hidden; - position: absolute; - right: 20px; + /*position: absolute;*/ + /*right: 20px;*/ opacity: 0.5; white-space: nowrap; - transition: opacity 0.2 linear; + transition: opacity 0.2s linear; & > * { margin: 0 3px; @@ -2518,7 +2527,7 @@ label.required::after { .messages-box { position: relative; - margin: 60px 20px 0 0; + /*margin: 60px 20px 0 0;*/ overflow: hidden; width: 100%; height: calc(100% - 130px); @@ -2640,7 +2649,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; } @@ -3024,6 +3033,7 @@ body:not(.is-cordova) { .flex-tab-container { display: flex; + flex: 0 0 41px; z-index: 2; border-width: 0 0 0 1px; @@ -4789,6 +4799,7 @@ a + br.only-after-a { right: 40px; border-width: 0 0 0 1px; height: 100%; + z-index: 100; } } @@ -4887,17 +4898,21 @@ a + br.only-after-a { } @media (width <= 440px) { + .flex-tab-container.opened .flex-tab { + left: 0; + width: auto; + } .flex-tab-container.opened { - position: absolute; - width: 100%; - height: 100%; - top: 0; + /*position: absolute;*/ + /*width: 100%;/*/ + /*top: 0;*/ left: 0; + /*z-index: 100;*/ - & .flex-tab { + /*& .flex-tab { position: relative; right: auto; - } + }*/ } } diff --git a/packages/rocketchat-ui/client/views/app/room.html b/packages/rocketchat-ui/client/views/app/room.html index fc15fdae2e24..789deb4923a9 100644 --- a/packages/rocketchat-ui/client/views/app/room.html +++ b/packages/rocketchat-ui/client/views/app/room.html @@ -34,100 +34,104 @@

{{/if}} {{/unless}} -
- {{#with unreadData}} - {{#if since}} - {{#if count}} -
- - - {{_ "S_new_messages_since_s" count formatUnreadSince}} - - - {{_ "N_new_messages" count}} - - -
- {{/if}} - {{/if}} - {{/with}} - {{#each uploading}} -
- {{#if error}} -
- {{error}} - -
- {{else}} -
-
- {{name}}... {{percentage}}% - +
+
+
+ {{#with unreadData}} + {{#if since}} + {{#if count}} +
+ + + {{_ "S_new_messages_since_s" count formatUnreadSince}} + + + {{_ "N_new_messages" count}} + + +
+ {{/if}} + {{/if}} + {{/with}} + {{#each uploading}} +
+ {{#if error}} +
+ {{error}} + +
+ {{else}} +
+
+ {{name}}... {{percentage}}% + +
+ {{/if}}
- {{/if}} + {{/each}}
- {{/each}} -
-
-
- -
- -
- {{#unless canPreview}} -
-
- {{_ "You_must_join_to_view_messages_in_this_channel"}} +
+
+ +
+
-
- {{/unless}} -
-
    - {{#if canPreview}} - {{#if hasMore}} -
  • - {{#if isLoading}} - {{> loading}} + {{#unless canPreview}} +
    +
    + {{_ "You_must_join_to_view_messages_in_this_channel"}} +
    +
    + {{/unless}} +
    +
      + {{#if canPreview}} + {{#if hasMore}} +
    • + {{#if isLoading}} + {{> loading}} + {{/if}} +
      • + {{else}} +
    • + {{_ "Start_of_conversation"}} +
      • {{/if}} - - {{else}} -
    • - {{_ "Start_of_conversation"}} -
      • - {{/if}} - {{/if}} - {{#each messagesHistory}} - {{#nrr nrrargs 'message' .}}{{/nrr}} - {{/each}} - {{#if hasMoreNext}} -
    • - {{#if isLoading}} - {{> loading}} {{/if}} -
      • - {{/if}} -
    + {{#each messagesHistory}} + {{#nrr nrrargs 'message' .}}{{/nrr}} + {{/each}} + {{#if hasMoreNext}} +
  • + {{#if isLoading}} + {{> loading}} + {{/if}} +
    • + {{/if}} +
+
+
+
+ {{> messageBox}} +
+ {{#with flexData}} + {{> flexTabBar}} + {{/with}}
-
- {{> messageBox}} -
- {{#with flexData}} - {{> flexTabBar}} - {{/with}}
From 3e4e783d04d5a640369a6260977553e4df9bcf88 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 7 Jul 2017 15:28:32 -0300 Subject: [PATCH 2/7] flex-tab now is side by side with message list --- .../rocketchat-theme/client/imports/base.css | 35 ++-- .../rocketchat-ui/client/views/app/room.html | 176 +++++++++--------- 2 files changed, 109 insertions(+), 102 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/base.css b/packages/rocketchat-theme/client/imports/base.css index 139776250008..435a051f94df 100644 --- a/packages/rocketchat-theme/client/imports/base.css +++ b/packages/rocketchat-theme/client/imports/base.css @@ -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; @@ -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; @@ -2155,7 +2164,6 @@ label.required::after { } & .footer { - position: absolute; padding: 8px 20px 0; border-width: 1px 0 0; z-index: 100; @@ -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; @@ -2518,7 +2524,6 @@ label.required::after { .messages-box { position: relative; - margin: 60px 20px 0 0; overflow: hidden; width: 100%; height: calc(100% - 130px); @@ -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; } @@ -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; @@ -4789,6 +4795,7 @@ a + br.only-after-a { right: 40px; border-width: 0 0 0 1px; height: 100%; + z-index: 100; } } @@ -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; } } diff --git a/packages/rocketchat-ui/client/views/app/room.html b/packages/rocketchat-ui/client/views/app/room.html index fc15fdae2e24..789deb4923a9 100644 --- a/packages/rocketchat-ui/client/views/app/room.html +++ b/packages/rocketchat-ui/client/views/app/room.html @@ -34,100 +34,104 @@

{{/if}} {{/unless}} -
- {{#with unreadData}} - {{#if since}} - {{#if count}} -
- - - {{_ "S_new_messages_since_s" count formatUnreadSince}} - - - {{_ "N_new_messages" count}} - - -
- {{/if}} - {{/if}} - {{/with}} - {{#each uploading}} -
- {{#if error}} -
- {{error}} - -
- {{else}} -
-
- {{name}}... {{percentage}}% - +
+
+
+ {{#with unreadData}} + {{#if since}} + {{#if count}} +
+ + + {{_ "S_new_messages_since_s" count formatUnreadSince}} + + + {{_ "N_new_messages" count}} + + +
+ {{/if}} + {{/if}} + {{/with}} + {{#each uploading}} +
+ {{#if error}} +
+ {{error}} + +
+ {{else}} +
+
+ {{name}}... {{percentage}}% + +
+ {{/if}}
- {{/if}} + {{/each}}
- {{/each}} -
-
-
- -
- -
- {{#unless canPreview}} -
-
- {{_ "You_must_join_to_view_messages_in_this_channel"}} +
+
+ +
+
-
- {{/unless}} -
-
    - {{#if canPreview}} - {{#if hasMore}} -
  • - {{#if isLoading}} - {{> loading}} + {{#unless canPreview}} +
    +
    + {{_ "You_must_join_to_view_messages_in_this_channel"}} +
    +
    + {{/unless}} +
    +
      + {{#if canPreview}} + {{#if hasMore}} +
    • + {{#if isLoading}} + {{> loading}} + {{/if}} +
      • + {{else}} +
    • + {{_ "Start_of_conversation"}} +
      • {{/if}} - - {{else}} -
    • - {{_ "Start_of_conversation"}} -
      • - {{/if}} - {{/if}} - {{#each messagesHistory}} - {{#nrr nrrargs 'message' .}}{{/nrr}} - {{/each}} - {{#if hasMoreNext}} -
    • - {{#if isLoading}} - {{> loading}} {{/if}} -
      • - {{/if}} -
    + {{#each messagesHistory}} + {{#nrr nrrargs 'message' .}}{{/nrr}} + {{/each}} + {{#if hasMoreNext}} +
  • + {{#if isLoading}} + {{> loading}} + {{/if}} +
    • + {{/if}} +
+
+
+
+ {{> messageBox}} +
+ {{#with flexData}} + {{> flexTabBar}} + {{/with}}
-
- {{> messageBox}} -
- {{#with flexData}} - {{> flexTabBar}} - {{/with}}
From 9a791b9b717a4805ac94d1e57fb2d7d0b0f0e3ea Mon Sep 17 00:00:00 2001 From: Martin Schoeler Date: Tue, 11 Jul 2017 14:53:15 -0300 Subject: [PATCH 3/7] Fix announcements bar --- packages/rocketchat-theme/client/imports/base.css | 1 - packages/rocketchat-ui/client/views/app/room.html | 13 ++++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/base.css b/packages/rocketchat-theme/client/imports/base.css index 435a051f94df..f3413ad490f5 100644 --- a/packages/rocketchat-theme/client/imports/base.css +++ b/packages/rocketchat-theme/client/imports/base.css @@ -1626,7 +1626,6 @@ label.required::after { } .announcement { - margin-top: 61px; height: 40px; line-height: 40px; overflow: hidden; diff --git a/packages/rocketchat-ui/client/views/app/room.html b/packages/rocketchat-ui/client/views/app/room.html index 789deb4923a9..b8c25bb60e0b 100644 --- a/packages/rocketchat-ui/client/views/app/room.html +++ b/packages/rocketchat-ui/client/views/app/room.html @@ -28,14 +28,17 @@

{{{RocketChatMarkdown roomTopic}}}

- {{#if showAnnouncement}} -
- {{{RocketChatMarkdown roomAnnouncement}}} -
- {{/if}} + {{/unless}}
+ {{#unless embeddedVersion}} + {{#if showAnnouncement}} +
+ {{{RocketChatMarkdown roomAnnouncement}}} +
+ {{/if}} + {{/unless}}
{{#with unreadData}} {{#if since}} From 7a76420b476aca9c6d2084db7adcc03c1648bc73 Mon Sep 17 00:00:00 2001 From: Martin Schoeler Date: Tue, 11 Jul 2017 15:27:07 -0300 Subject: [PATCH 4/7] remove margin on announcement --- packages/rocketchat-theme/client/imports/base.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/base.css b/packages/rocketchat-theme/client/imports/base.css index f3413ad490f5..f148ac9698d3 100644 --- a/packages/rocketchat-theme/client/imports/base.css +++ b/packages/rocketchat-theme/client/imports/base.css @@ -1638,10 +1638,6 @@ label.required::after { & ~ .container-bars { top: 95px; } - - & ~ .messages-box { - margin-top: 100px; - } } .cms-page { From 92246d2512c2f84f2f7f48493e6f62af112a433b Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Tue, 11 Jul 2017 19:22:10 -0300 Subject: [PATCH 5/7] fix scroll --- packages/rocketchat-theme/client/imports/base.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/base.css b/packages/rocketchat-theme/client/imports/base.css index f148ac9698d3..3799e4772934 100644 --- a/packages/rocketchat-theme/client/imports/base.css +++ b/packages/rocketchat-theme/client/imports/base.css @@ -1,3 +1,7 @@ +:root { + --header-height: 61px; +} + *, *::before, *::after { @@ -2012,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; @@ -2133,6 +2137,7 @@ label.required::after { &-main { width: 1px; flex: 1 1 1px; + position: relative; } & .room-topic { @@ -2304,7 +2309,6 @@ label.required::after { overflow: hidden; text-overflow: ellipsis; max-width: 100%; - z-index: 10; position: relative; background-color: #ffffff; } @@ -4789,7 +4793,7 @@ a + br.only-after-a { position: absolute; right: 40px; border-width: 0 0 0 1px; - height: 100%; + height: calc(100% - 61px); /* --header-height */ z-index: 100; } } From ee1c151d323d2398395dc8b05c555a68ed165c28 Mon Sep 17 00:00:00 2001 From: Martin Schoeler Date: Tue, 11 Jul 2017 19:56:25 -0300 Subject: [PATCH 6/7] Try to fix scroll on medium resolution --- packages/rocketchat-theme/client/imports/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rocketchat-theme/client/imports/base.css b/packages/rocketchat-theme/client/imports/base.css index 3799e4772934..d577e247200e 100644 --- a/packages/rocketchat-theme/client/imports/base.css +++ b/packages/rocketchat-theme/client/imports/base.css @@ -3230,6 +3230,7 @@ body:not(.is-cordova) { &.opened .flex-tab { display: block; + height: calc(100% - 61px); /* --header-height */ } } @@ -4793,7 +4794,6 @@ a + br.only-after-a { position: absolute; right: 40px; border-width: 0 0 0 1px; - height: calc(100% - 61px); /* --header-height */ z-index: 100; } } From 92f92ae3217096a2c1e3589e92b534724bc82556 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Wed, 12 Jul 2017 16:52:57 -0300 Subject: [PATCH 7/7] ticks-bar over flex-tab fixed --- packages/rocketchat-katex/package-lock.json | 15 +++++++++++++++ packages/rocketchat-theme/client/imports/base.css | 7 ++++--- 2 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 packages/rocketchat-katex/package-lock.json diff --git a/packages/rocketchat-katex/package-lock.json b/packages/rocketchat-katex/package-lock.json new file mode 100644 index 000000000000..46d4f6850522 --- /dev/null +++ b/packages/rocketchat-katex/package-lock.json @@ -0,0 +1,15 @@ +{ + "name": "rocketchat-katex", + "version": "1.0.0", + "lockfileVersion": 1, + "dependencies": { + "katex": { + "version": "https://registry.npmjs.org/katex/-/katex-0.7.1.tgz", + "integrity": "sha1-BrtSmO+tBeHnIoA1uo4VkfMGG48=" + }, + "match-at": { + "version": "https://registry.npmjs.org/match-at/-/match-at-0.1.0.tgz", + "integrity": "sha1-9WHncJ/5oQW4XMYsa47nwVvyTzE=" + } + } +} diff --git a/packages/rocketchat-theme/client/imports/base.css b/packages/rocketchat-theme/client/imports/base.css index d577e247200e..a4059075c2f9 100644 --- a/packages/rocketchat-theme/client/imports/base.css +++ b/packages/rocketchat-theme/client/imports/base.css @@ -2125,6 +2125,7 @@ label.required::after { .messages-container { position: relative; height: 100%; + width: 100%; top: 0; left: 0; z-index: 1; @@ -2135,8 +2136,8 @@ label.required::after { } &-main { - width: 1px; - flex: 1 1 1px; + flex: 1 1 auto; + width: 50%; position: relative; } @@ -2606,7 +2607,7 @@ label.required::after { position: absolute; right: 2px; height: 100%; - z-index: 10; + z-index: 1; pointer-events: none; & .tick {