Improve CallingScreenSharingController for long text
This commit is contained in:
parent
65a1e82857
commit
93bc094342
3 changed files with 26 additions and 4 deletions
|
@ -15,7 +15,14 @@
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 212px;
|
width: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
max-width: 120px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__buttons {
|
&__buttons {
|
||||||
|
|
|
@ -15,11 +15,11 @@ import enMessages from '../../_locales/en/messages.json';
|
||||||
|
|
||||||
const i18n = setupI18n('en', enMessages);
|
const i18n = setupI18n('en', enMessages);
|
||||||
|
|
||||||
const createProps = (): PropsType => ({
|
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
||||||
i18n,
|
i18n,
|
||||||
onCloseController: action('on-close-controller'),
|
onCloseController: action('on-close-controller'),
|
||||||
onStopSharing: action('on-stop-sharing'),
|
onStopSharing: action('on-stop-sharing'),
|
||||||
presentedSourceName: 'Application',
|
presentedSourceName: overrideProps.presentedSourceName || 'Application',
|
||||||
});
|
});
|
||||||
|
|
||||||
const story = storiesOf('Components/CallingScreenSharingController', module);
|
const story = storiesOf('Components/CallingScreenSharingController', module);
|
||||||
|
@ -27,3 +27,14 @@ const story = storiesOf('Components/CallingScreenSharingController', module);
|
||||||
story.add('Controller', () => {
|
story.add('Controller', () => {
|
||||||
return <CallingScreenSharingController {...createProps()} />;
|
return <CallingScreenSharingController {...createProps()} />;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
story.add('Really long app name', () => {
|
||||||
|
return (
|
||||||
|
<CallingScreenSharingController
|
||||||
|
{...createProps({
|
||||||
|
presentedSourceName:
|
||||||
|
'A really long application name that is super long',
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
|
@ -24,7 +24,11 @@ export const CallingScreenSharingController = ({
|
||||||
{i18n('calling__presenting--info', [presentedSourceName])}
|
{i18n('calling__presenting--info', [presentedSourceName])}
|
||||||
</div>
|
</div>
|
||||||
<div className="module-CallingScreenSharingController__buttons">
|
<div className="module-CallingScreenSharingController__buttons">
|
||||||
<Button onClick={onStopSharing} variant={ButtonVariant.Destructive}>
|
<Button
|
||||||
|
className="module-CallingScreenSharingController__button"
|
||||||
|
onClick={onStopSharing}
|
||||||
|
variant={ButtonVariant.Destructive}
|
||||||
|
>
|
||||||
{i18n('calling__presenting--stop')}
|
{i18n('calling__presenting--stop')}
|
||||||
</Button>
|
</Button>
|
||||||
<button
|
<button
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue