communication-ui-library/packages/react-composites/src/composites/CallComposite/styles/CallControls.styles.ts at 1b8e31355f2828213ea2b0c37a7dd32c767e1df3 · Azure/communication-ui-library · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { IButtonStyles, IContextualMenuItemStyles, IStyle } from '@fluentui/react';
import { DevicesButtonStyles, ParticipantsButtonStyles } from '@internal/react-components';

const MINIMUM_TOUCH_TARGET_HEIGHT_REM = 3;

/** @private */
export const controlBarContainerStyles: IStyle = {
  paddingTop: '0.25rem',
  paddingBottom: '0.25rem',

  // @TODO: this should be exposed through a custom CallComposite Theme API that extends the fluent theme with semantic values
  boxShadow: `
    0px 6.400000095367432px 14.399999618530273px 0px #00000021;
    0px 1.2000000476837158px 3.5999999046325684px 0px #0000001A;
  `
};

/**
 * @private
 */
export const groupCallLeaveButtonStyle = {
  root: {
    border: '0.125rem',
    borderRadius: 2,
    height: '2.1875rem',
    width: '6.5625rem'
  },
  flexContainer: {
    flexFlow: 'row'
  }
};

/**
 * @private
 */
export const groupCallLeaveButtonCompressedStyle = {
  root: {
    border: '0',
    borderRadius: '0.5rem'
  },
  flexContainer: {
    flexFlow: 'row'
  }
};

/**
 * Styles that can be applied to ensure flyout items have the minimum touch target size.
 *
 * @private
 */
export const buttonFlyoutIncreasedSizeStyles: IContextualMenuItemStyles = {
  root: {
    height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
    lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
    maxHeight: 'unset'
  },
  linkContent: {
    height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
    lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
    maxHeight: 'unset'
  },
  icon: {
    maxHeight: 'unset'
  }
};

/**
 * @private
 */
export const participantButtonWithIncreasedTouchTargets: ParticipantsButtonStyles = {
  menuStyles: {
    menuItemStyles: buttonFlyoutIncreasedSizeStyles,
    participantListStyles: {
      participantItemStyles: {
        root: {
          height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`
        },
        participantSubMenuItemsStyles: buttonFlyoutIncreasedSizeStyles
      }
    }
  }
};

/**
 * @private
 */
export const devicesButtonWithIncreasedTouchTargets: DevicesButtonStyles = {
  menuStyles: {
    menuItemStyles: buttonFlyoutIncreasedSizeStyles
  }
};

/**
 * @private
 */
export const controlButtonBaseStyle: IButtonStyles = {
  label: {
    minWidth: '2.25rem'
  }
};