apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Regression: RoomInfo folder structure (#19787)

Browse Source 
Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz>
pull/19801/head
Douglas Fabris 5 years ago committed by GitHub
parent e5c54823de
commit 1954f0f2d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 102 additions and 259 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      app/channel-settings/client/index.js
  2. 2
      app/channel-settings/client/startup/tabBar.js
  3. 133
      app/channel-settings/client/stylesheets/channel-settings.css
  4. 7
      app/channel-settings/client/views/channelSettings.html
  5. 32
      app/channel-settings/client/views/channelSettings.js
  6. 4
      client/components/VerticalBar.js
  7. 8
      client/views/room/adapters.js
  8. 41
      client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.js
  9. 3
      client/views/room/contextualBar/Info/EditRoomInfo/index.js
  10. 120
      client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
  11. 5
      client/views/room/contextualBar/Info/RoomInfo/RoomInfo.stories.js
  12. 3
      client/views/room/contextualBar/Info/RoomInfo/index.js

3
app/channel-settings/client/index.js
Unescape View File

@ -1,9 +1,6 @@
import './startup/messageTypes';
import './startup/tabBar';
import './startup/trackSettingsChange';
import './views/channelSettings.html';
import './views/channelSettings';
import './views/Multiselect';
import './stylesheets/channel-settings.css';
export { ChannelSettings } from './lib/ChannelSettings';

2
app/channel-settings/client/startup/tabBar.js
Unescape View File

@ -9,7 +9,7 @@ Meteor.startup(() => {
anonymous: true,
i18nTitle: 'Room_Info',
icon: 'info-circled',
template: 'channelSettings',
template: 'RoomInfo',
order: 7,
full: true,
});

133
app/channel-settings/client/stylesheets/channel-settings.css
Unescape View File

@ -1,133 +0,0 @@
.rtl .flex-tab {
direction: rtl;
& .channel-settings {
& .editing {
padding-right: 8px;
padding-left: 80px;
}
& .buttons {
right: auto;
left: 1px;
border-radius: 4px 0 0 4px;
}
}
}
.flex-tab {
& .channel-settings {
& ul {
& li {
margin-bottom: 20px;
}
}
& label {
display: block;
margin-bottom: 5px;
font-size: 14px;
font-weight: bold;
}
& .current-setting {
display: inline-block;
width: calc(100% - 38px);
min-height: 20px;
margin-top: 3px;
cursor: pointer;
vertical-align: middle;
word-wrap: break-word;
font-size: 14px;
&[data-edit="false"] {
cursor: inherit;
user-select: initial;
}
}
& .editing {
padding-right: 80px;
font-size: 14px;
}
& .buttons {
position: absolute;
top: -1px;
right: 10px;
border-radius: 0 4px 4px 0;
& .button {
padding: 8px;
}
}
& .button {
display: inline-block;
visibility: hidden;
padding: 8px;
vertical-align: middle;
font-size: 12px;
}
& .submit {
margin-top: 30px;
text-align: center;
}
& .boolean {
font-size: 0;
& > label {
display: inline-block;
width: calc(100% - 45px);
vertical-align: middle;
}
& .setting-block {
display: inline-block;
width: 40px;
margin-left: -5px;
vertical-align: middle;
}
}
& .setting-block {
position: relative;
display: flex;
font-size: 0;
& .loading-animation {
top: 30px;
}
&:hover {
& .button {
visibility: visible;
}
}
}
& nav {
text-align: right;
}
}
}

7
app/channel-settings/client/views/channelSettings.html
Unescape View File

@ -1,7 +0,0 @@
<template name="channelSettings">
{{#if editing}}
{{> channelSettingsEditing channelData }}
{{else}}
{{> channelSettingsInfo channelData }}
{{/if}}
</template>

32
app/channel-settings/client/views/channelSettings.js
Unescape View File

@ -1,32 +0,0 @@
import { HTML } from 'meteor/htmljs';
import { ReactiveVar } from 'meteor/reactive-var';
import { Template } from 'meteor/templating';
import { ChatRoom } from '../../../models';
import { createTemplateForComponent } from '../../../../client/reactAdapters';
createTemplateForComponent('channelSettingsEditing', () => import('../../../../client/views/room/contextualBar/Info/EditChannel'), {
renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
});
createTemplateForComponent('channelSettingsInfo', () => import('../../../../client/views/room/contextualBar/Info/RoomInfo'), {
renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
});
Template.channelSettings.helpers({
channelData() {
const { editing } = Template.instance();
return {
...Template.currentData(),
openEditing: () => editing.set(true),
};
},
editing() {
return Template.instance().editing.get();
},
});
Template.channelSettings.onCreated(function() {
this.room = ChatRoom.findOne(this.data && this.data.rid);
this.editing = new ReactiveVar(false);
});

4
client/components/VerticalBar.js
Unescape View File

@ -45,7 +45,7 @@ function VerticalBarHeader({ children, ...props }) {
}
function VerticalBarIcon(props) {
return <Icon {...props} size='x22'/>;
return <Icon {...props} size='x24'/>;
}
function VerticalBarClose(props) {
@ -78,7 +78,7 @@ function VerticalBarAction({ name, ...props }) {
}
function VerticalBarActionBack(props) {
return <VerticalBarAction {...props} name='arrow-back' />;
return <VerticalBarAction {...props} tiny name='arrow-back' />;
}
function VerticalBarSkeleton(props) {

8
client/views/room/adapters.js
Unescape View File

@ -41,3 +41,11 @@ createTemplateForComponent('EditInvite', () => import('./contextualBar/RoomMembe
createTemplateForComponent('OTR', () => import('./contextualBar/OTR'), {
renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
});
createTemplateForComponent('EditRoomInfo', () => import('./contextualBar/Info/EditRoomInfo'), {
renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
});
createTemplateForComponent('RoomInfo', () => import('./contextualBar/Info/RoomInfo'), {
renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
});

41
client/views/room/contextualBar/Info/EditRoomInfo.js → client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.js
Unescape View File

@ -16,20 +16,20 @@ import {
} from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import VerticalBar from '../../../../components/VerticalBar';
import RawText from '../../../../components/RawText';
import RoomAvatarEditor from '../../../../components/avatar/RoomAvatarEditor';
import DeleteChannelWarning from '../../../../components/DeleteChannelWarning';
import { useTranslation } from '../../../../contexts/TranslationContext';
import { useForm } from '../../../../hooks/useForm';
import { roomTypes, RoomSettingsEnum } from '../../../../../app/utils/client';
import { MessageTypesValues } from '../../../../../app/lib/lib/MessageTypes';
import { useMethod } from '../../../../contexts/ServerContext';
import { useSetModal } from '../../../../contexts/ModalContext';
import { useSetting } from '../../../../contexts/SettingsContext';
import { usePermission, useAtLeastOnePermission, useRole } from '../../../../contexts/AuthorizationContext';
import { useEndpointActionExperimental } from '../../../../hooks/useEndpointAction';
import { useUserRoom } from '../../hooks/useUserRoom';
import VerticalBar from '../../../../../components/VerticalBar';
import RawText from '../../../../../components/RawText';
import RoomAvatarEditor from '../../../../../components/avatar/RoomAvatarEditor';
import DeleteChannelWarning from '../../../../../components/DeleteChannelWarning';
import { useTranslation } from '../../../../../contexts/TranslationContext';
import { useForm } from '../../../../../hooks/useForm';
import { roomTypes, RoomSettingsEnum } from '../../../../../../app/utils/client';
import { MessageTypesValues } from '../../../../../../app/lib/lib/MessageTypes';
import { useMethod } from '../../../../../contexts/ServerContext';
import { useSetModal } from '../../../../../contexts/ModalContext';
import { useSetting } from '../../../../../contexts/SettingsContext';
import { usePermission, useAtLeastOnePermission, useRole } from '../../../../../contexts/AuthorizationContext';
import { useEndpointActionExperimental } from '../../../../../hooks/useEndpointAction';
import { useUserRoom } from '../../../hooks/useUserRoom';
const typeMap = {
c: 'Channels',
@ -109,13 +109,20 @@ const useInitialValues = (room, settings) => {
function EditChannelWithData({ rid, tabBar }) {
const room = useUserRoom(rid);
const onClickClose = useMutableCallback(() => tabBar && tabBar.close());
const onClickBack = useMutableCallback(() => tabBar && tabBar.setTemplate('RoomInfo'));
return <EditChannel onClickClose={onClickClose} room={{ type: room?.t, ...room }}/>;
return (
<EditChannel
onClickClose={onClickClose}
onClickBack={onClickBack}
room={{ type: room?.t, ...room }}
/>
);
}
const getCanChangeType = (room, canCreateChannel, canCreateGroup, isAdmin) => (!room.default || isAdmin) && ((room.t === 'p' && canCreateChannel) || (room.t === 'c' && canCreateGroup));
function EditChannel({ room, onClickClose }) {
function EditChannel({ room, onClickClose, onClickBack }) {
const t = useTranslation();
const setModal = useSetModal();
@ -267,7 +274,7 @@ function EditChannel({ room, onClickClose }) {
return (
<>
<VerticalBar.Header>
<VerticalBar.Icon name='edit'/>
{ onClickBack && <VerticalBar.Back onClick={onClickBack} /> }
<VerticalBar.Text>{t('edit-room')}</VerticalBar.Text>
{ onClickClose && <VerticalBar.Close onClick={onClickClose} /> }
</VerticalBar.Header>

3
client/views/room/contextualBar/Info/EditRoomInfo/index.js
Unescape View File

@ -0,0 +1,3 @@
import EditRoomInfo from './EditRoomInfo';
export default EditRoomInfo;

120
client/views/room/contextualBar/Info/RoomInfo.js → client/views/room/contextualBar/Info/RoomInfo/RoomInfo.js
Unescape View File

@ -1,24 +1,24 @@
import React from 'react';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import { Box, Margins, Icon, Button, ButtonGroup, Divider, Callout } from '@rocket.chat/fuselage';
import { Box, Icon, Button, ButtonGroup, Divider, Callout } from '@rocket.chat/fuselage';
import { css } from '@rocket.chat/css-in-js';
import RoomAvatar from '../../../../components/avatar/RoomAvatar';
import { useTranslation } from '../../../../contexts/TranslationContext';
import UserCard from '../../../../components/UserCard';
import VerticalBar from '../../../../components/VerticalBar';
import { useUserRoom } from '../../../../contexts/UserContext';
import { useMethod } from '../../../../contexts/ServerContext';
import DeleteChannelWarning from '../../../../components/DeleteChannelWarning';
import { useSetModal } from '../../../../contexts/ModalContext';
import { useSetting } from '../../../../contexts/SettingsContext';
import { useRoute } from '../../../../contexts/RouterContext';
import { useToastMessageDispatch } from '../../../../contexts/ToastMessagesContext';
import { roomTypes, UiTextContext } from '../../../../../app/utils';
import { RoomManager } from '../../../../../app/ui-utils/client/lib/RoomManager';
import { usePermission } from '../../../../contexts/AuthorizationContext';
import WarningModal from '../../../admin/apps/WarningModal';
import MarkdownText from '../../../../components/MarkdownText';
import RoomAvatar from '../../../../../components/avatar/RoomAvatar';
import { useTranslation } from '../../../../../contexts/TranslationContext';
import UserCard from '../../../../../components/UserCard';
import VerticalBar from '../../../../../components/VerticalBar';
import { useUserRoom } from '../../../../../contexts/UserContext';
import { useMethod } from '../../../../../contexts/ServerContext';
import DeleteChannelWarning from '../../../../../components/DeleteChannelWarning';
import { useSetModal } from '../../../../../contexts/ModalContext';
import { useSetting } from '../../../../../contexts/SettingsContext';
import { useRoute } from '../../../../../contexts/RouterContext';
import { useToastMessageDispatch } from '../../../../../contexts/ToastMessagesContext';
import { roomTypes, UiTextContext } from '../../../../../../app/utils';
import { RoomManager } from '../../../../../../app/ui-utils/client/lib/RoomManager';
import { usePermission } from '../../../../../contexts/AuthorizationContext';
import WarningModal from '../../../../admin/apps/WarningModal';
import MarkdownText from '../../../../../components/MarkdownText';
const retentionPolicyMaxAge = {
c: 'RetentionPolicy_MaxAge_Channels',
@ -79,49 +79,47 @@ export const RoomInfo = function RoomInfo({
<VerticalBar.ScrollableContent p='x24'>
<Box flexGrow={1}>
<Margins block='x4'>
<Box pbe='x24'>
<RoomAvatar size={'x332'} room={{ _id: rid, type, t: type } } />
</Box>
{ archived && <Box pbe='x24'>
<Callout type='warning'>
{t('Room_archived')}
</Callout>
</Box>}
<Box pbe='x24'>
<RoomInfo.Title name={name} status={<RoomInfo.Icon name={icon} />}>{name}</RoomInfo.Title>
</Box>
{broadcast && broadcast !== '' && <Box pbe='x16'>
<Label><b>{t('Broadcast_channel')}</b> {t('Broadcast_channel_Description')}</Label>
</Box>}
{description && description !== '' && <Box pbe='x16'>
<Label>{t('Description')}</Label>
<Info withTruncatedText={false}>{description}</Info>
</Box>}
{announcement && announcement !== '' && <Box pbe='x16'>
<Label>{t('Announcement')}</Label>
<Info withTruncatedText={false}>{announcement}</Info>
</Box>}
{topic && topic !== '' && <Box pbe='x16'>
<Label>{t('Topic')}</Label>
<Info withTruncatedText={false}>{topic}</Info>
</Box>}
{retentionPolicyEnabled && (
<Callout type='warning'>
{filesOnlyDefault && excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_FilesOnly', { time: maxAgeDefault })}</p>}
{filesOnlyDefault && !excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_UnpinnedFilesOnly', { time: maxAgeDefault })}</p>}
{!filesOnlyDefault && excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning', { time: maxAgeDefault })}</p>}
{!filesOnlyDefault && !excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_Unpinned', { time: maxAgeDefault })}</p>}
</Callout>
)}
</Margins>
<Box pbe='x24'>
<RoomAvatar size={'x332'} room={{ _id: rid, type, t: type } } />
</Box>
{ archived && <Box pbe='x24'>
<Callout type='warning'>
{t('Room_archived')}
</Callout>
</Box>}
<Box pbe='x24'>
<RoomInfo.Title name={name} status={<RoomInfo.Icon name={icon} />}>{name}</RoomInfo.Title>
</Box>
{broadcast && broadcast !== '' && <Box pbe='x16'>
<Label><b>{t('Broadcast_channel')}</b> {t('Broadcast_channel_Description')}</Label>
</Box>}
{description && description !== '' && <Box pbe='x16'>
<Label>{t('Description')}</Label>
<Info withTruncatedText={false}>{description}</Info>
</Box>}
{announcement && announcement !== '' && <Box pbe='x16'>
<Label>{t('Announcement')}</Label>
<Info withTruncatedText={false}>{announcement}</Info>
</Box>}
{topic && topic !== '' && <Box pbe='x16'>
<Label>{t('Topic')}</Label>
<Info withTruncatedText={false}>{topic}</Info>
</Box>}
{retentionPolicyEnabled && (
<Callout type='warning'>
{filesOnlyDefault && excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_FilesOnly', { time: maxAgeDefault })}</p>}
{filesOnlyDefault && !excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_UnpinnedFilesOnly', { time: maxAgeDefault })}</p>}
{!filesOnlyDefault && excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning', { time: maxAgeDefault })}</p>}
{!filesOnlyDefault && !excludePinnedDefault && <p>{t('RetentionPolicy_RoomWarning_Unpinned', { time: maxAgeDefault })}</p>}
</Callout>
)}
</Box>
</VerticalBar.ScrollableContent>
<VerticalBar.Footer>
@ -145,11 +143,11 @@ RoomInfo.Title = Title;
RoomInfo.Icon = RoomInfoIcon;
export default ({
openEditing,
rid,
tabBar,
}) => {
const onClickClose = useMutableCallback(() => tabBar && tabBar.close());
const openEditing = useMutableCallback(() => tabBar && tabBar.setTemplate('EditRoomInfo'));
const t = useTranslation();
const room = useUserRoom(rid);

5
client/views/room/contextualBar/Info/RoomInfo.stories.js → client/views/room/contextualBar/Info/RoomInfo/RoomInfo.stories.js
Unescape View File

@ -1,12 +1,11 @@
import React from 'react';
import { UserInfo } from '../UserInfo';
import { RoomInfo } from './RoomInfo';
import VerticalBar from '../../../../components/VerticalBar';
import VerticalBar from '../../../../../components/VerticalBar';
export default {
title: 'components/RoomInfo',
component: UserInfo,
component: RoomInfo,
};
const room = {

3
client/views/room/contextualBar/Info/RoomInfo/index.js
Unescape View File

@ -0,0 +1,3 @@
import RoomInfo from './RoomInfo';
export default RoomInfo;
Write Preview
Loading…
Cancel
Save