Clarify meaning of icons by adding title in sources view

This commit is contained in:
Florian Scholdei
2020-10-05 15:57:41 +02:00
parent 7e37178fc5
commit 68a6d09c14
5 changed files with 21 additions and 16 deletions

View File

@@ -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;

View File

@@ -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>
);