diff --git a/CHANGELOG.md b/CHANGELOG.md index a7feda4c58..5d56040441 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,8 @@ ### Added + - Show video chat instance URLs as subtitles #3369 + ### Changed - remove jitsi as a default Video Chat instance, because they added a sign-in requirement #3366 diff --git a/scss/components/_radios.scss b/scss/components/_radios.scss new file mode 100644 index 0000000000..e15b6e5cf4 --- /dev/null +++ b/scss/components/_radios.scss @@ -0,0 +1,37 @@ +.radiogroup { + border: none; + display: flex; + justify-content: space-around; + flex-direction: column; + & > .radiobutton { + padding-bottom: 2px; + height: 42px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + & > img { + height: 36px; + width: 36px; + } + & > label { + padding-left: 4px; + padding-right: 4px; + height: 36px; + display: inline-flex; + justify-content: space-between; + flex-direction: column; + & > span:nth-child(1) { + // the label + color: var(--bp4InputText); + } + & > span:nth-child(2) { + // the subtitle + color: var(--bp4InputPlaceholder); + } + } + & > label.no-subtitle > span:nth-child(1) { + padding-top: 9px !important; + } + } +} diff --git a/scss/manifest.scss b/scss/manifest.scss index 46afe201fb..fb1428cf82 100644 --- a/scss/manifest.scss +++ b/scss/manifest.scss @@ -83,3 +83,6 @@ @import '_sidebar'; @import '_account-list'; + +// Re-usable generic UI components +@import 'components/_radios'; diff --git a/src/renderer/components/Radio.tsx b/src/renderer/components/Radio.tsx new file mode 100644 index 0000000000..dcdd73b1b8 --- /dev/null +++ b/src/renderer/components/Radio.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import classNames from 'classnames' + +type RadioProps = { + onSelect?: () => void + selected?: boolean + label: string + value: string + className?: string + name?: string + subtitle?: string +} + +export default function Radio({ + onSelect, + selected, + label, + value, + className, + name, + subtitle, +}: RadioProps) { + const id: string = Math.floor(Math.random() * 10000).toString() + return ( +
+ onSelect && onSelect()} + value={value} + defaultChecked={Boolean(selected)} + /> + +
+ ) +} diff --git a/src/renderer/components/RadioGroup.tsx b/src/renderer/components/RadioGroup.tsx new file mode 100644 index 0000000000..31105d4bfd --- /dev/null +++ b/src/renderer/components/RadioGroup.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import Radio from './Radio' + +type RadioGroupProps = { + onChange?: (value: string) => void + children: any + selectedValue: string + name: string +} + +export default function RadioGroup({ + onChange, + children, + selectedValue, + name, +}: RadioGroupProps) { + return ( +
+
+ {children.map((radio: any) => { + return ( + onChange && onChange(radio.props.value)} + name={name} + /> + ) + })} +
+
+ ) +} diff --git a/src/renderer/components/dialogs/Settings-ExperimentalFeatures.tsx b/src/renderer/components/dialogs/Settings-ExperimentalFeatures.tsx index cc7b77d95a..fba6cadd7a 100644 --- a/src/renderer/components/dialogs/Settings-ExperimentalFeatures.tsx +++ b/src/renderer/components/dialogs/Settings-ExperimentalFeatures.tsx @@ -1,5 +1,5 @@ -import React, { useState, useContext, FormEvent } from 'react' -import { Card, Elevation, Radio, RadioGroup } from '@blueprintjs/core' +import React, { useState, useContext } from 'react' +import { Card, Elevation } from '@blueprintjs/core' import { RenderDTSettingSwitchType, SettingsSelector } from './Settings' import { ScreenContext, useTranslationFunction } from '../../contexts' import { DeltaInput } from '../Login-Styles' @@ -13,6 +13,8 @@ import { DialogProps } from './DialogController' import SettingsStoreInstance, { SettingsStoreState, } from '../../stores/settings' +import RadioGroup from '../RadioGroup' +import Radio from '../Radio' const VIDEO_CHAT_INSTANCE_SYSTEMLI = 'https://meet.systemli.org/$ROOM' const VIDEO_CHAT_INSTANCE_AUTISTICI = 'https://vc.autistici.org/$ROOM' @@ -123,16 +125,15 @@ export function EditVideochatInstanceDialog({ onClose() onOk(configValue.trim()) // the trim is here to not save custom provider if it only contains whitespaces } - const onChangeRadio = (event: FormEvent) => { - const currentRadioValue = event.currentTarget.value as RadioButtonValue + const onChangeRadio = (value: string) => { let newConfigValue = '' - if (currentRadioValue === 'disabled') { + if (value === 'disabled') { newConfigValue = '' setRadioValue('disabled') - } else if (currentRadioValue === 'systemli') { + } else if (value === 'systemli') { newConfigValue = VIDEO_CHAT_INSTANCE_SYSTEMLI setRadioValue('systemli') - } else if (currentRadioValue === 'autistici') { + } else if (value === 'autistici') { newConfigValue = VIDEO_CHAT_INSTANCE_AUTISTICI setRadioValue('autistici') } else { @@ -168,10 +169,24 @@ export function EditVideochatInstanceDialog({ {tx('videochat_instance_explain_2')} - + - - + +