goblin-desktop 2.1.2 → 2.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (143) hide show
  1. package/.editorconfig +9 -9
  2. package/.eslintrc.js +28 -28
  3. package/.zou-flow +3 -3
  4. package/README.md +108 -108
  5. package/builders/builders.js +3 -3
  6. package/builders/wizard.js +457 -457
  7. package/contexts.js +13 -13
  8. package/desktop-manager.js +10 -10
  9. package/desktop-window.js +13 -13
  10. package/desktop.js +13 -13
  11. package/lib/service.js +137 -137
  12. package/package.json +36 -36
  13. package/password-wizard.js +13 -13
  14. package/quest-run-wizard.js +13 -13
  15. package/taskbar.js +13 -13
  16. package/widgets/audio/sfx.js +177 -177
  17. package/widgets/board/view.js +37 -37
  18. package/widgets/board/widget.js +65 -65
  19. package/widgets/contexts/logic-handlers.js +36 -36
  20. package/widgets/contexts/service.js +40 -40
  21. package/widgets/contexts/view.js +22 -22
  22. package/widgets/contexts/widget.js +147 -147
  23. package/widgets/datagrid/datagrid-entity.js +82 -82
  24. package/widgets/datagrid/datagrid-headers.js +272 -272
  25. package/widgets/datagrid/styles.js +13 -13
  26. package/widgets/datagrid/widget.js +192 -192
  27. package/widgets/datagrid-cell/styles.js +52 -52
  28. package/widgets/datagrid-cell/widget.js +41 -41
  29. package/widgets/datagrid-item/styles.js +15 -15
  30. package/widgets/datagrid-item/widget.js +74 -74
  31. package/widgets/default/view.js +142 -142
  32. package/widgets/desktop/compensator.js +9 -9
  33. package/widgets/desktop/logic-handlers.js +237 -237
  34. package/widgets/desktop/reducer.js +35 -35
  35. package/widgets/desktop/service.js +828 -828
  36. package/widgets/desktop/styles.js +28 -28
  37. package/widgets/desktop/widget.js +175 -175
  38. package/widgets/desktop-clock/styles.js +69 -69
  39. package/widgets/desktop-clock/widget.js +387 -387
  40. package/widgets/desktop-clock-clock/styles.js +56 -56
  41. package/widgets/desktop-clock-clock/widget.js +96 -96
  42. package/widgets/desktop-clock-menu/styles.js +129 -129
  43. package/widgets/desktop-clock-menu/widget.js +63 -63
  44. package/widgets/desktop-connection-status/reducer.js +15 -15
  45. package/widgets/desktop-connection-status/styles.js +44 -44
  46. package/widgets/desktop-connection-status/widget.js +129 -129
  47. package/widgets/desktop-content/widget.js +68 -68
  48. package/widgets/desktop-footer/reducer.js +31 -31
  49. package/widgets/desktop-footer/styles.js +36 -36
  50. package/widgets/desktop-footer/widget.js +52 -52
  51. package/widgets/desktop-monitors/styles.js +155 -155
  52. package/widgets/desktop-monitors/widget.js +272 -272
  53. package/widgets/desktop-notebook/styles.js +155 -155
  54. package/widgets/desktop-notebook/widget.js +252 -252
  55. package/widgets/desktop-notifications/styles.js +147 -147
  56. package/widgets/desktop-notifications/widget.js +231 -231
  57. package/widgets/desktop-scale/reducer.js +15 -15
  58. package/widgets/desktop-scale/styles.js +48 -48
  59. package/widgets/desktop-scale/widget.js +172 -172
  60. package/widgets/desktop-state-monitor/styles.js +72 -72
  61. package/widgets/desktop-state-monitor/widget.js +123 -123
  62. package/widgets/desktop-taskbar/widget.js +57 -57
  63. package/widgets/desktop-themes-menu/widget.js +121 -121
  64. package/widgets/desktop-topbar/widget.js +201 -201
  65. package/widgets/desktop-window/service.js +56 -56
  66. package/widgets/desktop-window/styles.js +22 -22
  67. package/widgets/desktop-window/widget.js +70 -70
  68. package/widgets/detail/compensator.js +17 -17
  69. package/widgets/detail/view.js +40 -40
  70. package/widgets/detail/widget.js +125 -125
  71. package/widgets/editor/widget.js +83 -83
  72. package/widgets/entity-alerts/styles.js +77 -77
  73. package/widgets/entity-alerts/widget.js +328 -328
  74. package/widgets/entity-list/styles.js +66 -66
  75. package/widgets/entity-list/view.js +36 -36
  76. package/widgets/entity-list/widget.js +209 -209
  77. package/widgets/entity-list-item/widget.js +68 -68
  78. package/widgets/entity-row/styles.js +105 -105
  79. package/widgets/entity-row/widget.js +524 -524
  80. package/widgets/entity-row-button/styles.js +46 -46
  81. package/widgets/entity-row-button/widget.js +57 -57
  82. package/widgets/entity-view/reducer.js +20 -20
  83. package/widgets/entity-view/styles.js +90 -90
  84. package/widgets/entity-view/widget.js +516 -516
  85. package/widgets/facet-checkbox/styles.js +17 -17
  86. package/widgets/facet-checkbox/widget.js +43 -43
  87. package/widgets/facet-filter/widget.js +94 -94
  88. package/widgets/facet-filter-add/styles.js +30 -30
  89. package/widgets/facet-filter-add/widget.js +105 -105
  90. package/widgets/facet-filter-button/styles.js +74 -74
  91. package/widgets/facet-filter-button/widget.js +214 -214
  92. package/widgets/facet-filter-list-dialog/styles.js +59 -59
  93. package/widgets/facet-filter-list-dialog/widget.js +253 -253
  94. package/widgets/facet-filter-list-dialog-footer/styles.js +22 -22
  95. package/widgets/facet-filter-list-dialog-footer/widget.js +105 -105
  96. package/widgets/facet-filter-range-dialog/styles.js +82 -82
  97. package/widgets/facet-filter-range-dialog/widget.js +399 -399
  98. package/widgets/facet-filter-range-dialog-footer/styles.js +22 -22
  99. package/widgets/facet-filter-range-dialog-footer/widget.js +182 -182
  100. package/widgets/gamepad/widget.js +75 -75
  101. package/widgets/helpers/facet-helpers.js +105 -105
  102. package/widgets/hinter/reducer.js +35 -35
  103. package/widgets/hinter/styles.js +79 -79
  104. package/widgets/hinter/view.js +31 -31
  105. package/widgets/hinter/widget.js +291 -291
  106. package/widgets/junction/styles.js +22 -22
  107. package/widgets/junction/widget.js +50 -50
  108. package/widgets/main-tab-menu/styles.js +17 -17
  109. package/widgets/main-tab-menu/widget.js +136 -136
  110. package/widgets/map/view.js +49 -49
  111. package/widgets/map/widget.js +65 -65
  112. package/widgets/monitor/reducer.js +15 -15
  113. package/widgets/monitor/widget.js +66 -66
  114. package/widgets/navigating-layer/widget.js +25 -25
  115. package/widgets/notifications-button/widget.js +44 -44
  116. package/widgets/password-wizard/service.js +53 -53
  117. package/widgets/password-wizard/ui.js +66 -66
  118. package/widgets/plugin/reducer.js +19 -19
  119. package/widgets/plugin/styles.js +294 -294
  120. package/widgets/plugin/widget.js +638 -637
  121. package/widgets/quest-run-wizard/service.js +49 -49
  122. package/widgets/quest-run-wizard/ui.js +25 -25
  123. package/widgets/search/styles.js +80 -80
  124. package/widgets/search/widget.js +285 -285
  125. package/widgets/simple/view.js +29 -29
  126. package/widgets/status-filters/widget.js +121 -121
  127. package/widgets/tab/styles.js +16 -16
  128. package/widgets/tab/widget.js +89 -89
  129. package/widgets/tab-content/widget.js +35 -35
  130. package/widgets/tabs/widget.js +48 -48
  131. package/widgets/taskbar/service.js +99 -99
  132. package/widgets/taskbar/view.js +24 -24
  133. package/widgets/taskbar/widget.js +167 -167
  134. package/widgets/widget-doc-caller/reducer.js +15 -15
  135. package/widgets/widget-doc-caller/styles.js +20 -20
  136. package/widgets/widget-doc-caller/widget.js +55 -55
  137. package/widgets/wizard/widget.js +299 -299
  138. package/widgets/wizard-buttons/widget.js +111 -111
  139. package/widgets/workitem/styles.js +281 -281
  140. package/widgets/workitem/view.js +62 -62
  141. package/widgets/workitem/widget.js +972 -972
  142. package/widgets/workitem-dialog/widget.js +86 -86
  143. package/widgets/workitem-fields/widget.js +63 -63
@@ -1,31 +1,31 @@
1
- //T:2019-02-27
2
- import {fromJS} from 'immutable';
3
-
4
- const initialState = fromJS({
5
- showPrompt: false,
6
- widgetsCache: {},
7
- });
8
-
9
- const WIDGETS_CACHE_LIMIT = 128;
10
-
11
- export default (state = initialState, action = {}) => {
12
- switch (action.type) {
13
- /* Limited cache in size to store values for some widgets like for example
14
- * the ScrollableContainer. Because this cache is limited, it's possible
15
- * to lose the data at any time.
16
- */
17
- case 'WIDGET_CACHE': {
18
- const id = action.widgetId;
19
- if (state.has(`widgetsCache.${id}`)) {
20
- return state.set(`widgetsCache.${id}`, action.value);
21
- }
22
- let widgetsCache = state.get('widgetsCache');
23
- if (widgetsCache.size >= WIDGETS_CACHE_LIMIT) {
24
- const _id = widgetsCache.keySeq().first();
25
- state = state.del(`widgetsCache.${_id}`);
26
- }
27
- return state.set(`widgetsCache.${id}`, action.value);
28
- }
29
- }
30
- return state;
31
- };
1
+ //T:2019-02-27
2
+ import {fromJS} from 'immutable';
3
+
4
+ const initialState = fromJS({
5
+ showPrompt: false,
6
+ widgetsCache: {},
7
+ });
8
+
9
+ const WIDGETS_CACHE_LIMIT = 128;
10
+
11
+ export default (state = initialState, action = {}) => {
12
+ switch (action.type) {
13
+ /* Limited cache in size to store values for some widgets like for example
14
+ * the ScrollableContainer. Because this cache is limited, it's possible
15
+ * to lose the data at any time.
16
+ */
17
+ case 'WIDGET_CACHE': {
18
+ const id = action.widgetId;
19
+ if (state.has(`widgetsCache.${id}`)) {
20
+ return state.set(`widgetsCache.${id}`, action.value);
21
+ }
22
+ let widgetsCache = state.get('widgetsCache');
23
+ if (widgetsCache.size >= WIDGETS_CACHE_LIMIT) {
24
+ const _id = widgetsCache.keySeq().first();
25
+ state = state.del(`widgetsCache.${_id}`);
26
+ }
27
+ return state.set(`widgetsCache.${id}`, action.value);
28
+ }
29
+ }
30
+ return state;
31
+ };
@@ -1,36 +1,36 @@
1
- /******************************************************************************/
2
-
3
- export default function styles(theme) {
4
- const footer = {
5
- position: 'relative',
6
- minHeight: theme.shapes.footerHeight,
7
- maxHeight: theme.shapes.footerHeight,
8
- display: 'flex',
9
- flexDirection: 'row',
10
- flexGrow: 0,
11
- justifyContent: 'flex-start',
12
- alignItems: 'center',
13
- backgroundColor: theme.palette.footerBackground,
14
- top: '0px',
15
- transition: 'all 1s ease-out',
16
- };
17
-
18
- const footerHidden = {
19
- ...footer,
20
- top: theme.shapes.footerHeight,
21
- };
22
-
23
- const sajex = {
24
- flexGrow: 1,
25
- };
26
-
27
- /******************************************************************************/
28
-
29
- return {
30
- footer,
31
- footerHidden,
32
- sajex,
33
- };
34
- }
35
-
36
- /******************************************************************************/
1
+ /******************************************************************************/
2
+
3
+ export default function styles(theme) {
4
+ const footer = {
5
+ position: 'relative',
6
+ minHeight: theme.shapes.footerHeight,
7
+ maxHeight: theme.shapes.footerHeight,
8
+ display: 'flex',
9
+ flexDirection: 'row',
10
+ flexGrow: 0,
11
+ justifyContent: 'flex-start',
12
+ alignItems: 'center',
13
+ backgroundColor: theme.palette.footerBackground,
14
+ top: '0px',
15
+ transition: 'all 1s ease-out',
16
+ };
17
+
18
+ const footerHidden = {
19
+ ...footer,
20
+ top: theme.shapes.footerHeight,
21
+ };
22
+
23
+ const sajex = {
24
+ flexGrow: 1,
25
+ };
26
+
27
+ /******************************************************************************/
28
+
29
+ return {
30
+ footer,
31
+ footerHidden,
32
+ sajex,
33
+ };
34
+ }
35
+
36
+ /******************************************************************************/
@@ -1,52 +1,52 @@
1
- //T:2019-02-27
2
- import React from 'react';
3
- import Widget from 'goblin-laboratory/widgets/widget';
4
- import NabuToolbar from 'goblin-nabu/widgets/nabu-toolbar/widget';
5
- import DesktopStateMonitor from 'goblin-desktop/widgets/desktop-state-monitor/widget';
6
- import DesktopMonitors from 'goblin-desktop/widgets/desktop-monitors/widget';
7
- import DesktopNotebook from 'goblin-desktop/widgets/desktop-notebook/widget';
8
- import DesktopClock from 'goblin-desktop/widgets/desktop-clock/widget';
9
- import Monitor from 'goblin-desktop/widgets/monitor/widget';
10
- import WidgetDocCaller from 'goblin-desktop/widgets/widget-doc-caller/widget';
11
- import {getToolbarId} from 'goblin-nabu/lib/helpers.js';
12
- const NabuToolbarConnected = Widget.Wired(NabuToolbar)();
13
-
14
- /******************************************************************************/
15
-
16
- export default class DesktopFooter extends Widget {
17
- constructor() {
18
- super(...arguments);
19
- }
20
-
21
- /******************************************************************************/
22
-
23
- render() {
24
- const footerClass = this.props.showFooter
25
- ? this.styles.classNames.footer
26
- : this.styles.classNames.footerHidden;
27
-
28
- return (
29
- <div className={footerClass}>
30
- <NabuToolbarConnected
31
- id={getToolbarId(this.props.id)}
32
- desktopId={this.props.id}
33
- />
34
- <Monitor id={this.props.id + '$monitor'} />
35
- <WidgetDocCaller
36
- desktopId={this.props.id}
37
- id={this.props.id + '$widget-doc-caller'}
38
- />
39
- <div className={this.styles.classNames.sajex} />
40
- <DesktopStateMonitor id={this.props.id} />
41
- <DesktopNotebook id={this.props.id} desktopId={this.props.id} />
42
- <DesktopMonitors
43
- id={`activity-monitor@${this.props.id}`}
44
- desktopId={this.props.id}
45
- />
46
- <DesktopClock />
47
- </div>
48
- );
49
- }
50
- }
51
-
52
- /******************************************************************************/
1
+ //T:2019-02-27
2
+ import React from 'react';
3
+ import Widget from 'goblin-laboratory/widgets/widget';
4
+ import NabuToolbar from 'goblin-nabu/widgets/nabu-toolbar/widget';
5
+ import DesktopStateMonitor from 'goblin-desktop/widgets/desktop-state-monitor/widget';
6
+ import DesktopMonitors from 'goblin-desktop/widgets/desktop-monitors/widget';
7
+ import DesktopNotebook from 'goblin-desktop/widgets/desktop-notebook/widget';
8
+ import DesktopClock from 'goblin-desktop/widgets/desktop-clock/widget';
9
+ import Monitor from 'goblin-desktop/widgets/monitor/widget';
10
+ import WidgetDocCaller from 'goblin-desktop/widgets/widget-doc-caller/widget';
11
+ import {getToolbarId} from 'goblin-nabu/lib/helpers.js';
12
+ const NabuToolbarConnected = Widget.Wired(NabuToolbar)();
13
+
14
+ /******************************************************************************/
15
+
16
+ export default class DesktopFooter extends Widget {
17
+ constructor() {
18
+ super(...arguments);
19
+ }
20
+
21
+ /******************************************************************************/
22
+
23
+ render() {
24
+ const footerClass = this.props.showFooter
25
+ ? this.styles.classNames.footer
26
+ : this.styles.classNames.footerHidden;
27
+
28
+ return (
29
+ <div className={footerClass}>
30
+ <NabuToolbarConnected
31
+ id={getToolbarId(this.props.id)}
32
+ desktopId={this.props.id}
33
+ />
34
+ <Monitor id={this.props.id + '$monitor'} />
35
+ <WidgetDocCaller
36
+ desktopId={this.props.id}
37
+ id={this.props.id + '$widget-doc-caller'}
38
+ />
39
+ <div className={this.styles.classNames.sajex} />
40
+ <DesktopStateMonitor id={this.props.id} />
41
+ <DesktopNotebook id={this.props.id} desktopId={this.props.id} />
42
+ <DesktopMonitors
43
+ id={`activity-monitor@${this.props.id}`}
44
+ desktopId={this.props.id}
45
+ />
46
+ <DesktopClock />
47
+ </div>
48
+ );
49
+ }
50
+ }
51
+
52
+ /******************************************************************************/
@@ -1,155 +1,155 @@
1
- import {ColorManipulator, Unit} from 'goblin-theme';
2
-
3
- /******************************************************************************/
4
-
5
- export default function styles(theme) {
6
- const look = theme.look.name;
7
-
8
- const desktopMonitors = {
9
- position: 'relative',
10
- height: theme.shapes.footerHeight,
11
- display: 'flex',
12
- flexDirection: 'row',
13
- justifyContent: 'flex-end',
14
- alignItems: 'center',
15
- };
16
-
17
- /******************************************************************************/
18
-
19
- let monitorShowed;
20
- let monitorHidden;
21
- let monitorSajex;
22
- let monitorResizeButton;
23
- let monitorResizeGlyph;
24
-
25
- //---------\
26
- // MODERN >
27
- //---------/
28
- if (look === 'modern') {
29
- monitorShowed = {
30
- zIndex: 20,
31
- position: 'fixed',
32
- right: '0px',
33
- bottom: theme.shapes.footerHeight,
34
- transitionProperty: 'bottom',
35
- transition: '0.3s ease-out',
36
- };
37
-
38
- monitorHidden = {
39
- ...monitorShowed,
40
- bottom: '-500px',
41
- };
42
-
43
- monitorResizeButton = {
44
- 'position': 'absolute',
45
- 'left': '0px',
46
- 'top': '0px',
47
- 'width': '30px',
48
- 'height': '30px',
49
- 'borderRadius': '15px',
50
- 'display': 'flex',
51
- 'justifyContent': 'center',
52
- 'alignItems': 'center',
53
- 'color': 'white',
54
- 'backgroundColor': ColorManipulator.emphasize(theme.palette.chrome, 0.3),
55
- 'transform': 'scale(0.5)',
56
- 'transition': '0.3s ease-out',
57
- ':hover': {
58
- transform: 'scale(1.5)',
59
- backgroundColor: theme.palette.chrome,
60
- },
61
- ':hover .glyph-hover': {
62
- opacity: 1,
63
- },
64
- };
65
-
66
- monitorResizeGlyph = {
67
- display: 'flex',
68
- justifyContent: 'center',
69
- alignItems: 'center',
70
- opacity: 0,
71
- };
72
- }
73
-
74
- //--------\
75
- // RETRO >
76
- //--------/
77
- if (look === 'retro') {
78
- monitorShowed = {
79
- zIndex: 20,
80
- position: 'fixed',
81
- right: '10px',
82
- bottom: Unit.add(theme.shapes.footerHeight, '10px'),
83
- transitionProperty: 'bottom',
84
- transition: theme.transitions.retroOpenTransition,
85
- transitionTimingFunction: theme.transitions.retroOpenFunction,
86
- };
87
-
88
- monitorHidden = {
89
- ...monitorShowed,
90
- bottom: '-500px',
91
- transition: theme.transitions.retroCloseTransition,
92
- transitionTimingFunction: theme.transitions.retroCloseFunction,
93
- };
94
-
95
- monitorSajex = {
96
- width: '10px',
97
- };
98
-
99
- monitorResizeButton = {
100
- 'position': 'absolute',
101
- 'left': '-10px',
102
- 'top': '-10px',
103
- 'width': '30px',
104
- 'height': '30px',
105
- 'borderRadius': '30px',
106
- 'borderTop': '3px solid transparent',
107
- 'borderLeft': '3px solid transparent',
108
- 'borderBottom': '3px solid transparent',
109
- 'borderRight': '3px solid transparent',
110
- 'display': 'flex',
111
- 'justifyContent': 'center',
112
- 'alignItems': 'center',
113
- 'color': '#12a279',
114
- 'boxShadow': '0px 0px 0px 0px transparent',
115
- 'transition': theme.transitions.retroCloseTransition,
116
- 'transitionTimingFunction': theme.transitions.retroCloseFunction,
117
- ':hover': {
118
- transform: 'scale(1.5)',
119
- borderTop: '3px solid #ccc',
120
- borderLeft: '3px solid #ccc',
121
- borderBottom: '3px solid #888',
122
- borderRight: '3px solid #888',
123
- backgroundColor: '#111',
124
- boxShadow: '5px 5px 15px 5px black',
125
- transition: theme.transitions.retroOpenTransition,
126
- transitionTimingFunction: theme.transitions.retroOpenFunction,
127
- },
128
- ':hover .glyph-hover': {
129
- opacity: 1,
130
- transform: 'rotate(180deg)',
131
- },
132
- };
133
-
134
- monitorResizeGlyph = {
135
- display: 'flex',
136
- justifyContent: 'center',
137
- alignItems: 'center',
138
- opacity: 0,
139
- transition: '0.3s ease-out',
140
- };
141
- }
142
-
143
- /******************************************************************************/
144
-
145
- return {
146
- desktopMonitors,
147
- monitorShowed,
148
- monitorHidden,
149
- monitorSajex,
150
- monitorResizeButton,
151
- monitorResizeGlyph,
152
- };
153
- }
154
-
155
- /******************************************************************************/
1
+ import {ColorManipulator, Unit} from 'goblin-theme';
2
+
3
+ /******************************************************************************/
4
+
5
+ export default function styles(theme) {
6
+ const look = theme.look.name;
7
+
8
+ const desktopMonitors = {
9
+ position: 'relative',
10
+ height: theme.shapes.footerHeight,
11
+ display: 'flex',
12
+ flexDirection: 'row',
13
+ justifyContent: 'flex-end',
14
+ alignItems: 'center',
15
+ };
16
+
17
+ /******************************************************************************/
18
+
19
+ let monitorShowed;
20
+ let monitorHidden;
21
+ let monitorSajex;
22
+ let monitorResizeButton;
23
+ let monitorResizeGlyph;
24
+
25
+ //---------\
26
+ // MODERN >
27
+ //---------/
28
+ if (look === 'modern') {
29
+ monitorShowed = {
30
+ zIndex: 20,
31
+ position: 'fixed',
32
+ right: '0px',
33
+ bottom: theme.shapes.footerHeight,
34
+ transitionProperty: 'bottom',
35
+ transition: '0.3s ease-out',
36
+ };
37
+
38
+ monitorHidden = {
39
+ ...monitorShowed,
40
+ bottom: '-500px',
41
+ };
42
+
43
+ monitorResizeButton = {
44
+ 'position': 'absolute',
45
+ 'left': '0px',
46
+ 'top': '0px',
47
+ 'width': '30px',
48
+ 'height': '30px',
49
+ 'borderRadius': '15px',
50
+ 'display': 'flex',
51
+ 'justifyContent': 'center',
52
+ 'alignItems': 'center',
53
+ 'color': 'white',
54
+ 'backgroundColor': ColorManipulator.emphasize(theme.palette.chrome, 0.3),
55
+ 'transform': 'scale(0.5)',
56
+ 'transition': '0.3s ease-out',
57
+ ':hover': {
58
+ transform: 'scale(1.5)',
59
+ backgroundColor: theme.palette.chrome,
60
+ },
61
+ ':hover .glyph-hover': {
62
+ opacity: 1,
63
+ },
64
+ };
65
+
66
+ monitorResizeGlyph = {
67
+ display: 'flex',
68
+ justifyContent: 'center',
69
+ alignItems: 'center',
70
+ opacity: 0,
71
+ };
72
+ }
73
+
74
+ //--------\
75
+ // RETRO >
76
+ //--------/
77
+ if (look === 'retro') {
78
+ monitorShowed = {
79
+ zIndex: 20,
80
+ position: 'fixed',
81
+ right: '10px',
82
+ bottom: Unit.add(theme.shapes.footerHeight, '10px'),
83
+ transitionProperty: 'bottom',
84
+ transition: theme.transitions.retroOpenTransition,
85
+ transitionTimingFunction: theme.transitions.retroOpenFunction,
86
+ };
87
+
88
+ monitorHidden = {
89
+ ...monitorShowed,
90
+ bottom: '-500px',
91
+ transition: theme.transitions.retroCloseTransition,
92
+ transitionTimingFunction: theme.transitions.retroCloseFunction,
93
+ };
94
+
95
+ monitorSajex = {
96
+ width: '10px',
97
+ };
98
+
99
+ monitorResizeButton = {
100
+ 'position': 'absolute',
101
+ 'left': '-10px',
102
+ 'top': '-10px',
103
+ 'width': '30px',
104
+ 'height': '30px',
105
+ 'borderRadius': '30px',
106
+ 'borderTop': '3px solid transparent',
107
+ 'borderLeft': '3px solid transparent',
108
+ 'borderBottom': '3px solid transparent',
109
+ 'borderRight': '3px solid transparent',
110
+ 'display': 'flex',
111
+ 'justifyContent': 'center',
112
+ 'alignItems': 'center',
113
+ 'color': '#12a279',
114
+ 'boxShadow': '0px 0px 0px 0px transparent',
115
+ 'transition': theme.transitions.retroCloseTransition,
116
+ 'transitionTimingFunction': theme.transitions.retroCloseFunction,
117
+ ':hover': {
118
+ transform: 'scale(1.5)',
119
+ borderTop: '3px solid #ccc',
120
+ borderLeft: '3px solid #ccc',
121
+ borderBottom: '3px solid #888',
122
+ borderRight: '3px solid #888',
123
+ backgroundColor: '#111',
124
+ boxShadow: '5px 5px 15px 5px black',
125
+ transition: theme.transitions.retroOpenTransition,
126
+ transitionTimingFunction: theme.transitions.retroOpenFunction,
127
+ },
128
+ ':hover .glyph-hover': {
129
+ opacity: 1,
130
+ transform: 'rotate(180deg)',
131
+ },
132
+ };
133
+
134
+ monitorResizeGlyph = {
135
+ display: 'flex',
136
+ justifyContent: 'center',
137
+ alignItems: 'center',
138
+ opacity: 0,
139
+ transition: '0.3s ease-out',
140
+ };
141
+ }
142
+
143
+ /******************************************************************************/
144
+
145
+ return {
146
+ desktopMonitors,
147
+ monitorShowed,
148
+ monitorHidden,
149
+ monitorSajex,
150
+ monitorResizeButton,
151
+ monitorResizeGlyph,
152
+ };
153
+ }
154
+
155
+ /******************************************************************************/