From cb1658446810d15055d5318525b26c1b38d6175e Mon Sep 17 00:00:00 2001 From: CodeServer Date: Tue, 12 Apr 2022 06:38:36 +0100 Subject: [PATCH] Added Tooltip --- src/components/navbar/NavBar.tsx | 10 ++++++ .../repositoryInfo/RepositoryInfo.tsx | 32 +++++++++++++++---- src/style/modules/_repositoryInfo.sass | 12 ++++++- src/style/style.css | 16 ++++++++++ src/style/style.css.map | 2 +- src/utils.tsx | 19 ++++++++--- 6 files changed, 78 insertions(+), 13 deletions(-) diff --git a/src/components/navbar/NavBar.tsx b/src/components/navbar/NavBar.tsx index da93276..f2983ee 100644 --- a/src/components/navbar/NavBar.tsx +++ b/src/components/navbar/NavBar.tsx @@ -73,7 +73,17 @@ const NavBar: React.FC = () => { tag.architecture = res?.data?.architecture; tag.os = res?.data?.os; tag.created = new Date(res?.data?.created); + }).catch((err) => { + const index = repository.tags.indexOf(tag); + if (index > -1) { + repository.tags.splice(index, 1); + } }); + }).catch((err) => { + const index = repository.tags.indexOf(tag); + if (index > -1) { + repository.tags.splice(index, 1); + } }); promises.push(promise); }); diff --git a/src/components/repositoryInfo/RepositoryInfo.tsx b/src/components/repositoryInfo/RepositoryInfo.tsx index 5c013a4..0d424ef 100644 --- a/src/components/repositoryInfo/RepositoryInfo.tsx +++ b/src/components/repositoryInfo/RepositoryInfo.tsx @@ -1,11 +1,11 @@ import React from "react"; import { useLocation, Link } from "react-router-dom"; -import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert } from "@mui/material"; +import { ListItemButton, Button, Box, Card, CardContent, Typography, CardActions, Grid, List, ListItemText, Snackbar, Alert, Tooltip } from "@mui/material"; import AccessTimeIcon from '@mui/icons-material/AccessTime'; import useRepositories from "../../hooks/useRepositories"; import Tag from "../../interfaces/Tag"; import Repository from "../../interfaces/Repositoriy"; -import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon } from "../../utils"; +import { getHostNameFromURL, printSize, printTimePassed, PrintOSIcon, toUpperFirst } from "../../utils"; import RepoNotFound from "./RepoNotFound" import Loading from "../Loading"; @@ -44,7 +44,7 @@ const RepositoryInfo: React.FC = () => { Word of the Day */} - + {repository.name} @@ -53,7 +53,7 @@ const RepositoryInfo: React.FC = () => { {"Last updated: " + repository.tags.filter((tag: Tag) => (tag.label === "latest")).map((tag: Tag) => (tag.created ? printTimePassed(tag.created) : "")).join(" ")} - + Docker commands @@ -112,13 +112,33 @@ const RepositoryInfo: React.FC = () => { - } /> + +
{"Operating System: " + toUpperFirst(tag.os)}
+
+
{"Architecture: " + tag.architecture}
+ + } + placement="bottom" + arrow + > + } /> + - + + + ))} diff --git a/src/style/modules/_repositoryInfo.sass b/src/style/modules/_repositoryInfo.sass index dff86a5..c3a1fbd 100644 --- a/src/style/modules/_repositoryInfo.sass +++ b/src/style/modules/_repositoryInfo.sass @@ -17,10 +17,20 @@ .tagsDetail margin: 5% padding: 15px + .iconWrapper + height: 24px + width: 24px + .icon + height: 24px + width: 24px .lines margin-bottom: 10px .moreBtn color: #1976d2 cursor: pointer .moreBtn:focus - color: purple \ No newline at end of file + color: purple + +@media (max-width: 1199px) + .repositoryInfo + max-width: 90% \ No newline at end of file diff --git a/src/style/style.css b/src/style/style.css index 45e938b..b1b0329 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -55,6 +55,16 @@ a { padding: 15px; } +.repositoryInfo .tagsDetail .iconWrapper { + height: 24px; + width: 24px; +} + +.repositoryInfo .tagsDetail .icon { + height: 24px; + width: 24px; +} + .repositoryInfo .tagsDetail .lines { margin-bottom: 10px; } @@ -68,6 +78,12 @@ a { color: purple; } +@media (max-width: 1199px) { + .repositoryInfo { + max-width: 90%; + } +} + .login .grid-container { -webkit-box-align: center; -ms-flex-align: center; diff --git a/src/style/style.css.map b/src/style/style.css.map index d859a12..6506728 100644 --- a/src/style/style.css.map +++ b/src/style/style.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG;;AElD5B,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,CAAC;CAKU;;AANvB,AAEI,OAFG,CAEH,SAAS,CAAC;EACN,KAAK,EAAE,KAAK;CAAG;;AAHvB,AAII,OAJG,CAIH,WAAW,CAAC;EACR,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,GAAG;CAAG;;AGNrB,AACI,YADQ,CACR,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAAG;;ACHvB,AAAA,eAAe,CAAC;EACZ,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;CAuBgB;;AAzBhC,AAGI,eAHW,CAGX,iBAAiB,CAAC;EACd,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAUW;;AAfhC,AAMQ,eANO,CAGX,iBAAiB,CAGb,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AAPlC,AAQQ,eARO,CAGX,iBAAiB,CAKb,WAAW,CAAC;EACR,cAAc,EAAE,MAAM;EACtB,YAAY,EAAE,IAAI;CAAG;;AAVjC,AAWQ,eAXO,CAGX,iBAAiB,CAQb,eAAe,CAAC;EACZ,WAAW,EAAE,IAAI;EACjB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,GAAG;CAAG;;AAf9B,AAgBI,eAhBW,CAgBX,WAAW,CAAC;EACR,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,IAAI;CAOS;;AAzB9B,AAmBQ,eAnBO,CAgBX,WAAW,CAGP,MAAM,CAAC;EACH,aAAa,EAAE,IAAI;CAAG;;AApBlC,AAqBQ,eArBO,CAgBX,WAAW,CAKP,QAAQ,CAAC;EACL,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,OAAO;CAAG;;AAvB9B,AAwBQ,eAxBO,CAgBX,WAAW,CAQP,QAAQ,AAAA,MAAM,CAAC;EACX,KAAK,EAAE,MAAM;CAAG;;ACzB5B,AACI,MADE,CACF,eAAe,CAAC;EACZ,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;EACf,SAAS,EAAE,cAAc;CAeS;;AApB1C,AAMQ,MANF,CACF,eAAe,GAKT,CAAC,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CAAG;;AAR7B,AASQ,MATF,CACF,eAAe,CAQX,YAAY,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;CAAG;;AAb9B,AAcQ,MAdF,CACF,eAAe,CAaX,UAAU,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;CACpB;;AAjBF,AAkBQ,MAlBF,CACF,eAAe,CAiBX,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAAG;;ACpBxC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,GAAG;CAEU;;AAL7B,AAII,QAJI,CAIJ,eAAe,CAAC;EACZ,UAAU,EAAE,IAAI;CAAG", + "mappings": "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", "sources": [ "style.sass", "_variables.sass", diff --git a/src/utils.tsx b/src/utils.tsx index 777425a..b3c16f0 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -1,4 +1,5 @@ import axios from "./api/axios" +import React from "react"; import { FcLinux } from "react-icons/fc"; import { FaWindows } from "react-icons/fa"; @@ -17,6 +18,14 @@ const checkValidURL = async (url: string) => { return true; } +const toUpperFirst= (s: string):string => { + if (s.length > 0) { + return s[0].toUpperCase() + s.substring(1); + } else { + return s; + } +}; + const getHostNameFromURL = (url: string): string => { const urlSplit = url.split('/'); return urlSplit[urlSplit.length - 1]; @@ -56,14 +65,14 @@ const printSize = (sizeInByte: number): string => { } }; -const PrintOSIcon: React.FC<{ os: string }> = ({ os }) => { +const PrintOSIcon: React.FC<{ className: string, os: string }> = ({ className, os }) => { if (os === "linux") { - return + return } else if (os === "windows") { - return + return } else { - return
os
; + return
os
; } } -export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon }; \ No newline at end of file +export { checkValidURL, printTwoDecimalPlaces, printTimePassed, printSize, getHostNameFromURL, PrintOSIcon, toUpperFirst }; \ No newline at end of file