1 | import { concatStyleSets, getTheme, HighContrastSelector, keyframes, PulsingBeaconAnimationStyles, } from '../../Styling';
|
2 | import { memoizeFunction } from '../../Utilities';
|
3 | var DEFAULT_PERSONA_SIZE = '32px';
|
4 | var COMPACT_PERSONA_SIZE = '16px';
|
5 | var DEFAULT_ICON_SIZE = '16px';
|
6 | var COMPACT_ICON_SIZE = '13px';
|
7 | var ANIMATION_INNER_DIMENSION = '4px';
|
8 | var ANIMATION_OUTER_DIMENSION = '28px';
|
9 | var ANIMATION_BORDER_WIDTH = '4px';
|
10 | var fadeIn = memoizeFunction(function () {
|
11 | return keyframes({
|
12 | from: { opacity: 0 },
|
13 | to: { opacity: 1 },
|
14 | });
|
15 | });
|
16 | var slideIn = memoizeFunction(function () {
|
17 | return keyframes({
|
18 | from: { transform: 'translateX(-10px)' },
|
19 | to: { transform: 'translateX(0)' },
|
20 | });
|
21 | });
|
22 | export var getStyles = memoizeFunction(function (theme, customStyles, animateBeaconSignal, beaconColorOne, beaconColorTwo, isCompact) {
|
23 | var _a;
|
24 | if (theme === void 0) { theme = getTheme(); }
|
25 | var continuousPulse = PulsingBeaconAnimationStyles.continuousPulseAnimationSingle(beaconColorOne ? beaconColorOne : theme.palette.themePrimary, beaconColorTwo ? beaconColorTwo : theme.palette.themeTertiary, ANIMATION_INNER_DIMENSION, ANIMATION_OUTER_DIMENSION, ANIMATION_BORDER_WIDTH);
|
26 | var continuousPulseAnimation = {
|
27 | animationName: continuousPulse,
|
28 | animationIterationCount: '1',
|
29 | animationDuration: '.8s',
|
30 | zIndex: 1,
|
31 | };
|
32 | var slideInAnimation = {
|
33 | animationName: slideIn(),
|
34 | animationIterationCount: '1',
|
35 | animationDuration: '.5s',
|
36 | };
|
37 | var fadeInAnimation = {
|
38 | animationName: fadeIn(),
|
39 | animationIterationCount: '1',
|
40 | animationDuration: '.5s',
|
41 | };
|
42 | var ActivityItemStyles = {
|
43 | root: [
|
44 | theme.fonts.small,
|
45 | {
|
46 | display: 'flex',
|
47 | justifyContent: 'flex-start',
|
48 | alignItems: 'flex-start',
|
49 | boxSizing: 'border-box',
|
50 | color: theme.palette.neutralSecondary,
|
51 | },
|
52 | isCompact && animateBeaconSignal && fadeInAnimation,
|
53 | ],
|
54 | pulsingBeacon: [
|
55 | {
|
56 | position: 'absolute',
|
57 | top: '50%',
|
58 | left: '50%',
|
59 | transform: 'translate(-50%, -50%)',
|
60 | width: '0px',
|
61 | height: '0px',
|
62 | borderRadius: '225px',
|
63 | borderStyle: 'solid',
|
64 | opacity: 0,
|
65 | },
|
66 | isCompact && animateBeaconSignal && continuousPulseAnimation,
|
67 | ],
|
68 | isCompactRoot: {
|
69 | alignItems: 'center',
|
70 | },
|
71 | personaContainer: {
|
72 | display: 'flex',
|
73 | flexWrap: 'wrap',
|
74 | minWidth: DEFAULT_PERSONA_SIZE,
|
75 | width: DEFAULT_PERSONA_SIZE,
|
76 | height: DEFAULT_PERSONA_SIZE,
|
77 | },
|
78 | isCompactPersonaContainer: {
|
79 | display: 'inline-flex',
|
80 | flexWrap: 'nowrap',
|
81 | flexBasis: 'auto',
|
82 | height: COMPACT_PERSONA_SIZE,
|
83 | width: 'auto',
|
84 | minWidth: '0',
|
85 | paddingRight: '6px',
|
86 | },
|
87 | activityTypeIcon: {
|
88 | height: DEFAULT_PERSONA_SIZE,
|
89 | fontSize: DEFAULT_ICON_SIZE,
|
90 | lineHeight: DEFAULT_ICON_SIZE,
|
91 | marginTop: '3px',
|
92 | },
|
93 | isCompactIcon: {
|
94 | height: COMPACT_PERSONA_SIZE,
|
95 | minWidth: COMPACT_PERSONA_SIZE,
|
96 | fontSize: COMPACT_ICON_SIZE,
|
97 | lineHeight: COMPACT_ICON_SIZE,
|
98 | color: theme.palette.themePrimary,
|
99 | marginTop: '1px',
|
100 | position: 'relative',
|
101 | display: 'flex',
|
102 | justifyContent: 'center',
|
103 | alignItems: 'center',
|
104 | selectors: {
|
105 | '.ms-Persona-imageArea': {
|
106 | margin: '-2px 0 0 -2px',
|
107 | border: '2px solid' + theme.palette.white,
|
108 | borderRadius: '50%',
|
109 | selectors: (_a = {},
|
110 | _a[HighContrastSelector] = {
|
111 | border: 'none',
|
112 | margin: '0',
|
113 | },
|
114 | _a),
|
115 | },
|
116 | },
|
117 | },
|
118 | activityPersona: {
|
119 | display: 'block',
|
120 | },
|
121 | doublePersona: {
|
122 | selectors: {
|
123 | ':first-child': {
|
124 | alignSelf: 'flex-end',
|
125 | },
|
126 | },
|
127 | },
|
128 | isCompactPersona: {
|
129 | display: 'inline-block',
|
130 | width: '8px',
|
131 | minWidth: '8px',
|
132 | overflow: 'visible',
|
133 | },
|
134 | activityContent: [
|
135 | {
|
136 | padding: '0 8px',
|
137 | },
|
138 | isCompact && animateBeaconSignal && slideInAnimation,
|
139 | ],
|
140 | activityText: {
|
141 | display: 'inline',
|
142 | },
|
143 | isCompactContent: {
|
144 | flex: '1',
|
145 | padding: '0 4px',
|
146 | whiteSpace: 'nowrap',
|
147 | textOverflow: 'ellipsis',
|
148 | overflowX: 'hidden',
|
149 | },
|
150 | commentText: {
|
151 | color: theme.palette.neutralPrimary,
|
152 | },
|
153 | timeStamp: [
|
154 | theme.fonts.tiny,
|
155 | {
|
156 | fontWeight: 400,
|
157 | color: theme.palette.neutralSecondary,
|
158 | },
|
159 | ],
|
160 | isCompactTimeStamp: {
|
161 | display: 'inline-block',
|
162 | paddingLeft: '0.3em',
|
163 | fontSize: '1em',
|
164 | },
|
165 | };
|
166 | return concatStyleSets(ActivityItemStyles, customStyles);
|
167 | });
|
168 |
|
\ | No newline at end of file |