Merge pull request #2038 from jitsi/apply-dark-theme
feat(dark-theme): Applies dark theme on inline-dialogs, tooltips, flags and more
This commit is contained in:
virtuacoplenny
GitHub
commit
56887eb2fa
|
|
@ -1,7 +1,6 @@
|
|||
%connection-info {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: $modalTextColor;
|
||||
|
||||
td {
|
||||
padding: 2px 0;
|
||||
|
|
@ -34,7 +33,6 @@
|
|||
&__download
|
||||
{
|
||||
@extend .connection-info__icon;
|
||||
color: $downloadConnectionIconColor;
|
||||
}
|
||||
|
||||
&__status
|
||||
|
|
@ -45,7 +43,6 @@
|
|||
&__upload
|
||||
{
|
||||
@extend .connection-info__icon;
|
||||
color: $uploadConnectionIconColor;
|
||||
}
|
||||
|
||||
.showmore {
|
||||
|
|
|
|||
|
|
@ -86,26 +86,16 @@
|
|||
width: 100%;
|
||||
|
||||
& button {
|
||||
background: $toolbarBackground;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& > * {
|
||||
color: $toolbarButtonColor;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Making sure any svg-s in an invite button group will be
|
||||
* colored the way we want.
|
||||
*/
|
||||
& path {
|
||||
fill: $toolbarButtonColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
// Link Appearance
|
||||
&__link,
|
||||
&__contents {
|
||||
color: $modalTextColor;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
|
|
@ -30,7 +29,6 @@
|
|||
padding: 0 5px;
|
||||
|
||||
&.disabled {
|
||||
color: gray !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@
|
|||
* Common toolbar styles.
|
||||
*/
|
||||
.toolbar {
|
||||
color: $modalTextColor;
|
||||
height: 100%;
|
||||
pointer-events: auto;
|
||||
position: relative;
|
||||
|
|
@ -82,20 +81,21 @@
|
|||
vertical-align: middle;
|
||||
width: $defaultToolbarSize;
|
||||
|
||||
&_hangup {
|
||||
color: $hangupColor;
|
||||
font-size: $hangupFontSize;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
color: $toolbarButtonColor;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&_hangup, &_hangup:hover {
|
||||
color: $hangupColor;
|
||||
font-size: $hangupFontSize;
|
||||
}
|
||||
|
||||
&:not(.toggled) {
|
||||
&:hover, &:active {
|
||||
// sum opacity with background layer should give us 0.8
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ $connectionIndicatorBg: #165ecc;
|
|||
$audioLevelShadow: rgba(9, 36, 77, 0.9);
|
||||
$videoStateIndicatorColor: $defaultColor;
|
||||
$videoStateIndicatorBackground: $toolbarBackground;
|
||||
$videoStateIndicatorSize: 40px;
|
||||
|
||||
/**
|
||||
* Feedback Modal
|
||||
|
|
|
|||
|
|
@ -65,6 +65,15 @@
|
|||
float: left;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
/**
|
||||
* Need to overwrite the background for the top toolbar dark theme div
|
||||
* wrapper needed before we're able to move all top toolbar indicators
|
||||
* creation to react.
|
||||
*/
|
||||
.ckAJgx {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
|
|
|
|||
|
|
@ -26,17 +26,6 @@
|
|||
user-select: text;
|
||||
}
|
||||
|
||||
.dial-in-numbers-trigger {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.dial-in-numbers-trigger-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.is-disabled,
|
||||
.is-loading {
|
||||
.dial-in-numbers-trigger-icon {
|
||||
|
|
@ -62,6 +51,10 @@
|
|||
&__input-container {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
|
||||
.dropdown-button-trigger {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.video-quality-dialog {
|
||||
color: $modalTextColor;
|
||||
|
||||
.hide-warning {
|
||||
height: 0;
|
||||
|
|
@ -12,7 +11,6 @@
|
|||
|
||||
.video-quality-dialog-contents {
|
||||
align-items: center;
|
||||
color: $modalTextColor;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
|
|
@ -29,7 +27,7 @@
|
|||
@mixin sliderTrackStyles() {
|
||||
height: 15px;
|
||||
border-radius: 10px;
|
||||
background: black;
|
||||
background: #0E1624;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
|
|
@ -79,7 +77,6 @@
|
|||
transform: translate(-50%, 0%);
|
||||
|
||||
&::before {
|
||||
background: rgb(140, 156, 189);
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
|
|
@ -94,10 +91,10 @@
|
|||
}
|
||||
|
||||
.video-quality-dialog-label-container.active {
|
||||
color: $toolbarToggleBackground;
|
||||
color: $videoQualityActive;
|
||||
|
||||
&::before {
|
||||
background: $toolbarToggleBackground;
|
||||
background: $videoQualityActive;
|
||||
height: 12px;
|
||||
top: -19px;
|
||||
width: 12px;
|
||||
|
|
@ -117,26 +114,26 @@
|
|||
|
||||
.video-state-indicator {
|
||||
background: $videoStateIndicatorBackground;
|
||||
color: $videoStateIndicatorColor;
|
||||
cursor: default;
|
||||
font-size: 13px;
|
||||
height: 40px;
|
||||
height: $videoStateIndicatorSize;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
min-width: 40px;
|
||||
min-width: $videoStateIndicatorSize;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
line-height: $videoStateIndicatorSize;
|
||||
}
|
||||
|
||||
/**
|
||||
* Give the label padding so it has more volume and can be easily clicked.
|
||||
*/
|
||||
.video-quality-label-status {
|
||||
padding: 10px 5px;
|
||||
line-height: $videoStateIndicatorSize;
|
||||
min-width: $videoStateIndicatorSize;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,12 +44,6 @@ $defaultBackground: #474747;
|
|||
$filmstripOnlyOverlayBg: #000;
|
||||
$reloadProgressBarBg: #0074E0;
|
||||
|
||||
/**
|
||||
* Connection indicator
|
||||
**/
|
||||
$downloadConnectionIconColor: #4abd04;
|
||||
$uploadConnectionIconColor: #ffa800;
|
||||
|
||||
/**
|
||||
* Dialog colors
|
||||
**/
|
||||
|
|
@ -111,3 +105,8 @@ $selectFontColor: $controlColor;
|
|||
$selectBg: $controlBackground;
|
||||
$selectActiveBg: darken($controlBackground, 5%);
|
||||
$selectActiveItemBg: darken($controlBackground, 20%);
|
||||
|
||||
/**
|
||||
* TODO: Replace by themed component.
|
||||
*/
|
||||
$videoQualityActive: #4C9AFF;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import React from 'react';
|
|||
import ReactDOM from 'react-dom';
|
||||
import { Provider } from 'react-redux';
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
import { AtlasKitThemeProvider } from '@atlaskit/theme';
|
||||
|
||||
import { i18next } from '../../../react/features/base/i18n';
|
||||
import {
|
||||
|
|
@ -167,15 +168,18 @@ RemoteVideo.prototype._generatePopupContent = function() {
|
|||
ReactDOM.render(
|
||||
<Provider store = { APP.store }>
|
||||
<I18nextProvider i18n = { i18next }>
|
||||
<RemoteVideoMenuTriggerButton
|
||||
initialVolumeValue = { initialVolumeValue }
|
||||
isAudioMuted = { this.isAudioMuted }
|
||||
isModerator = { isModerator }
|
||||
onMenuDisplay = {this._onRemoteVideoMenuDisplay.bind(this)}
|
||||
onRemoteControlToggle = { onRemoteControlToggle }
|
||||
onVolumeChange = { onVolumeChange }
|
||||
participantID = { participantID }
|
||||
remoteControlState = { remoteControlState } />
|
||||
<AtlasKitThemeProvider mode = 'dark'>
|
||||
<RemoteVideoMenuTriggerButton
|
||||
initialVolumeValue = { initialVolumeValue }
|
||||
isAudioMuted = { this.isAudioMuted }
|
||||
isModerator = { isModerator }
|
||||
onMenuDisplay
|
||||
= {this._onRemoteVideoMenuDisplay.bind(this)}
|
||||
onRemoteControlToggle = { onRemoteControlToggle }
|
||||
onVolumeChange = { onVolumeChange }
|
||||
participantID = { participantID }
|
||||
remoteControlState = { remoteControlState } />
|
||||
</AtlasKitThemeProvider>
|
||||
</I18nextProvider>
|
||||
</Provider>,
|
||||
remoteVideoMenuContainer);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
import { AtlasKitThemeProvider } from '@atlaskit/theme';
|
||||
import { Provider } from 'react-redux';
|
||||
|
||||
import { i18next } from '../../../react/features/base/i18n';
|
||||
|
|
@ -780,30 +781,34 @@ SmallVideo.prototype.updateIndicators = function() {
|
|||
const tooltipPosition = interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top';
|
||||
|
||||
ReactDOM.render(
|
||||
<I18nextProvider i18n = { i18next }>
|
||||
<div>
|
||||
{ this._showConnectionIndicator
|
||||
? <ConnectionIndicator
|
||||
alwaysVisible = { showConnectionIndicator }
|
||||
connectionStatus = { this._connectionStatus }
|
||||
iconSize = { iconSize }
|
||||
isLocalVideo = { this.isLocal }
|
||||
enableStatsDisplay = { !interfaceConfig.filmStripOnly }
|
||||
statsPopoverPosition = { this.statsPopoverLocation }
|
||||
userID = { this.id } />
|
||||
: null }
|
||||
{ this._showRaisedHand
|
||||
? <RaisedHandIndicator
|
||||
iconSize = { iconSize }
|
||||
tooltipPosition = { tooltipPosition } />
|
||||
: null }
|
||||
{ this._showDominantSpeaker
|
||||
? <DominantSpeakerIndicator
|
||||
iconSize = { iconSize }
|
||||
tooltipPosition = { tooltipPosition } />
|
||||
: null }
|
||||
</div>
|
||||
</I18nextProvider>,
|
||||
<I18nextProvider i18n = { i18next }>
|
||||
<div>
|
||||
<AtlasKitThemeProvider mode = 'dark'>
|
||||
{ this._showConnectionIndicator
|
||||
? <ConnectionIndicator
|
||||
alwaysVisible = { showConnectionIndicator }
|
||||
connectionStatus = { this._connectionStatus }
|
||||
iconSize = { iconSize }
|
||||
isLocalVideo = { this.isLocal }
|
||||
enableStatsDisplay
|
||||
= { !interfaceConfig.filmStripOnly }
|
||||
statsPopoverPosition
|
||||
= { this.statsPopoverLocation }
|
||||
userID = { this.id } />
|
||||
: null }
|
||||
{ this._showRaisedHand
|
||||
? <RaisedHandIndicator
|
||||
iconSize = { iconSize }
|
||||
tooltipPosition = { tooltipPosition } />
|
||||
: null }
|
||||
{ this._showDominantSpeaker
|
||||
? <DominantSpeakerIndicator
|
||||
iconSize = { iconSize }
|
||||
tooltipPosition = { tooltipPosition } />
|
||||
: null }
|
||||
</AtlasKitThemeProvider>
|
||||
</div>
|
||||
</I18nextProvider>,
|
||||
indicatorToolbar
|
||||
);
|
||||
};
|
||||
|
|
|
|||
31
package.json
31
package.json
|
|
@ -15,20 +15,23 @@
|
|||
"author": "",
|
||||
"readmeFilename": "README.md",
|
||||
"dependencies": {
|
||||
"@atlaskit/avatar": "4.0.5",
|
||||
"@atlaskit/button": "3.0.0",
|
||||
"@atlaskit/button-group": "1.1.3",
|
||||
"@atlaskit/dropdown-menu": "1.4.0",
|
||||
"@atlaskit/field-text": "2.7.0",
|
||||
"@atlaskit/flag": "3.0.0",
|
||||
"@atlaskit/icon": "7.0.0",
|
||||
"@atlaskit/inline-dialog": "3.2.0",
|
||||
"@atlaskit/inline-message": "2.1.1",
|
||||
"@atlaskit/modal-dialog": "2.1.2",
|
||||
"@atlaskit/multi-select": "6.2.0",
|
||||
"@atlaskit/spinner": "2.2.3",
|
||||
"@atlaskit/tabs": "2.0.0",
|
||||
"@atlaskit/toggle": "2.0.4",
|
||||
"@atlaskit/avatar": "8.0.5",
|
||||
"@atlaskit/button": "5.4.2",
|
||||
"@atlaskit/button-group": "1.5.3",
|
||||
"@atlaskit/dropdown-menu": "3.10.2",
|
||||
"@atlaskit/droplist": "4.11.1",
|
||||
"@atlaskit/field-text": "4.0.1",
|
||||
"@atlaskit/flag": "6.1.0",
|
||||
"@atlaskit/icon": "10.0.0",
|
||||
"@atlaskit/inline-dialog": "5.0.2",
|
||||
"@atlaskit/inline-message": "3.0.1",
|
||||
"@atlaskit/modal-dialog": "2.6.0",
|
||||
"@atlaskit/multi-select": "7.1.3",
|
||||
"@atlaskit/spinner": "4.0.0",
|
||||
"@atlaskit/tabs": "4.0.1",
|
||||
"@atlaskit/theme": "2.2.0",
|
||||
"@atlaskit/toggle": "2.6.1",
|
||||
"@atlaskit/tooltip": "6.0.0",
|
||||
"@atlassian/aui": "6.0.6",
|
||||
"autosize": "1.18.13",
|
||||
"es6-iterator": "2.0.1",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { I18nextProvider } from 'react-i18next';
|
|||
import { Provider } from 'react-redux';
|
||||
import { compose, createStore } from 'redux';
|
||||
import Thunk from 'redux-thunk';
|
||||
import { AtlasKitThemeProvider } from '@atlaskit/theme';
|
||||
|
||||
import { i18next } from '../../base/i18n';
|
||||
import {
|
||||
|
|
@ -201,9 +202,11 @@ export class AbstractApp extends Component {
|
|||
return (
|
||||
<I18nextProvider i18n = { i18next }>
|
||||
<Provider store = { this._getStore() }>
|
||||
{
|
||||
this._createElement(component)
|
||||
}
|
||||
<AtlasKitThemeProvider mode = 'dark'>
|
||||
{
|
||||
this._createElement(component)
|
||||
}
|
||||
</AtlasKitThemeProvider>
|
||||
</Provider>
|
||||
</I18nextProvider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import AKButton from '@atlaskit/button';
|
||||
import AKButtonGroup from '@atlaskit/button-group';
|
||||
import ModalDialog from '@atlaskit/modal-dialog';
|
||||
import { AtlasKitThemeProvider } from '@atlaskit/theme';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
|
|
@ -114,25 +115,32 @@ class StatelessDialog extends Component {
|
|||
*/
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
onKeyDown = { this._onKeyDown }
|
||||
ref = { this._setDialogElement }>
|
||||
<ModalDialog
|
||||
footer = { this._renderFooter() }
|
||||
header = { this._renderHeader() }
|
||||
isOpen = { true }
|
||||
onDialogDismissed = { this._onDialogDismissed }
|
||||
width = { this.props.width || 'medium' }>
|
||||
<div>
|
||||
<form
|
||||
className = 'modal-dialog-form'
|
||||
id = 'modal-dialog-form'
|
||||
onSubmit = { this._onSubmit }>
|
||||
{ this.props.children }
|
||||
</form>
|
||||
</div>
|
||||
</ModalDialog>
|
||||
</div>
|
||||
|
||||
/**
|
||||
* Enabled light theme for dialogs until all in-dialog components
|
||||
* support dark theme.
|
||||
*/
|
||||
<AtlasKitThemeProvider mode = 'light'>
|
||||
<div
|
||||
onKeyDown = { this._onKeyDown }
|
||||
ref = { this._setDialogElement }>
|
||||
<ModalDialog
|
||||
footer = { this._renderFooter() }
|
||||
header = { this._renderHeader() }
|
||||
isOpen = { true }
|
||||
onDialogDismissed = { this._onDialogDismissed }
|
||||
width = { this.props.width || 'medium' }>
|
||||
<div>
|
||||
<form
|
||||
className = 'modal-dialog-form'
|
||||
id = 'modal-dialog-form'
|
||||
onSubmit = { this._onSubmit }>
|
||||
{ this.props.children }
|
||||
</form>
|
||||
</div>
|
||||
</ModalDialog>
|
||||
</div>
|
||||
</AtlasKitThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import AKDropdownMenu from '@atlaskit/dropdown-menu';
|
||||
import ExpandIcon from '@atlaskit/icon/glyph/expand';
|
||||
import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
|
|
@ -116,7 +116,7 @@ class DeviceSelector extends Component {
|
|||
<span className = 'device-selector-trigger-text'>
|
||||
{ triggerText }
|
||||
</span>
|
||||
<ExpandIcon
|
||||
<ChevronDownIcon
|
||||
label = 'expand'
|
||||
size = 'large' />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
|
||||
import AKFieldText, { FieldText } from '@atlaskit/field-text';
|
||||
import ExpandIcon from '@atlaskit/icon/glyph/expand';
|
||||
import { DropdownMenuStateless as DropdownMenu } from '@atlaskit/dropdown-menu';
|
||||
import { FieldTextStateless as TextField } from '@atlaskit/field-text';
|
||||
import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
|
@ -149,7 +149,7 @@ class DialOutNumbersForm extends Component {
|
|||
{ _dialOutCodes ? this._createDropdownMenu(
|
||||
this._formatCountryCodes(_dialOutCodes)) : null }
|
||||
<div className = 'dial-out-input'>
|
||||
<AKFieldText
|
||||
<TextField
|
||||
autoFocus = { true }
|
||||
isLabelHidden = { true }
|
||||
label = { 'dial-out-input-field' }
|
||||
|
|
@ -164,7 +164,7 @@ class DialOutNumbersForm extends Component {
|
|||
}
|
||||
|
||||
/**
|
||||
* Creates a {@code StatelessDropdownMenu} instance.
|
||||
* Creates a {@code DropdownMenu} instance.
|
||||
*
|
||||
* @param {Array} items - The content to display within the dropdown.
|
||||
* @returns {ReactElement}
|
||||
|
|
@ -174,14 +174,14 @@ class DialOutNumbersForm extends Component {
|
|||
|
||||
return (
|
||||
<div className = 'dropdown-container'>
|
||||
<StatelessDropdownMenu
|
||||
<DropdownMenu
|
||||
isOpen = { this.state.isDropdownOpen }
|
||||
items = { [ { items } ] }
|
||||
onItemActivated = { this._onSelect }
|
||||
onOpenChange = { this._onOpenChange }
|
||||
shouldFitContainer = { false }>
|
||||
{ this._createDropdownTrigger(dialCode, code) }
|
||||
</StatelessDropdownMenu>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -203,10 +203,10 @@ class DialOutNumbersForm extends Component {
|
|||
className = 'dial-out-flag-icon'
|
||||
countryCode = { `${countryCode}` } />
|
||||
{ /**
|
||||
* FIXME Replace FieldText with AtlasKit Button when an issue
|
||||
* FIXME Replace TextField with AtlasKit Button when an issue
|
||||
* with icons shrinking due to button text is fixed.
|
||||
*/ }
|
||||
<FieldText
|
||||
<TextField
|
||||
className = 'input-control dial-out-code'
|
||||
isLabelHidden = { true }
|
||||
isReadOnly = { true }
|
||||
|
|
@ -215,9 +215,9 @@ class DialOutNumbersForm extends Component {
|
|||
type = 'text'
|
||||
value = { dialCode || '' } />
|
||||
<span className = 'dropdown-trigger-icon'>
|
||||
<ExpandIcon
|
||||
<ChevronDownIcon
|
||||
label = 'expand'
|
||||
size = 'medium' />
|
||||
size = 'small' />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -225,7 +225,7 @@ class DialOutNumbersForm extends Component {
|
|||
|
||||
/**
|
||||
* Transforms the passed in numbers object into an array of objects that can
|
||||
* be parsed by {@code StatelessDropdownMenu}.
|
||||
* be parsed by {@code DropdownMenu}.
|
||||
*
|
||||
* @param {Object} countryCodes - The list of country codes.
|
||||
* @private
|
||||
|
|
@ -259,8 +259,8 @@ class DialOutNumbersForm extends Component {
|
|||
}
|
||||
|
||||
/**
|
||||
* This is a no-op function used to stub out FieldText's onChange in order
|
||||
* to prevent FieldText from printing prop type validation errors. FieldText
|
||||
* This is a no-op function used to stub out TextField's onChange in order
|
||||
* to prevent TextField from printing prop type validation errors. TextField
|
||||
* is used as a trigger for the dropdown in {@code DialOutNumbersForm} to
|
||||
* get the desired AtlasKit input look for the UI.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import AKFieldText from '@atlaskit/field-text';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { FieldTextStateless as TextField } from '@atlaskit/field-text';
|
||||
|
||||
import { Dialog } from '../../base/dialog';
|
||||
import { translate } from '../../base/i18n';
|
||||
|
|
@ -76,7 +76,7 @@ class DisplayNamePrompt extends Component {
|
|||
onSubmit = { this._onSubmit }
|
||||
titleKey = 'dialog.displayNameRequired'
|
||||
width = 'small'>
|
||||
<AKFieldText
|
||||
<TextField
|
||||
autoFocus = { true }
|
||||
compact = { true }
|
||||
label = { this.props.t('dialog.enterDisplayName') }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Button from '@atlaskit/button';
|
||||
import { FieldText } from '@atlaskit/field-text';
|
||||
import { FieldTextStateless as TextField } from '@atlaskit/field-text';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
|
@ -106,7 +106,7 @@ class AddPasswordForm extends Component {
|
|||
onSubmit = { this._onSubmit } >
|
||||
<div className = 'form-control__container'>
|
||||
<div className = 'form-control__input-container'>
|
||||
<FieldText
|
||||
<TextField
|
||||
autoFocus = { true }
|
||||
compact = { true }
|
||||
id = 'newPasswordInput'
|
||||
|
|
@ -123,7 +123,6 @@ class AddPasswordForm extends Component {
|
|||
id = 'addPasswordBtn'
|
||||
isDisabled = { !this.state.password }
|
||||
onClick = { this._onSubmit }
|
||||
shouldFitContainer = { true }
|
||||
type = 'button'>
|
||||
{ t('dialog.add') }
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import Button from '@atlaskit/button';
|
||||
import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
|
||||
import { FieldText } from '@atlaskit/field-text';
|
||||
import ExpandIcon from '@atlaskit/icon/glyph/expand';
|
||||
import DropdownMenu, {
|
||||
DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
|
@ -95,8 +94,6 @@ class DialInNumbersForm extends Component {
|
|||
|
||||
// Bind event handlers so they are only bound once for every instance.
|
||||
this._onCopyClick = this._onCopyClick.bind(this);
|
||||
this._onDropdownTriggerInputChange
|
||||
= this._onDropdownTriggerInputChange.bind(this);
|
||||
this._onOpenChange = this._onOpenChange.bind(this);
|
||||
this._onSelect = this._onSelect.bind(this);
|
||||
this._setCopyElement = this._setCopyElement.bind(this);
|
||||
|
|
@ -147,7 +144,7 @@ class DialInNumbersForm extends Component {
|
|||
return null;
|
||||
}
|
||||
|
||||
const items = this._formatNumbers(numbers);
|
||||
const items = this._renderDropdownItems(numbers);
|
||||
|
||||
return (
|
||||
<div className = 'form-control dial-in-numbers'>
|
||||
|
|
@ -158,11 +155,12 @@ class DialInNumbersForm extends Component {
|
|||
</span>
|
||||
</label>
|
||||
<div className = 'form-control__container'>
|
||||
{ this._createDropdownMenu(items, selectedNumber.content) }
|
||||
<div className = 'form-control__input-container'>
|
||||
{ this._createDropdownMenu(items, selectedNumber) }
|
||||
</div>
|
||||
<Button
|
||||
appearance = 'default'
|
||||
onClick = { this._onCopyClick }
|
||||
shouldFitContainer = { true }
|
||||
type = 'button'>
|
||||
{ t('dialog.copy') }
|
||||
</Button>
|
||||
|
|
@ -178,7 +176,7 @@ class DialInNumbersForm extends Component {
|
|||
}
|
||||
|
||||
/**
|
||||
* Creates a {@code StatelessDropdownMenu} instance.
|
||||
* Creates a {@code DropdownMenu} instance.
|
||||
*
|
||||
* @param {Array} items - The content to display within the dropdown.
|
||||
* @param {string} triggerText - The text to display within the
|
||||
|
|
@ -187,116 +185,32 @@ class DialInNumbersForm extends Component {
|
|||
*/
|
||||
_createDropdownMenu(items, triggerText) {
|
||||
return (
|
||||
<StatelessDropdownMenu
|
||||
<DropdownMenu
|
||||
isOpen = { this.state.isDropdownOpen }
|
||||
items = { [ { items } ] }
|
||||
onItemActivated = { this._onSelect }
|
||||
onOpenChange = { this._onOpenChange }
|
||||
shouldFitContainer = { true }>
|
||||
{ this._createDropdownTrigger(triggerText) }
|
||||
</StatelessDropdownMenu>
|
||||
shouldFitContainer = { true }
|
||||
trigger = { triggerText || '' }
|
||||
triggerButtonProps = {{
|
||||
className: 'dropdown-button-trigger',
|
||||
shouldFitContainer: true }}
|
||||
triggerType = 'button'>
|
||||
<DropdownItemGroup>
|
||||
{ items }
|
||||
</DropdownItemGroup>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a React {@code Component} with a readonly HTMLInputElement as a
|
||||
* trigger for displaying the dropdown menu. The {@code Component} will also
|
||||
* display the currently selected number.
|
||||
* Formats the region and number string.
|
||||
*
|
||||
* @param {string} triggerText - Text to display in the HTMLInputElement.
|
||||
* @param {string} region - The region string.
|
||||
* @param {string} number - The number string.
|
||||
* @returns {string} - The new formatted string.
|
||||
* @private
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
_createDropdownTrigger(triggerText) {
|
||||
return (
|
||||
<div className = 'dial-in-numbers-trigger'>
|
||||
<div className = 'form-control__input-container'>
|
||||
<FieldText
|
||||
compact = { true }
|
||||
isLabelHidden = { true }
|
||||
isReadOnly = { true }
|
||||
label = 'Select Dial-In Number'
|
||||
onChange = { this._onDropdownTriggerInputChange }
|
||||
ref = { this._setInput }
|
||||
shouldFitContainer = { true }
|
||||
type = 'text'
|
||||
value = { triggerText || '' } />
|
||||
</div>
|
||||
<span className = 'dial-in-numbers-trigger-icon'>
|
||||
<ExpandIcon
|
||||
label = 'expand'
|
||||
size = 'medium' />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Detects whether the response from dialInNumbersUrl returned an array or
|
||||
* an object with dial-in numbers and calls the appropriate method to
|
||||
* transform the numbers into the format expected by
|
||||
* {@code StatelessDropdownMenu}.
|
||||
*
|
||||
* @param {Array<string>|Object} dialInNumbers - The numbers returned from
|
||||
* requesting dialInNumbersUrl.
|
||||
* @private
|
||||
* @returns {Array<Object>}
|
||||
*/
|
||||
_formatNumbers(dialInNumbers) {
|
||||
if (Array.isArray(dialInNumbers)) {
|
||||
return this._formatNumbersArray(dialInNumbers);
|
||||
}
|
||||
|
||||
return this._formatNumbersObject(dialInNumbers);
|
||||
}
|
||||
|
||||
/**
|
||||
* Transforms the passed in numbers array into an array of objects that can
|
||||
* be parsed by {@code StatelessDropdownMenu}.
|
||||
*
|
||||
* @param {Array<string>} dialInNumbers - An array with dial-in numbers to
|
||||
* display and copy.
|
||||
* @private
|
||||
* @returns {Array<Object>}
|
||||
*/
|
||||
_formatNumbersArray(dialInNumbers) {
|
||||
return dialInNumbers.map(number => {
|
||||
return {
|
||||
content: number,
|
||||
number
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Transforms the passed in numbers object into an array of objects that can
|
||||
* be parsed by {@code StatelessDropdownMenu}.
|
||||
*
|
||||
* @param {Object} dialInNumbers - The numbers object to parse. The
|
||||
* expected format is an object with keys being the name of the country
|
||||
* and the values being an array of numbers as strings.
|
||||
* @private
|
||||
* @returns {Array<Object>}
|
||||
*/
|
||||
_formatNumbersObject(dialInNumbers) {
|
||||
const phoneRegions = Object.keys(dialInNumbers);
|
||||
|
||||
if (!phoneRegions.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const formattedNumbers = phoneRegions.map(region => {
|
||||
const numbers = dialInNumbers[region];
|
||||
|
||||
return numbers.map(number => {
|
||||
return {
|
||||
content: `${region}: ${number}`,
|
||||
number
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
return Array.prototype.concat(...formattedNumbers);
|
||||
_formatRegionNumber(region, number) {
|
||||
return `${region}: ${number}`;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -313,7 +227,7 @@ class DialInNumbersForm extends Component {
|
|||
});
|
||||
|
||||
const callNumber = t('invite.callNumber', {
|
||||
number: this.state.selectedNumber.number
|
||||
number: this.state.selectedNumber
|
||||
});
|
||||
const stepOne = `1) ${callNumber}`;
|
||||
|
||||
|
|
@ -343,18 +257,6 @@ class DialInNumbersForm extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This is a no-op function used to stub out FieldText's onChange in order
|
||||
* to prevent FieldText from printing prop type validation errors. FieldText
|
||||
* is used as a trigger for the dropdown in {@code DialInNumbersForm} to
|
||||
* get the desired AtlasKit input look for the UI.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onDropdownTriggerInputChange() {
|
||||
// Intentionally left empty.
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the internal state to either open or close the dropdown. If the
|
||||
* dropdown is disabled, the state will always be set to false.
|
||||
|
|
@ -380,10 +282,71 @@ class DialInNumbersForm extends Component {
|
|||
_onSelect(selection) {
|
||||
this.setState({
|
||||
isDropdownOpen: false,
|
||||
selectedNumber: selection.item
|
||||
selectedNumber: selection
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a DropDownItem for the given id and text.
|
||||
*
|
||||
* @param {string} id - The key identifier of the DropdownItem.
|
||||
* @param {string} text - The text to display in the dropdown item.
|
||||
* @returns {React.Component}
|
||||
* @private
|
||||
*/
|
||||
_renderDropDownItem(id, text) {
|
||||
return (
|
||||
|
||||
/**
|
||||
* Arrow functions are not allowed in props, but I leave this until
|
||||
* I figure a better way to implement the same thing.
|
||||
*/
|
||||
/* eslint-disable react/jsx-no-bind */
|
||||
<DropdownItem
|
||||
key = { id }
|
||||
onClick = { () => this._onSelect(text || id) }>
|
||||
{ text }
|
||||
</DropdownItem>
|
||||
/* eslint-disable react/jsx-no-bind */
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Detects whether the response from dialInNumbersUrl returned an array or
|
||||
* an object with dial-in numbers and calls the appropriate method to
|
||||
* transform the numbers into the format expected by
|
||||
* {@code DropdownMenu}.
|
||||
*
|
||||
* @param {Array<string>|Object} dialInNumbers - The numbers returned from
|
||||
* requesting dialInNumbersUrl.
|
||||
* @private
|
||||
* @returns {Array<Object>}
|
||||
*/
|
||||
_renderDropdownItems(dialInNumbers) {
|
||||
if (Array.isArray(dialInNumbers)) {
|
||||
return dialInNumbers.map(number =>
|
||||
this._renderDropDownItem(number)
|
||||
);
|
||||
}
|
||||
|
||||
const phoneRegions = Object.keys(dialInNumbers);
|
||||
|
||||
if (!phoneRegions.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const dropdownItems = phoneRegions.map(region => {
|
||||
const numbers = dialInNumbers[region];
|
||||
|
||||
return numbers.map(number =>
|
||||
this._renderDropDownItem(number,
|
||||
this._formatRegionNumber(region, number))
|
||||
);
|
||||
});
|
||||
|
||||
return Array.prototype.concat(...dropdownItems);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the internal reference to the DOM/HTML element backing the React
|
||||
* {@code Component} text area.
|
||||
|
|
@ -406,10 +369,18 @@ class DialInNumbersForm extends Component {
|
|||
* @returns {void}
|
||||
*/
|
||||
_setDefaultNumber(dialInNumbers) {
|
||||
const numbers = this._formatNumbers(dialInNumbers);
|
||||
let number = '';
|
||||
|
||||
if (Array.isArray(dialInNumbers)) {
|
||||
number = dialInNumbers[0];
|
||||
} else if (Object.keys(dialInNumbers).length > 0) {
|
||||
const region = Object.keys(dialInNumbers)[0];
|
||||
|
||||
number = this._formatRegionNumber(region, dialInNumbers[region]);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
selectedNumber: numbers[0]
|
||||
selectedNumber: number
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Button from '@atlaskit/button';
|
||||
import { FieldText } from '@atlaskit/field-text';
|
||||
import { FieldTextStateless as TextField } from '@atlaskit/field-text';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
|
|
@ -71,8 +71,7 @@ class ShareLinkForm extends Component {
|
|||
</label>
|
||||
<div className = 'form-control__container'>
|
||||
<div className = 'form-control__input-container'>
|
||||
<FieldText
|
||||
compact = { true }
|
||||
<TextField
|
||||
id = 'inviteLinkRef'
|
||||
isLabelHidden = { true }
|
||||
isReadOnly = { true }
|
||||
|
|
@ -86,7 +85,6 @@ class ShareLinkForm extends Component {
|
|||
<Button
|
||||
appearance = 'default'
|
||||
onClick = { this._onClick }
|
||||
shouldFitContainer = { true }
|
||||
type = 'button'>
|
||||
{ t('dialog.copy') }
|
||||
</Button>
|
||||
|
|
@ -114,8 +112,8 @@ class ShareLinkForm extends Component {
|
|||
}
|
||||
|
||||
/**
|
||||
* This is a no-op function used to stub out FieldText's onChange in order
|
||||
* to prevent FieldText from printing prop type validation errors. FieldText
|
||||
* This is a no-op function used to stub out TextField's onChange in order
|
||||
* to prevent TextField from printing prop type validation errors. TextField
|
||||
* is used as a trigger for the dropdown in {@code ShareLinkForm} to get the
|
||||
* desired AtlasKit input look for the UI.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
// @flow
|
||||
|
||||
import AKFieldText from '@atlaskit/field-text';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { FieldTextStateless as TextField } from '@atlaskit/field-text';
|
||||
|
||||
import { setPassword } from '../../base/conference';
|
||||
import { Dialog } from '../../base/dialog';
|
||||
|
|
@ -75,7 +74,7 @@ class PasswordRequiredPrompt extends Component {
|
|||
_renderBody() {
|
||||
return (
|
||||
<div>
|
||||
<AKFieldText
|
||||
<TextField
|
||||
autoFocus = { true }
|
||||
compact = { true }
|
||||
label = { this.props.t('dialog.passwordLabel') }
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
/* @flow */
|
||||
|
||||
import AKInlineDialog from '@atlaskit/inline-dialog';
|
||||
import { Tooltip } from '@atlaskit/tooltip';
|
||||
import InlineDialog from '@atlaskit/inline-dialog';
|
||||
import Tooltip from '@atlaskit/tooltip';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { translate } from '../../base/i18n';
|
||||
|
||||
import { TOOLTIP_TO_POPUP_POSITION } from '../constants';
|
||||
import { isButtonEnabled } from '../functions';
|
||||
import StatelessToolbarButton from './StatelessToolbarButton';
|
||||
|
||||
declare var APP: Object;
|
||||
|
|
@ -24,20 +23,6 @@ class ToolbarButton extends Component {
|
|||
|
||||
_onClick: Function;
|
||||
|
||||
_onMouseOut: Function;
|
||||
|
||||
_onMouseOver: Function;
|
||||
|
||||
state: {
|
||||
|
||||
/**
|
||||
* Whether or not the tooltip for the button should be displayed.
|
||||
*
|
||||
* @type {boolean}
|
||||
*/
|
||||
showTooltip: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar button component's property types.
|
||||
*
|
||||
|
|
@ -81,14 +66,8 @@ class ToolbarButton extends Component {
|
|||
constructor(props: Object) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showTooltip: false
|
||||
};
|
||||
|
||||
// Bind methods to save the context
|
||||
this._onClick = this._onClick.bind(this);
|
||||
this._onMouseOut = this._onMouseOut.bind(this);
|
||||
this._onMouseOver = this._onMouseOver.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -134,10 +113,7 @@ class ToolbarButton extends Component {
|
|||
const buttonComponent = ( // eslint-disable-line no-extra-parens
|
||||
<Tooltip
|
||||
description = { button.tooltipText || t(button.tooltipKey) }
|
||||
onMouseOut = { this._onMouseOut }
|
||||
onMouseOver = { this._onMouseOver }
|
||||
position = { tooltipPosition }
|
||||
visible = { this.state.showTooltip }>
|
||||
position = { tooltipPosition }>
|
||||
<StatelessToolbarButton { ...props }>
|
||||
{ this.props.children }
|
||||
</StatelessToolbarButton>
|
||||
|
|
@ -151,12 +127,12 @@ class ToolbarButton extends Component {
|
|||
const { dataAttr, dataInterpolate, position } = popupConfig;
|
||||
|
||||
children = ( // eslint-disable-line no-extra-parens
|
||||
<AKInlineDialog
|
||||
<InlineDialog
|
||||
content = { t(dataAttr, dataInterpolate) }
|
||||
isOpen = { Boolean(popupConfig) }
|
||||
position = { position }>
|
||||
{ buttonComponent }
|
||||
</AKInlineDialog>
|
||||
</InlineDialog>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -176,7 +152,6 @@ class ToolbarButton extends Component {
|
|||
*/
|
||||
_onClick(event) {
|
||||
this.props.onClick(event);
|
||||
this.setState({ showTooltip: false });
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -205,31 +180,6 @@ class ToolbarButton extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides any displayed tooltip.
|
||||
*
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onMouseOut(): void {
|
||||
this.setState({ showTooltip: false });
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides any displayed tooltip.
|
||||
*
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onMouseOver(): void {
|
||||
const { button } = this.props;
|
||||
|
||||
this.setState({
|
||||
showTooltip: isButtonEnabled(button.buttonName)
|
||||
&& !button.unclickable
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets shortcut and tooltip for current toolbar button.
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue