Merge pull request #5079 from matrix-org/bwindels/alert-file-panel-empty-state
Add title and icon to empty state of file and notification panel
This commit is contained in:
commit
fba1158700
6 changed files with 49 additions and 4 deletions
res/css/structures
src
|
@ -109,3 +109,7 @@ limitations under the License.
|
||||||
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
|
.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
|
||||||
background-color: $primary-bg-color;
|
background-color: $primary-bg-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_FilePanel_empty::before {
|
||||||
|
mask-image: url('$(res)/img/element-icons/room/files.svg');
|
||||||
|
}
|
||||||
|
|
|
@ -99,3 +99,7 @@ limitations under the License.
|
||||||
.mx_NotificationPanel .mx_EventTile_content {
|
.mx_NotificationPanel .mx_EventTile_content {
|
||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_NotificationPanel_empty::before {
|
||||||
|
mask-image: url('$(res)/img/element-icons/notifications.svg');
|
||||||
|
}
|
||||||
|
|
|
@ -144,3 +144,28 @@ limitations under the License.
|
||||||
order: 2;
|
order: 2;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_RightPanel_empty {
|
||||||
|
margin-right: -42px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, p {
|
||||||
|
font-size: $font-14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
margin: 11px auto 29px auto;
|
||||||
|
height: 42px;
|
||||||
|
width: 42px;
|
||||||
|
background-color: $rightpanel-button-color;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
mask-size: contain;
|
||||||
|
mask-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -210,6 +210,11 @@ const FilePanel = createReactClass({
|
||||||
const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
|
const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
|
||||||
const Loader = sdk.getComponent("elements.Spinner");
|
const Loader = sdk.getComponent("elements.Spinner");
|
||||||
|
|
||||||
|
const emptyState = (<div className="mx_RightPanel_empty mx_FilePanel_empty">
|
||||||
|
<h2>{_t('No files visible in this room')}</h2>
|
||||||
|
<p>{_t('Attach files from chat or just drag and drop them anywhere in a room.')}</p>
|
||||||
|
</div>);
|
||||||
|
|
||||||
if (this.state.timelineSet) {
|
if (this.state.timelineSet) {
|
||||||
// console.log("rendering TimelinePanel for timelineSet " + this.state.timelineSet.room.roomId + " " +
|
// console.log("rendering TimelinePanel for timelineSet " + this.state.timelineSet.room.roomId + " " +
|
||||||
// "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
|
// "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
|
||||||
|
@ -223,7 +228,7 @@ const FilePanel = createReactClass({
|
||||||
onPaginationRequest={this.onPaginationRequest}
|
onPaginationRequest={this.onPaginationRequest}
|
||||||
tileShape="file_grid"
|
tileShape="file_grid"
|
||||||
resizeNotifier={this.props.resizeNotifier}
|
resizeNotifier={this.props.resizeNotifier}
|
||||||
empty={_t('There are no visible files in this room')}
|
empty={emptyState}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -36,6 +36,11 @@ const NotificationPanel = createReactClass({
|
||||||
const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
|
const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
|
||||||
const Loader = sdk.getComponent("elements.Spinner");
|
const Loader = sdk.getComponent("elements.Spinner");
|
||||||
|
|
||||||
|
const emptyState = (<div className="mx_RightPanel_empty mx_NotificationPanel_empty">
|
||||||
|
<h2>{_t('You’re all caught up')}</h2>
|
||||||
|
<p>{_t('You have no visible notifications in this room.')}</p>
|
||||||
|
</div>);
|
||||||
|
|
||||||
const timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
|
const timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
|
||||||
if (timelineSet) {
|
if (timelineSet) {
|
||||||
return (
|
return (
|
||||||
|
@ -46,7 +51,7 @@ const NotificationPanel = createReactClass({
|
||||||
timelineSet={timelineSet}
|
timelineSet={timelineSet}
|
||||||
showUrlPreview={false}
|
showUrlPreview={false}
|
||||||
tileShape="notif"
|
tileShape="notif"
|
||||||
empty={_t('You have no visible notifications')}
|
empty={emptyState}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1974,7 +1974,8 @@
|
||||||
"Couldn't load page": "Couldn't load page",
|
"Couldn't load page": "Couldn't load page",
|
||||||
"You must <a>register</a> to use this functionality": "You must <a>register</a> to use this functionality",
|
"You must <a>register</a> to use this functionality": "You must <a>register</a> to use this functionality",
|
||||||
"You must join the room to see its files": "You must join the room to see its files",
|
"You must join the room to see its files": "You must join the room to see its files",
|
||||||
"There are no visible files in this room": "There are no visible files in this room",
|
"No files visible in this room": "No files visible in this room",
|
||||||
|
"Attach files from chat or just drag and drop them anywhere in a room.": "Attach files from chat or just drag and drop them anywhere in a room.",
|
||||||
"<h1>HTML for your community's page</h1>\n<p>\n Use the long description to introduce new members to the community, or distribute\n some important <a href=\"foo\">links</a>\n</p>\n<p>\n You can even use 'img' tags\n</p>\n": "<h1>HTML for your community's page</h1>\n<p>\n Use the long description to introduce new members to the community, or distribute\n some important <a href=\"foo\">links</a>\n</p>\n<p>\n You can even use 'img' tags\n</p>\n",
|
"<h1>HTML for your community's page</h1>\n<p>\n Use the long description to introduce new members to the community, or distribute\n some important <a href=\"foo\">links</a>\n</p>\n<p>\n You can even use 'img' tags\n</p>\n": "<h1>HTML for your community's page</h1>\n<p>\n Use the long description to introduce new members to the community, or distribute\n some important <a href=\"foo\">links</a>\n</p>\n<p>\n You can even use 'img' tags\n</p>\n",
|
||||||
"Add rooms to the community summary": "Add rooms to the community summary",
|
"Add rooms to the community summary": "Add rooms to the community summary",
|
||||||
"Which rooms would you like to add to this summary?": "Which rooms would you like to add to this summary?",
|
"Which rooms would you like to add to this summary?": "Which rooms would you like to add to this summary?",
|
||||||
|
@ -2047,7 +2048,8 @@
|
||||||
"Communities": "Communities",
|
"Communities": "Communities",
|
||||||
"Create a new community": "Create a new community",
|
"Create a new community": "Create a new community",
|
||||||
"Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",
|
"Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",
|
||||||
"You have no visible notifications": "You have no visible notifications",
|
"You’re all caught up": "You’re all caught up",
|
||||||
|
"You have no visible notifications in this room.": "You have no visible notifications in this room.",
|
||||||
"%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.": "%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.",
|
"%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.": "%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.",
|
||||||
"%(brand)s failed to get the public room list.": "%(brand)s failed to get the public room list.",
|
"%(brand)s failed to get the public room list.": "%(brand)s failed to get the public room list.",
|
||||||
"The homeserver may be unavailable or overloaded.": "The homeserver may be unavailable or overloaded.",
|
"The homeserver may be unavailable or overloaded.": "The homeserver may be unavailable or overloaded.",
|
||||||
|
|
Loading…
Reference in a new issue