Updated buttons and their context
This commit is contained in:
parent
b58118dba8
commit
c06d7fd214
7 changed files with 172 additions and 35 deletions
42
package-lock.json
generated
42
package-lock.json
generated
|
|
@ -8,6 +8,7 @@
|
|||
"name": "octubre",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
|
|
@ -886,6 +887,42 @@
|
|||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
|
||||
"integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
|
||||
"integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.7.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/react-fontawesome": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
|
||||
"integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
|
||||
"react": ">=16.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanfs/core": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
|
||||
|
|
@ -3215,7 +3252,6 @@
|
|||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/js-yaml": {
|
||||
|
|
@ -3345,7 +3381,6 @@
|
|||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
|
|
@ -3431,7 +3466,6 @@
|
|||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -3702,7 +3736,6 @@
|
|||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
|
|
@ -3745,7 +3778,6 @@
|
|||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import './app.css'
|
||||
import ButtonGroup from "./buttonGroup.jsx";
|
||||
import Button from "./button.jsx";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
|
|
@ -15,7 +16,7 @@ function App() {
|
|||
|
||||
<div className="buttonGroup">
|
||||
<ButtonGroup
|
||||
buttons={[["Home", "https://home.octubre.be"], ["Cloud", "https://cloud.octubre.be"], ["Me", "https://me.octubre.be"], ["Chat", "https://chat.octubre.be"], ["Archive", "https://archive.octubre.be"], ["Dev", "https://dev.octubre.be"], ["Blog", "https://blog.octubre.be"], ["Status", "https://status.octubre.be"], ["Log", "https://log.octubre.be"], ["Media", "https://media.octubre.be"], ["Pyros", "https://pyros.octubre.be"] ]}/>
|
||||
buttons={[["Home", "https://home.octubre.be", "Home Automation Platform using HomeAssistant"], ["Cloud", "https://cloud.octubre.be", "Personal Office Infrastructure using Nextcloud"], ["Media", "https://media.octubre.be", "Multimedia management solution using Immich"], ["Blog", "https://blog.octubre.be", "Blog about this hobby project and it's development roadmap - Under construction"], ["Me", "https://me.octubre.be", "My portfolio page"], ["Chat", "https://chat.octubre.be", "Federated chat instance using Matrix - Under construction"], ["Log", "https://log.octubre.be", "Update log linked to the blog - Under construction"], ["Status", "https://status.octubre.be", "External status page of the different Octubre services"], ["Git", "https://git.octubre.be", "Forgejo based gitserver, alternative for my Github account"], ["#Soon", "", "Pyros? - Under construction"], ["Archive", "https://archive.octubre.be", "Separate website to host old, no longer maintained packages & websites - Under construction"], ["Dev", "https://dev.octubre.be", "Development subdomain for alfa & beta releases"]]}/>
|
||||
</div>
|
||||
|
||||
<h3>Contact</h3>
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
margin: 0.5vw;
|
||||
padding: 10px 10px;
|
||||
|
||||
text-align: center;
|
||||
width: 150px;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: rgb(255, 102, 0);
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
35
src/button.jsx
Normal file
35
src/button.jsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { useState } from 'react';
|
||||
import styles from './button.module.css';
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; // Import the CSS file
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const Button = ({ note, onClick, faIcon, clicked = false, title, shortCut, right = false , text = ''}) => {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const controlButtonNote = right ? styles.controlButtonNoteRight : styles.controlButtonNote;
|
||||
|
||||
return (
|
||||
<div className={styles.controlButtonContainer}>
|
||||
<button
|
||||
aria-label={note}
|
||||
className={styles.controlButton}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<FontAwesomeIcon icon={faIcon} style={{color: clicked ? '#c084fc' : '#ffffff'}}/>
|
||||
{text}
|
||||
</button>
|
||||
{isHovered &&
|
||||
<span className={controlButtonNote}>
|
||||
<div className={styles.tooltipHeader}>
|
||||
<span className={styles.tooltipTitle}>{title}</span>
|
||||
<span className={styles.tooltipShortcut}>{shortCut}</span>
|
||||
</div>
|
||||
<p className={styles.tooltipNote}>{note}</p>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
95
src/button.module.css
Normal file
95
src/button.module.css
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
:root {
|
||||
--foreground-color: rgba(255, 255, 255, 0.87);
|
||||
--background-color: #242424;
|
||||
--on-background-color-primary: #1a1a1a;
|
||||
--on-background-color-secondary: rgb(64, 64, 64);
|
||||
--primary-color: rgb(255, 102, 0);
|
||||
/*--secundary-color: #c084fc;*/
|
||||
}
|
||||
.controlButtonContainer{
|
||||
position: relative; /* Needed for absolute positioning of the tooltip */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.controlButton {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
margin: 0.5vw;
|
||||
padding: 10px 10px;
|
||||
|
||||
text-align: center;
|
||||
width: 150px;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
|
||||
background-color: var(--on-background-color-primary);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
.controlButton:hover {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
.controlButton:focus,
|
||||
.controlButton:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.controlButtonNote {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top: 100%;
|
||||
background-color: var(--on-background-color-secondary);
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
white-space: nowrap;
|
||||
z-index: 1000; /* Ensure it appears above other elements */
|
||||
}
|
||||
|
||||
.controlButtonNoteRight {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
background-color: var(--on-background-color-secondary);
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
white-space: nowrap;
|
||||
z-index: 1000; /* Ensure it appears above other elements */
|
||||
}
|
||||
|
||||
/* Title & Shortcut in One Row */
|
||||
.tooltipHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Title on the Left */
|
||||
.tooltipTitle {
|
||||
color: var(--primary-color);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* Shortcut on the Right */
|
||||
.tooltipShortcut {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Note Below */
|
||||
.tooltipNote {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
color: #ddd;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import "./button.css";
|
||||
import Button from "./button.jsx";
|
||||
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const ButtonGroup = ({ buttons }) => {
|
||||
|
|
@ -9,9 +9,7 @@ const ButtonGroup = ({ buttons }) => {
|
|||
<>
|
||||
{/* eslint-disable-next-line react/prop-types */}
|
||||
{buttons.map((buttonLabel, i) => (
|
||||
<button key={i} name={buttonLabel[0]} onClick={() => openInNewTab(buttonLabel[1])}>
|
||||
{buttonLabel[0]}
|
||||
</button>
|
||||
<Button key={i} text={buttonLabel[0]} onClick={() => openInNewTab(buttonLabel[1])} note={buttonLabel[2]} title={buttonLabel[1]}/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue