Przeglądaj źródła

fix(Chat): Fix modals displaying improperly due to chat.

* Adjust chat font size.
* Adjust invite more button and text size.
* Remove useless constant.
master
Mihai-Andrei Uscat 4 lat temu
rodzic
commit
3972e076f0
No account linked to committer's email address

+ 9
- 19
css/_atlaskit_overrides.scss Wyświetl plik

113
     }
113
     }
114
 }
114
 }
115
 
115
 
116
-@media (min-width: 580px) and (max-width: 680px) {
117
-    .mobile-browser {
118
-        &.shift-right .focus-lock > div > div {
119
-            @include full-size-modal-positioner();
120
-        }
121
-
122
-        &.shift-right .focus-lock [role="dialog"] {
123
-            @include full-size-modal-dialog();
124
-        }
116
+@media (max-width: 580px) {
117
+    // Override Atlaskit inline style for the modal background.
118
+    // Important is unfortunately needed for that.
119
+    .shift-right .focus-lock [role="dialog"][style] {
120
+        background-color: $chatBackgroundColor !important;
125
     }
121
     }
126
-}
127
-
128
-// Override Atlaskit inline style for the modal background.
129
-// Important is unfortunately needed for that.
130
-.shift-right .focus-lock [role="dialog"][style] {
131
-    background-color: $chatBackgroundColor !important;
132
-}
133
 
122
 
134
-// Remove Atlaskit padding from the chat dialog.
135
-.shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
136
-    padding: 0;
123
+    // Remove Atlaskit padding from the chat dialog.
124
+    .shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
125
+        padding: 0;
126
+    }
137
 }
127
 }
138
 
128
 
139
 div.Tooltip {
129
 div.Tooltip {

+ 14
- 5
css/_chat.scss Wyświetl plik

129
 
129
 
130
     &.populated {
130
     &.populated {
131
         #chat-input {
131
         #chat-input {
132
-            &:focus-within {
133
-                border: 1px solid #619CF4;
134
-            }
135
-
136
             .send-button {
132
             .send-button {
137
                 background: #1B67EC;
133
                 background: #1B67EC;
138
                 cursor: pointer;
134
                 cursor: pointer;
161
     padding: 4px;
157
     padding: 4px;
162
     border-radius: 3px;
158
     border-radius: 3px;
163
 
159
 
160
+    &:focus-within {
161
+        border: 1px solid #619CF4;
162
+    }
163
+
164
     * {
164
     * {
165
         background-color: transparent;
165
         background-color: transparent;
166
     }
166
     }
214
     border-radius:0;
214
     border-radius:0;
215
     box-shadow: none;
215
     box-shadow: none;
216
     color: white;
216
     color: white;
217
-    font-size: 15px;
217
+    font-size: 14px;
218
     padding: 10px;
218
     padding: 10px;
219
     overflow-y: auto;
219
     overflow-y: auto;
220
     resize: none;
220
     resize: none;
271
             height: 48px;
271
             height: 48px;
272
         }
272
         }
273
     }
273
     }
274
+
275
+    #usermsg {
276
+        font-size: 16px;
277
+    }
278
+
279
+    .chatmessage .usermessage {
280
+        font-size: 16px;
281
+    }
274
 }
282
 }
275
 
283
 
276
 .sideToolbarContainer {
284
 .sideToolbarContainer {
309
 
317
 
310
     .usermessage {
318
     .usermessage {
311
         white-space: pre-wrap;
319
         white-space: pre-wrap;
320
+        font-size: 14px;
312
     }
321
     }
313
 
322
 
314
     &.error {
323
     &.error {

+ 14
- 3
css/modals/invite/_invite_more.scss Wyświetl plik

16
         background: rgba(0, 0, 0, 0.7);
16
         background: rgba(0, 0, 0, 0.7);
17
         border-radius: 8px;
17
         border-radius: 8px;
18
         color: #fff;
18
         color: #fff;
19
-        font-size: 16px;
19
+        font-size: 14px;
20
         line-height: 24px;
20
         line-height: 24px;
21
         font-weight: 600;
21
         font-weight: 600;
22
     }
22
     }
32
     &-button {
32
     &-button {
33
         display: flex;
33
         display: flex;
34
         max-width: 100%;
34
         max-width: 100%;
35
-        height: 48px;
35
+        height: 40px;
36
         box-sizing: border-box;
36
         box-sizing: border-box;
37
-        padding: 12px 16px;
37
+        padding: 8px 16px;
38
         background: #0376DA;
38
         background: #0376DA;
39
         border-radius: 3px;
39
         border-radius: 3px;
40
         cursor: pointer;
40
         cursor: pointer;
207
         }
207
         }
208
     }
208
     }
209
 }
209
 }
210
+
211
+.mobile-browser {
212
+    .invite-more-content {
213
+        font-size: 16px;
214
+    }
215
+
216
+    .invite-more-button {
217
+        height: 48px;
218
+        padding: 12px 16px;
219
+    }
220
+}

+ 2
- 5
react/features/chat/components/AbstractChat.js Wyświetl plik

3
 import { Component } from 'react';
3
 import { Component } from 'react';
4
 import type { Dispatch } from 'redux';
4
 import type { Dispatch } from 'redux';
5
 
5
 
6
-import { isMobileBrowser } from '../../base/environment/utils';
7
 import { getLocalParticipant } from '../../base/participants';
6
 import { getLocalParticipant } from '../../base/participants';
8
 import { sendMessage } from '../actions';
7
 import { sendMessage } from '../actions';
9
-import { DESKTOP_SMALL_WIDTH_THRESHOLD, MOBILE_SMALL_WIDTH_THRESHOLD } from '../constants';
8
+import { SMALL_WIDTH_THRESHOLD } from '../constants';
10
 
9
 
11
 /**
10
 /**
12
  * The type of the React {@code Component} props of {@code AbstractChat}.
11
  * The type of the React {@code Component} props of {@code AbstractChat}.
106
     const _localParticipant = getLocalParticipant(state);
105
     const _localParticipant = getLocalParticipant(state);
107
 
106
 
108
     return {
107
     return {
109
-        _isModal: isMobileBrowser()
110
-            ? window.innerWidth <= MOBILE_SMALL_WIDTH_THRESHOLD
111
-            : window.innerWidth <= DESKTOP_SMALL_WIDTH_THRESHOLD,
108
+        _isModal: window.innerWidth <= SMALL_WIDTH_THRESHOLD,
112
         _isOpen: isOpen,
109
         _isOpen: isOpen,
113
         _messages: messages,
110
         _messages: messages,
114
         _showNamePrompt: !_localParticipant.name
111
         _showNamePrompt: !_localParticipant.name

+ 1
- 3
react/features/chat/constants.js Wyświetl plik

30
  */
30
  */
31
 export const MESSAGE_TYPE_REMOTE = 'remote';
31
 export const MESSAGE_TYPE_REMOTE = 'remote';
32
 
32
 
33
-export const DESKTOP_SMALL_WIDTH_THRESHOLD = 580;
34
-
35
-export const MOBILE_SMALL_WIDTH_THRESHOLD = 680;
33
+export const SMALL_WIDTH_THRESHOLD = 580;

Ładowanie…
Anuluj
Zapisz