浏览代码

feat(welcome): Add responsive text to go button

j8
Mihai Uscat 5 年前
父节点
当前提交
00161212c8
共有 2 个文件被更改,包括 27 次插入1 次删除
  1. 1
    0
      lang/main.json
  2. 26
    1
      react/features/welcome/components/WelcomePage.web.js

+ 1
- 0
lang/main.json 查看文件

733
         "enterRoomTitle": "Start a new meeting",
733
         "enterRoomTitle": "Start a new meeting",
734
         "roomNameAllowedChars": "Meeting name should not contain any of these characters: ?, &, :, ', \", %, #.",
734
         "roomNameAllowedChars": "Meeting name should not contain any of these characters: ?, &, :, ', \", %, #.",
735
         "go": "GO",
735
         "go": "GO",
736
+        "goSmall": "GO",
736
         "join": "JOIN",
737
         "join": "JOIN",
737
         "info": "Info",
738
         "info": "Info",
738
         "privacy": "Privacy",
739
         "privacy": "Privacy",

+ 26
- 1
react/features/welcome/components/WelcomePage.web.js 查看文件

18
  */
18
  */
19
 export const ROOM_NAME_VALIDATE_PATTERN_STR = '^[^?&:\u0022\u0027%#]+$';
19
 export const ROOM_NAME_VALIDATE_PATTERN_STR = '^[^?&:\u0022\u0027%#]+$';
20
 
20
 
21
+/**
22
+ * Maximum number of pixels corresponding to a mobile layout.
23
+ * @type {number}
24
+ */
25
+const WINDOW_WIDTH_THRESHOLD = 425;
26
+
21
 /**
27
 /**
22
  * The Web container rendering the welcome page.
28
  * The Web container rendering the welcome page.
23
  *
29
  *
152
         const { APP_NAME } = interfaceConfig;
158
         const { APP_NAME } = interfaceConfig;
153
         const showAdditionalContent = this._shouldShowAdditionalContent();
159
         const showAdditionalContent = this._shouldShowAdditionalContent();
154
         const showAdditionalToolbarContent = this._shouldShowAdditionalToolbarContent();
160
         const showAdditionalToolbarContent = this._shouldShowAdditionalToolbarContent();
161
+        const showResponsiveText = this._shouldShowResponsiveText();
155
 
162
 
156
         return (
163
         return (
157
             <div
164
             <div
205
                             className = 'welcome-page-button'
212
                             className = 'welcome-page-button'
206
                             id = 'enter_room_button'
213
                             id = 'enter_room_button'
207
                             onClick = { this._onFormSubmit }>
214
                             onClick = { this._onFormSubmit }>
208
-                            { t('welcomepage.go') }
215
+                            {
216
+                                showResponsiveText
217
+                                    ? t('welcomepage.goSmall')
218
+                                    : t('welcomepage.go')
219
+                            }
209
                         </div>
220
                         </div>
210
                     </div>
221
                     </div>
211
                     { this._renderTabs() }
222
                     { this._renderTabs() }
362
             && this._additionalToolbarContentTemplate.content
373
             && this._additionalToolbarContentTemplate.content
363
             && this._additionalToolbarContentTemplate.innerHTML.trim();
374
             && this._additionalToolbarContentTemplate.innerHTML.trim();
364
     }
375
     }
376
+
377
+    /**
378
+     * Returns whether or not the screen has a size smaller than a custom margin
379
+     * and therefore display different text in the go button.
380
+     *
381
+     * @private
382
+     * @returns {boolean}
383
+     */
384
+    _shouldShowResponsiveText() {
385
+        const { innerWidth } = window;
386
+
387
+        return innerWidth <= WINDOW_WIDTH_THRESHOLD;
388
+    }
389
+
365
 }
390
 }
366
 
391
 
367
 export default translate(connect(_mapStateToProps)(WelcomePage));
392
 export default translate(connect(_mapStateToProps)(WelcomePage));

正在加载...
取消
保存