소스 검색

refactor(keyboard-shortcuts) use jss instead of scss

master
Shahab 3 년 전
부모
커밋
0ce6fce58d
3개의 변경된 파일31개의 추가작업 그리고 13개의 파일을 삭제
  1. 0
    10
      css/_keyboard-shortcuts.scss
  2. 0
    1
      css/main.scss
  3. 31
    2
      react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js

+ 0
- 10
css/_keyboard-shortcuts.scss 파일 보기

1
-.shortcuts-list {
2
-    list-style-type: none;
3
-    padding: 0;
4
-
5
-    &__item {
6
-        display: flex;
7
-        justify-content: space-between;
8
-        margin-bottom: em(7, 14);
9
-    }
10
-}

+ 0
- 1
css/main.scss 파일 보기

57
 @import 'welcome_page_content';
57
 @import 'welcome_page_content';
58
 @import 'welcome_page_settings_toolbar';
58
 @import 'welcome_page_settings_toolbar';
59
 @import 'toolbars';
59
 @import 'toolbars';
60
-@import 'keyboard-shortcuts';
61
 @import 'redirect_page';
60
 @import 'redirect_page';
62
 @import 'components/form-control';
61
 @import 'components/form-control';
63
 @import 'components/link';
62
 @import 'components/link';

+ 31
- 2
react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js 파일 보기

1
 /* @flow */
1
 /* @flow */
2
 
2
 
3
 import Lozenge from '@atlaskit/lozenge';
3
 import Lozenge from '@atlaskit/lozenge';
4
+import { withStyles } from '@material-ui/core/styles';
5
+import clsx from 'clsx';
4
 import React, { Component } from 'react';
6
 import React, { Component } from 'react';
5
 
7
 
6
 import { Dialog } from '../../base/dialog';
8
 import { Dialog } from '../../base/dialog';
12
  */
14
  */
13
 type Props = {
15
 type Props = {
14
 
16
 
17
+    /**
18
+     * An object containing the CSS classes.
19
+     */
20
+    classes: Object,
21
+
15
     /**
22
     /**
16
      * A Map with keyboard keys as keys and translation keys as values.
23
      * A Map with keyboard keys as keys and translation keys as values.
17
      */
24
      */
23
     t: Function
30
     t: Function
24
 };
31
 };
25
 
32
 
33
+/**
34
+ * Creates the styles for the component.
35
+ *
36
+ * @param {Object} theme - The current UI theme.
37
+ *
38
+ * @returns {Object}
39
+ */
40
+const styles = theme => {
41
+    return {
42
+        list: {
43
+            listStyleType: 'none',
44
+            padding: 0,
45
+
46
+            '& .shortcuts-list__item': {
47
+                display: 'flex',
48
+                justifyContent: 'space-between',
49
+                marginBottom: theme.spacing(2)
50
+            }
51
+        }
52
+    };
53
+};
54
+
26
 /**
55
 /**
27
  * Implements a React {@link Component} which displays a dialog describing
56
  * Implements a React {@link Component} which displays a dialog describing
28
  * registered keyboard shortcuts.
57
  * registered keyboard shortcuts.
49
                 <div
78
                 <div
50
                     id = 'keyboard-shortcuts'>
79
                     id = 'keyboard-shortcuts'>
51
                     <ul
80
                     <ul
52
-                        className = 'shortcuts-list'
81
+                        className = { clsx('shortcuts-list', this.props.classes.list) }
53
                         id = 'keyboard-shortcuts-list'>
82
                         id = 'keyboard-shortcuts-list'>
54
                         { shortcuts }
83
                         { shortcuts }
55
                     </ul>
84
                     </ul>
96
     }
125
     }
97
 }
126
 }
98
 
127
 
99
-export default translate(KeyboardShortcutsDialog);
128
+export default translate(withStyles(styles)(KeyboardShortcutsDialog));

Loading…
취소
저장