Watcha op490 admin ui improvement (#45)

* feat: deletion of direct room information in RoomDashBoardPanel

* feat: deletion of directRoom information on RoomDashboardPanel

* feat: modification of wording for 'room' object

* i18n: better wording for connected users

* feat: better wording for 'Email' in UserRightPanel

* fix: tooltip message on button hover

* prettier: format

* feat: inversion of column order for UserDashboardPanel

* i18n: spelling correction

* i18n: better wording after review

* feat: better wording for 'rooms'

* feat: standardization of 'room' terms
develop
KevICO 5 years ago committed by GitHub
parent 8941fc1325
commit 49b3d47c3a
  1. 18
      public/locales/en/dashboardTab.json
  2. 30
      public/locales/en/roomsTab.json
  3. 6
      public/locales/en/usersTab.json
  4. 18
      public/locales/fr/dashboardTab.json
  5. 30
      public/locales/fr/roomsTab.json
  6. 6
      public/locales/fr/usersTab.json
  7. 4
      src/App.css
  8. 13
      src/DashboardTab.js
  9. 4
      src/NewItemButton.js
  10. 31
      src/RoomsDashboardPanel.js
  11. 9
      src/RoomsTab.js
  12. 4
      src/UserRightPanel.js
  13. 32
      src/UsersDashboardPanel.js

@ -2,22 +2,22 @@
"title": "Dashboard",
"usersPanel": {
"title": "Users",
"loggedUsers": "At least once",
"monthlyUsers": "During last month",
"weeklyUsers": "Duringlast week",
"loggedUsers": "Connected at least once",
"monthlyUsers": "Connected during the last month",
"weeklyUsers": "Connected during the last week",
"pendingInvitationUsers": "Pending invitations",
"administrateButton": "Administrate users",
"usersPerRole": "Distribution of users",
"connectedUsers": "Connected users",
"connectedUsers": "Users activity",
"otherStatistics": "Other statistics",
"expand": "See an overview of the administrators"
},
"roomsPanel": {
"title": "Rooms",
"nonDirectRoomsCount": "Multiple active rooms",
"directRoomsCount": "Private active rooms",
"administrateButton": "Administrate rooms",
"noRoomsMessage": "<strong>This Watcha instance does not have any rooms yet.<br/>You can create one in the \"Rooms\" tab.</strong>"
"title": "Conversations",
"regularRoomCount": "Number of rooms",
"activeRegularRoomCount": "Number of active rooms",
"administrateButton": "Administrate conversations",
"noRoomsMessage": "<strong>This Watcha installation does not have any conversations yet.<br/>You can create one in the \"Conversations\" tab.</strong>"
},
"applicationPanel": {
"title": "Application",

@ -1,7 +1,7 @@
{
"title": "Rooms",
"searchBoxPlaceholder": "Filter rooms",
"button": "New room",
"title": "Conversation",
"searchBoxPlaceholder": "Filter conversations",
"button": "New conversation",
"headers": {
"name": "Name",
"creator": "Creator",
@ -15,28 +15,28 @@
"new": "new"
},
"type":{
"personnal": "private",
"multiple": "multiple"
"dmRoom": "direct messages",
"regularRoom": "room"
},
"permalink": {
"alt": "Permalink",
"enabled": "Open this room in a new tab",
"disabled": "You are not a member of this room"
"enabled": "Open this conversation in a new tab",
"disabled": "You are not a member of this conversation"
},
"buttonTooltip": "Create a new room",
"buttonTooltip": "Create a new conversation",
"statusHeaderTooltip": {
"title": "Room status",
"title": "Conversation status",
"content": {
"active": "<strong>Active</strong>: the last message received in this room was less than a week ago",
"inactive": "<strong>Inactive</strong>: the last message received in this room was more than a week ago",
"new": "<strong>New</strong>: the room was created less than a week ago"
"active": "<strong>Active</strong>: the last message received in this conversation was less than a week ago",
"inactive": "<strong>Inactive</strong>: the last message received in this conversation was more than a week ago",
"new": "<strong>New</strong>: the conversation was created less than a week ago"
}
},
"typeHeaderTooltip": {
"title": "Room type",
"title": "Conversation type",
"content": {
"personnal": "<strong>Private</strong>: a room with no more than two users",
"multiple": "<strong>Multiple</strong>: a room with more than two users"
"dmRoom": "<strong>Direct messages</strong>: a conversation with no more than two users",
"regularRoom": "<strong>Room</strong>: a conversation with more than two users"
}
}
}

@ -36,9 +36,9 @@
"roleHeaderTooltip": {
"title": "User role",
"content": {
"administrator": "<strong>Administrator</strong>: user having access to all Watcha features, including this administration console. He cannot, however, access rooms in which he's not a member.",
"collaborator": "<strong>Collaborator</strong>: user having the right to create rooms and invite existing users or new partners to them; he doesn't have access to other rooms. He's usually an employee of your organization.",
"partner": "<strong>Partner</strong>: user having access only to the room for which he has been invited and not being allowed to create rooms. However, he doesn't have access to the member directory unless he's promoted to room administrator. He's usually a guest from outside your organization."
"administrator": "<strong>Administrator</strong>: user having access to all Watcha features, including this administration console. He cannot, however, access conversations in which he's not a member.",
"collaborator": "<strong>Collaborator</strong>: user allowed to create conversations and invite existing users or new partners to them; he doesn't have access to other conversations. He's usually an employee of your organization.",
"partner": "<strong>Partner</strong>: user having access only to the room for which he has been invited and not being allowed to create conversations. However, he doesn't have access to the member directory unless he's promoted to room administrator. He's usually a guest from outside your organization."
}
},
"roles": {

@ -2,22 +2,22 @@
"title": "Tableau de bord",
"usersPanel": {
"title": "Utilisateurs",
"loggedUsers": "Au moins une fois",
"monthlyUsers": "Au cours du dernier mois",
"weeklyUsers": "Au cours de la dernière semaine",
"loggedUsers": "Connectés au moins une fois",
"monthlyUsers": "Connectés au cours du dernier mois",
"weeklyUsers": "Connectés au cours de la dernière semaine",
"pendingInvitationUsers": "Invitations en attente",
"administrateButton": "Administrer les utilisateurs",
"usersPerRole": "Répartition des utilisateurs",
"connectedUsers": "Utilisateurs connectés",
"connectedUsers": "Activité des utilisateurs",
"otherStatistics": "Autres statistiques",
"expand": "Voir un aperçu des administrateurs"
},
"roomsPanel": {
"title": "Salons",
"nonDirectRoomsCount": "Salons à plusieurs actifs",
"directRoomsCount": "Salons privés actifs",
"administrateButton": "Administrer les salons",
"noRoomsMessage": "<strong>Cette installation de Watcha ne compte aucun salon.<br/>Vous pouvez en créer un dans l'onglet \"Salons\".</strong>"
"title": "Conversations",
"regularRoomCount": "Nombre total de salons",
"activeRegularRoomCount": "Nombre total de salons actifs",
"administrateButton": "Administrer les conversations",
"noRoomsMessage": "<strong>Cette installation de Watcha ne compte aucunes conversations.<br/>Vous pouvez en créer un dans l'onglet \"Conversations\".</strong>"
},
"applicationPanel": {
"title": "Application",

@ -1,7 +1,7 @@
{
"title": "Salons",
"searchBoxPlaceholder": "Filtrer les salons",
"button": "Nouveau salon",
"title": "Conversations",
"searchBoxPlaceholder": "Filtrer les conversations",
"button": "Nouvelle conversation",
"headers": {
"name": "Nom",
"creator": "Créateur",
@ -15,28 +15,28 @@
"new": "nouveau"
},
"type":{
"personnal": "privé",
"multiple": "à plusieurs"
"dmRoom": "messages directs",
"regularRoom": "salon"
},
"permalink": {
"alt": "Permalien",
"enabled": "Ouvrir ce salon dans un nouvel onglet",
"disabled": "Vous n'êtes pas membre de ce salon"
"enabled": "Ouvrir cette conversation dans un nouvel onglet",
"disabled": "Vous n'êtes pas membre de cette conversation"
},
"buttonTooltip": "Créer un nouveau salon",
"buttonTooltip": "Créer une nouvelle conversation",
"statusHeaderTooltip": {
"title": "Statut du salon",
"title": "Statut de la conversation",
"content": {
"active": "<strong>Actif</strong> : le dernier message posté dans ce salon date de moins d'une semaine",
"inactive": "<strong>Inactif</strong> : le dernier message posté dans ce salon date de plus d'une semaine",
"new": "<strong>Nouveau</strong> : le salon a été crée il y a moins d'une semaine"
"active": "<strong>Actif</strong> : le dernier message posté dans cette conversation date de moins d'une semaine",
"inactive": "<strong>Inactif</strong> : le dernier message posté dans cette conversation date de plus d'une semaine",
"new": "<strong>Nouveau</strong> : la conversation a été crée il y a moins d'une semaine"
}
},
"typeHeaderTooltip": {
"title": "Type du salon",
"title": "Type de conversation",
"content": {
"personnal": "<strong>Privé</strong> : un salon qui ne compte pas plus de deux utilisateurs",
"multiple": "<strong>À plusieurs</strong> : un salon qui compte trois utilisateurs ou plus"
"dmRoom": "<strong>Messages directs</strong> : une conversation qui ne compte pas plus de deux utilisateurs",
"regularRoom": "<strong>Salon</strong> : une conversation qui compte trois utilisateurs ou plus"
}
}
}

@ -36,9 +36,9 @@
"roleHeaderTooltip": {
"title": "Rôle de l'utilisateur",
"content": {
"administrator": "<strong>Administrateur</strong> : utilisateur ayant accès à toutes les fonctionnalités de Watcha, dont cette console d'administration. Il ne peut néanmoins pas accéder aux salons dont il n'est pas membre.",
"collaborator": "<strong>Collaborateur</strong> : utilisateur ayant le droit de créer des salons et d'y inviter des utilisateurs existants, ou de nouveaux partenaires ; il n'a pas accès aux autres salons. Il s'agit habituellement d'un employé de votre organisation.",
"partner": "<strong>Partenaire</strong> : utilisateur avec des privilèges restreints, invité par un administrateur ou un collaborateur, il n'est pas autorisé à créer des salons, à inviter d'autres utilisateurs, et il n'a pas accès au répertoire des utilisateurs, sauf s'il est promu administrateur. Il s'agit généralement d'un invité extérieur à votre organisation."
"administrator": "<strong>Administrateur</strong> : utilisateur ayant accès à toutes les fonctionnalités de Watcha, dont cette console d'administration. Il ne peut néanmoins pas accéder aux conversations dont il n'est pas membre.",
"collaborator": "<strong>Collaborateur</strong> : utilisateur ayant le droit de créer des conversations et d'y inviter des utilisateurs existants, ou de nouveaux partenaires ; il n'a pas accès aux autres conversations. Il s'agit habituellement d'un employé de votre organisation.",
"partner": "<strong>Partenaire</strong> : utilisateur avec des privilèges restreints, invité par un administrateur ou un collaborateur, il n'est pas autorisé à créer des conversations, à inviter d'autres utilisateurs, et il n'a pas accès au répertoire des utilisateurs, sauf s'il est promu administrateur. Il s'agit généralement d'un invité extérieur à votre organisation."
}
},
"roles": {

@ -140,6 +140,10 @@
max-height: 30vh;
}
.UserRightPanel_Table{
table-layout: fixed;
}
.Error {
color: red;
}

@ -11,7 +11,6 @@ import UsersDashboardPanel from "./UsersDashboardPanel";
import "./css/DashboardTab.scss";
export default () => {
const [loading, setLoading] = useState(true);
const [metrics, setMetrics] = useState(null);
@ -44,16 +43,12 @@ export default () => {
) : (
<CardDeck className="DashboardTab">
<Col>
<RoomsDashboardPanel
roomsMetrics={metrics.rooms}
/>
<ApplicationDashboardPanel
applicationMetrics={metrics.server}
/>
<UsersDashboardPanel usersMetrics={metrics.users} />
</Col>
<Col>
<UsersDashboardPanel
usersMetrics={metrics.users}
<RoomsDashboardPanel roomsMetrics={metrics.rooms} />
<ApplicationDashboardPanel
applicationMetrics={metrics.server}
/>
</Col>
</CardDeck>

@ -4,7 +4,7 @@ import Button from "react-bootstrap/Button";
import "./css/NewItemButton.scss";
export default ({ onClick, className, t }) => (
<Button variant="primary" {...{ onClick }}>
<span className={`NewItemButton ${className}`} title={t("buttonTooltip")}>{t("button")}</span>
<Button variant="primary" {...{ onClick }} title={t("buttonTooltip")}>
<span className={`NewItemButton ${className}`}>{t("button")}</span>
</Button>
);

@ -12,23 +12,21 @@ export default ({ roomsMetrics }) => {
const { t } = useTranslation("dashboardTab");
const {
non_direct_rooms_count,
direct_rooms_count,
non_direct_active_rooms_count,
direct_active_rooms_count,
regular_room_count,
dm_room_count,
active_regular_room_count,
} = roomsMetrics;
const nonDirectRoomPopoverContent = [
"roomsTab:typeHeaderTooltip.content.multiple",
"roomsTab:statusHeaderTooltip.content.active",
const regularRoomPopoverContent = [
"roomsTab:typeHeaderTooltip.content.regularRoom",
].map(i18nKey => (
<p>
<Trans t={t} i18nKey={i18nKey} key={i18nKey} />
</p>
));
const directRoomPopoverContent = [
"roomsTab:typeHeaderTooltip.content.personnal",
const activeRegularRoomPopoverContent = [
"roomsTab:typeHeaderTooltip.content.regularRoom",
"roomsTab:statusHeaderTooltip.content.active",
].map(i18nKey => (
<p>
@ -45,7 +43,7 @@ export default ({ roomsMetrics }) => {
</AdministrateButton>
</Card.Header>
<Card.Body className="DashboardPanel_body">
{non_direct_rooms_count === 0 && direct_rooms_count === 0 ? (
{regular_room_count === 0 && dm_room_count === 0 ? (
<div className="DashboardPanel_noRoomMessage">
<Trans t={t} i18nKey={"roomsPanel.noRoomsMessage"} />
</div>
@ -54,29 +52,28 @@ export default ({ roomsMetrics }) => {
<PanelRow
label={
<>
{t("roomsPanel.nonDirectRoomsCount")}
{t("roomsPanel.activeRegularRoomCount")}
<LabelTooltip
popoverContent={
nonDirectRoomPopoverContent
regularRoomPopoverContent
}
/>
</>
}
value={`${non_direct_active_rooms_count} / ${non_direct_rooms_count}`}
value={active_regular_room_count}
/>
<PanelRow
label={
<>
{t("roomsPanel.directRoomsCount")}
{t("roomsPanel.regularRoomCount")}
<LabelTooltip
popoverContent={
directRoomPopoverContent
activeRegularRoomPopoverContent
}
/>
</>
}
value={`${direct_active_rooms_count} / ${direct_rooms_count}`}
value={regular_room_count}
/>
</>
)}

@ -26,7 +26,7 @@ export default () => {
creator: getDisplayName(item.creator) || "",
memberCount: item.members.length,
status: item.status,
type: item.type,
type: item.type === "dm_room" ? "dmRoom" : "regularRoom",
}));
const getDisplayName = userId => {
@ -83,10 +83,13 @@ export default () => {
const typeHeaderPopoverContent = (
<>
<p>
<Trans t={t} i18nKey={"typeHeaderTooltip.content.personnal"} />
<Trans
t={t}
i18nKey={"typeHeaderTooltip.content.dmRoom"}
/>
</p>
<p>
<Trans t={t} i18nKey={"typeHeaderTooltip.content.multiple"} />
<Trans t={t} i18nKey={"typeHeaderTooltip.content.regularRoom"} />
</p>
</>
);

@ -559,7 +559,7 @@ class UserRightPanel extends Component {
<div className="pannelContainer">
<Card.Body>
<Card body bg="light">
<Table>
<Table className="UserRightPanel_Table">
<tbody>
<tr>
<td className="labelText">
@ -573,7 +573,7 @@ class UserRightPanel extends Component {
</tr>
<tr>
<td className="labelText">
{t("Email")}:
{`t("usersTab:emailAddress") :`}
</td>
{editEmail}
</tr>

@ -33,25 +33,37 @@ export default ({ usersMetrics }) => {
const administratorPopoverContent = (
<p>
<Trans t={t} i18nKey={"usersTab:roleHeaderTooltip.content.administrator"} />
<Trans
t={t}
i18nKey={"usersTab:roleHeaderTooltip.content.administrator"}
/>
</p>
);
const collaboratorPopoverContent = (
<p>
<Trans t={t} i18nKey={"usersTab:roleHeaderTooltip.content.collaborator"} />
<Trans
t={t}
i18nKey={"usersTab:roleHeaderTooltip.content.collaborator"}
/>
</p>
);
const partnerPopoverContent = (
<p>
<Trans t={t} i18nKey={"usersTab:roleHeaderTooltip.content.partner"} />
<Trans
t={t}
i18nKey={"usersTab:roleHeaderTooltip.content.partner"}
/>
</p>
);
const pendingInvitationPopoverContent = (
<p>
<Trans t={t} i18nKey={"usersTab:statusHeaderTooltip.content.invited"} />
<Trans
t={t}
i18nKey={"usersTab:statusHeaderTooltip.content.invited"}
/>
</p>
);
@ -64,7 +76,9 @@ export default ({ usersMetrics }) => {
label={
<>
{t("common:administrators")}
<LabelTooltip popoverContent={administratorPopoverContent} />
<LabelTooltip
popoverContent={administratorPopoverContent}
/>
<AdministratorList
administratorList={administrators_users}
/>
@ -76,7 +90,9 @@ export default ({ usersMetrics }) => {
label={
<>
{t("common:collaborators")}
<LabelTooltip popoverContent={collaboratorPopoverContent} />
<LabelTooltip
popoverContent={collaboratorPopoverContent}
/>
</>
}
value={collaborators}
@ -122,7 +138,9 @@ export default ({ usersMetrics }) => {
label={
<>
{t("usersPanel.pendingInvitationUsers")}
<LabelTooltip popoverContent={pendingInvitationPopoverContent} />
<LabelTooltip
popoverContent={pendingInvitationPopoverContent}
/>
</>
}
value={number_of_users_with_pending_invitation}

Loading…
Cancel
Save