Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Notifications project
web-portal
Commits
13354bad
Commit
13354bad
authored
Feb 16, 2021
by
Carina Antunes
Browse files
[64] Limit column size
parent
4c619af3
Pipeline
#2320055
passed with stages
in 5 minutes and 36 seconds
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/channels/components/ChannelsFilterMenu/ChannelsFilterMenu.js
View file @
13354bad
...
...
@@ -17,7 +17,7 @@ const ChannelsFilterMenu = ({
manageFilter
,
})
=>
{
return
(
<
Menu
vertical
color
=
"
blue
"
>
<
Menu
vertical
color
=
"
blue
"
size
=
"
small
"
>
<
Menu
.
Item
as
=
{
Link
}
name
=
{
ALL_CHANNELS
}
...
...
src/channels/components/ChannelsList/ChannelsList.js
View file @
13354bad
...
...
@@ -12,14 +12,24 @@ import * as getPublicChannelsActionCreators from '../../actions/GetPublicChannel
import
'
./ChannelsList.scss
'
;
const
columns
=
[
{
id
:
'
name
'
,
label
:
'
Name
'
},
{
id
:
'
name
'
,
label
:
'
Name
'
,
width
:
4
,
public
:
true
},
{
id
:
'
description
'
,
label
:
'
Description
'
,
width
:
7
,
public
:
true
,
},
{
id
:
'
visibility
'
,
label
:
'
Visibility
'
,
width
:
3
,
public
:
true
,
},
{
id
:
'
options
'
,
label
:
'
Options
'
,
width
:
2
,
public
:
false
,
},
];
...
...
@@ -89,6 +99,57 @@ const ChannelsList = ({
);
}
if
(
column
.
id
===
'
options
'
&&
isAuthenticated
)
{
return
(
<>
{
!
channel
.
subscribed
&&
(
<
Popup
trigger
=
{
<
Button
disabled
=
{
channel
.
id
===
subscribeId
&&
loadingSubscribe
}
loading
=
{
channel
.
id
===
subscribeId
&&
loadingSubscribe
}
icon
=
"
bell slash
"
size
=
"
mini
"
onClick
=
{()
=>
handleSubscribe
(
channel
)}
/
>
}
position
=
"
top center
"
content
=
"
Subscribe
"
/>
)}
{
channel
.
subscribed
&&
(
<
Popup
trigger
=
{
<
Button
disabled
=
{
channel
.
id
===
unsubscribeId
&&
loadingUnsubscribe
}
loading
=
{
channel
.
id
===
unsubscribeId
&&
loadingUnsubscribe
}
primary
icon
=
"
bell
"
size
=
"
mini
"
onClick
=
{()
=>
handleUnsubscribe
(
channel
)}
/
>
}
content
=
"
Unsubscribe
"
/>
)}
{
channel
.
manage
&&
(
<
Popup
trigger
=
{
<
Button
size
=
"
mini
"
icon
=
"
settings
"
onClick
=
{()
=>
{
history
.
push
(
`/main/channels/
${
channel
.
id
}
`
);
}}
/
>
}
content
=
"
Manage
"
/>
)}
<
/
>
);
}
if
(
channel
[
column
.
id
])
return
channel
[
column
.
id
].
toString
();
return
''
;
...
...
@@ -96,69 +157,28 @@ const ChannelsList = ({
return
(
<
Segment
className
=
"
channel-list
"
basic
loading
=
{
loading
}
>
<
Table
striped
>
<
Table
striped
fixed
>
<
Table
.
Header
>
<
Table
.
Row
>
{
columns
.
map
(
column
=>
(
<
Table
.
HeaderCell
key
=
{
column
.
id
}
>
{
column
.
label
}
<
/Table.HeaderCell
>
))}
{
isAuthenticated
&&
<
Table
.
HeaderCell
>
Options
<
/Table.HeaderCell>
}
{
columns
.
map
(
column
=>
(
isAuthenticated
||
column
.
public
)
&&
(
<
Table
.
HeaderCell
width
=
{
column
.
width
}
key
=
{
column
.
id
}
>
{
column
.
label
}
<
/Table.HeaderCell
>
)
)}
<
/Table.Row
>
<
/Table.Header
>
<
Table
.
Body
>
{
channels
.
map
(
channel
=>
{
return
(
<
Table
.
Row
key
=
{
channel
.
id
}
>
{
columns
.
map
(
column
=>
(
<
Table
.
Cell
key
=
{
column
.
id
}
>
{
renderCellValue
(
channel
,
column
)}
<
/Table.Cell
>
))}
{
isAuthenticated
&&
(
<
Table
.
Cell
singleLine
>
{
!
channel
.
subscribed
&&
(
<
Popup
trigger
=
{
<
Button
disabled
=
{
channel
.
id
===
subscribeId
&&
loadingSubscribe
}
loading
=
{
channel
.
id
===
subscribeId
&&
loadingSubscribe
}
icon
=
"
bell slash
"
size
=
"
mini
"
onClick
=
{()
=>
handleSubscribe
(
channel
)}
/
>
}
position
=
"
top center
"
content
=
"
Subscribe
"
/>
)}
{
channel
.
subscribed
&&
(
<
Popup
trigger
=
{
<
Button
disabled
=
{
channel
.
id
===
unsubscribeId
&&
loadingUnsubscribe
}
loading
=
{
channel
.
id
===
unsubscribeId
&&
loadingUnsubscribe
}
primary
icon
=
"
bell
"
size
=
"
mini
"
onClick
=
{()
=>
handleUnsubscribe
(
channel
)}
/
>
}
content
=
"
Unsubscribe
"
/>
)}
{
channel
.
manage
&&
(
<
Popup
trigger
=
{
<
Button
size
=
"
mini
"
icon
=
"
settings
"
onClick
=
{()
=>
{
history
.
push
(
`/main/channels/
${
channel
.
id
}
`
);
}}
/
>
}
content
=
"
Manage
"
/>
)}
<
/Table.Cell
>
{
columns
.
map
(
column
=>
(
isAuthenticated
||
column
.
public
)
&&
(
<
Table
.
Cell
key
=
{
column
.
id
}
>
{
renderCellValue
(
channel
,
column
)}
<
/Table.Cell
>
)
)}
<
/Table.Row
>
);
...
...
@@ -166,7 +186,7 @@ const ChannelsList = ({
<
/Table.Body
>
<
Table
.
Footer
>
<
Table
.
Row
>
<
Table
.
HeaderCell
colSpan
=
"
5
"
>
<
Table
.
HeaderCell
colSpan
=
{
isAuthenticated
?
4
:
3
}
>
<
Dropdown
fluid
value
=
{
getChannelsQuery
.
take
}
...
...
src/channels/pages/AllChannelsPage/AllChannelsPage.js
View file @
13354bad
import
React
from
'
react
'
;
import
ChannelsList
from
'
channels/components/ChannelsList/ChannelsList
'
;
import
{
connect
}
from
'
react-redux
'
;
import
{
Container
,
Grid
,
Segment
}
from
'
semantic-ui-react
'
;
import
ChannelsFilterMenu
from
'
../../components/ChannelsFilterMenu/ChannelsFilterMenu
'
;
import
SearchChannelComponent
from
'
../../components/SearchChannelComponent/SearchChannelComponent
'
;
import
AddChannel
from
'
../../../components/channels/AddChannel
'
;
const
AllChannelsPage
=
props
=>
{
const
{
isAuthenticated
,
history
}
=
props
;
const
{
history
}
=
props
;
return
(
<
div
style
=
{{
margin
:
'
100px
'
,
marginTop
:
'
50px
'
}}
>
<
h2
>
CERN
Notifications
Service
<
/h2
>
<
SearchChannelComponent
/>
<
div
style
=
{{
display
:
'
flex
'
,
flexDirection
:
'
row
'
,
marginTop
:
25
}}
>
{
isAuthenticated
&&
(
<
div
style
=
{{
marginRight
:
25
}}
>
<
ChannelsFilterMenu
/>
<
AddChannel
/>
<
/div
>
)}
<
div
style
=
{{
width
:
'
100%
'
}}
>
<
ChannelsList
history
=
{
history
}
/
>
<
/div
>
<
/div
>
<
/div
>
<
Container
>
<
Segment
basic
>
<
Grid
>
<
Grid
.
Row
>
<
Grid
.
Column
>
<
h2
>
CERN
Notifications
Service
<
/h2
>
<
SearchChannelComponent
/>
<
/Grid.Column
>
<
/Grid.Row
>
<
Grid
.
Row
>
<
Grid
.
Column
width
=
{
3
}
>
<
ChannelsFilterMenu
/>
<
AddChannel
/>
<
/Grid.Column
>
<
Grid
.
Column
width
=
{
13
}
>
<
ChannelsList
history
=
{
history
}
/
>
<
/Grid.Column
>
<
/Grid.Row
>
<
/Grid
>
<
/Segment
>
<
/Container
>
);
};
const
mapStateToProps
=
state
=>
{
return
{
isAuthenticated
:
state
.
auth
.
loggedIn
,
};
};
const
mapDispatchToProps
=
()
=>
{
return
{};
};
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
)(
AllChannelsPage
);
export
default
connect
(
null
,
mapDispatchToProps
)(
AllChannelsPage
);
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment