Clarify meaning of icons by adding title in sources view

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -149,7 +149,9 @@
       "description": "Beschreibung",
       "notYetComputed": "Noch nicht berechnet; Der Wert wird in Kürze aktualisiert",
       "computationAborted": "Die Berechnung dauert zu lange und wurde abgebrochen",
-      "subRepository": "Subrepository:"
+      "subRepository": "Subrepository",
+      "folder": "Ordner",
+      "file": "Datei"
     },
     "content": {
       "historyButton": "History",

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -149,7 +149,9 @@
       "description": "Description",
       "notYetComputed": "Not yet computed, will be updated in a short while",
       "computationAborted": "The computation took too long and was aborted",
-      "subRepository": "Subrepository:"
+      "subRepository": "Subrepository",
+      "folder": "Folder",
+      "file": "File"
     },
     "content": {
       "historyButton": "History",

scm-ui/ui-webapp/public/locales/es/repos.json

@@ -110,7 +110,9 @@
       "description": "Descripción",
       "notYetComputed": "Aún no calculado, se actualizará en poco tiempo",
       "computationAborted": "El cálculo tomó demasiado tiempo y fue abortado",
-      "subRepository": "Subrepositorio:"
+      "subRepository": "Subrepositorio",
+      "folder": "Carpeta",
+      "file": "Ficha"
     },
     "content": {
       "historyButton": "Historia",

scm-ui/ui-webapp/src/repos/sources/components/FileIcon.tsx

@@ -21,24 +21,23 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC } from "react";
 import { File } from "@scm-manager/ui-types";
+import { Icon } from "@scm-manager/ui-components";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   file: File;
 };
 
-class FileIcon extends React.Component<Props> {
-  render() {
-    const { file } = this.props;
-    let icon = "fas fa-file";
-    if (file.subRepository) {
-      icon = "far fa-folder";
-    } else if (file.directory) {
-      icon = "fas fa-folder";
-    }
-    return <i className={icon} />;
+const FileIcon: FC<Props> = ({ file }) => {
+  const [t] = useTranslation("repos");
+  if (file.subRepository) {
+    return <Icon title={t("sources.fileTree.subRepository")} iconStyle="far" name="folder" color="inherit" />;
+  } else if (file.directory) {
+    return <Icon title={t("sources.fileTree.folder")} name="folder" color="inherit" />;
   }
-}
+  return <Icon title={t("sources.fileTree.file")} name="file" color="inherit" />;
+};
 
 export default FileIcon;

scm-ui/ui-webapp/src/repos/sources/components/content/FileLink.tsx

@@ -86,7 +86,7 @@ const FileLink: FC<Props> = ({ baseUrl, file, children }) => {
       return <Link to={link}>{children}</Link>;
     } else {
       return (
-        <Tooltip location="top" message={t("sources.fileTree.subRepository") + "\n" + link}>
+        <Tooltip location="top" message={t("sources.fileTree.subRepository") + ": \n" + link}>
           {children}
         </Tooltip>
       );