kamp/IOPaint
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

Added button tooltips

Browse Source
This commit is contained in:
blessedcoolant 2022-05-04 09:53:42 +12:00
parent e8cf7e8d9c
commit b90e32886a
15 changed files with 63 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
lama_cleaner/app/build/asset-manifest.json
View File

@ -1,7 +1,7 @@
{
"files": {
"main.css": "/static/css/main.6ee9d650.chunk.css",
"main.js": "/static/js/main.ffa71c45.chunk.js",
"main.css": "/static/css/main.54bb8710.chunk.css",
"main.js": "/static/js/main.b530ed59.chunk.js",
"runtime-main.js": "/static/js/runtime-main.5e86ac81.js",
"static/js/2.637977cb.chunk.js": "/static/js/2.637977cb.chunk.js",
"index.html": "/index.html",
@ -11,7 +11,7 @@
"entrypoints": [
"static/js/runtime-main.5e86ac81.js",
"static/js/2.637977cb.chunk.js",
"static/css/main.6ee9d650.chunk.css",
"static/js/main.ffa71c45.chunk.js"
"static/css/main.54bb8710.chunk.css",
"static/js/main.b530ed59.chunk.js"
]
}

2
lama_cleaner/app/build/index.html
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/><meta name="theme-color" content="#ffffff"/><title>lama-cleaner - Image inpainting powered by LaMa</title><link href="/static/css/main.6ee9d650.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>"localhost"===location.hostname&&(self.FIREBASE_APPCHECK_DEBUG_TOKEN=!0)</script><script>!function(e){function r(r){for(var n,l,a=r[0],f=r[1],i=r[2],p=0,s=[];p<a.length;p++)l=a[p],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var f=t[a];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var a=this["webpackJsonplama-cleaner"]=this["webpackJsonplama-cleaner"]||[],f=a.push.bind(a);a.push=r,a=a.slice();for(var i=0;i<a.length;i++)r(a[i]);var c=f;t()}([])</script><script src="/static/js/2.637977cb.chunk.js"></script><script src="/static/js/main.ffa71c45.chunk.js"></script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/><meta name="theme-color" content="#ffffff"/><title>lama-cleaner - Image inpainting powered by LaMa</title><link href="/static/css/main.54bb8710.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>"localhost"===location.hostname&&(self.FIREBASE_APPCHECK_DEBUG_TOKEN=!0)</script><script>!function(e){function r(r){for(var n,l,a=r[0],f=r[1],i=r[2],p=0,s=[];p<a.length;p++)l=a[p],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var f=t[a];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var a=this["webpackJsonplama-cleaner"]=this["webpackJsonplama-cleaner"]||[],f=a.push.bind(a);a.push=r,a=a.slice();for(var i=0;i<a.length;i++)r(a[i]);var c=f;t()}([])</script><script src="/static/js/2.637977cb.chunk.js"></script><script src="/static/js/main.b530ed59.chunk.js"></script></body></html>

1
lama_cleaner/app/build/static/css/main.54bb8710.chunk.css Normal file
View File

File diff suppressed because one or more lines are too long

1
lama_cleaner/app/build/static/css/main.6ee9d650.chunk.css
View File

File diff suppressed because one or more lines are too long

1
lama_cleaner/app/build/static/js/main.b530ed59.chunk.js Normal file
View File

File diff suppressed because one or more lines are too long

1
lama_cleaner/app/build/static/js/main.ffa71c45.chunk.js
View File

File diff suppressed because one or more lines are too long

10
lama_cleaner/app/src/components/Editor/Editor.tsx
View File

@ -686,11 +686,15 @@ export default function Editor(props: EditorProps) {
/>
<div className="editor-toolkit-btns">
<Button
toolTip="Show Full"
tooltipPosition="top"
icon={<ArrowsExpandIcon />}
disabled={scale === minScale && panned === false}
onClick={resetZoom}
/>
<Button
toolTip="Undo"
tooltipPosition="top"
icon={
<svg
width="19"
@ -709,6 +713,8 @@ export default function Editor(props: EditorProps) {
disabled={disableUndo()}
/>
<Button
toolTip="Show Original"
tooltipPosition="top"
icon={<EyeIcon />}
className={showOriginal ? 'eyeicon-active' : ''}
onDown={ev => {
@ -729,6 +735,8 @@ export default function Editor(props: EditorProps) {
disabled={renders.length === 0}
/>
<Button
toolTip="Save Image"
tooltipPosition="top"
icon={<DownloadIcon />}
disabled={!renders.length}
onClick={download}
@ -736,6 +744,8 @@ export default function Editor(props: EditorProps) {
{settings.runInpaintingManually && (
<Button
toolTip="Run Inpainting"
tooltipPosition="top"
icon={
<svg
width="24"

2
lama_cleaner/app/src/components/Settings/SettingIcon.tsx
View File

@ -14,6 +14,8 @@ const SettingIcon = () => {
<div>
<Button
onClick={onClick}
toolTip="Settings"
tooltipPosition="bottom"
style={{ border: 0 }}
icon={
<svg

2
lama_cleaner/app/src/components/Shortcuts/Shortcuts.tsx
View File

@ -22,6 +22,8 @@ const Shortcuts = () => {
<div className="shortcuts">
<Button
onClick={shortcutStateHandler}
toolTip="Hotkeys"
tooltipPosition="bottom"
disabled={shortcutVisibility}
style={{ border: 0 }}
icon={

3
lama_cleaner/app/src/components/shared/Button.scss
View File

@ -1,8 +1,9 @@
@use '../../styles/Mixins/' as *;
.btn-primary {
display: grid;
grid-auto-flow: column;
column-gap: 1rem;
// border: 1px solid var(--btn-border-color);
color: var(--btn-text-color);
font-family: 'WorkSans', sans-serif;
width: max-content;

7
lama_cleaner/app/src/components/shared/Button.tsx
View File

@ -5,6 +5,8 @@ interface ButtonProps {
children?: ReactNode
className?: string
icon?: ReactNode
toolTip?: string
tooltipPosition?: string
onKeyDown?: () => void
onClick?: () => void
onDown?: (ev: PointerEvent) => void
@ -18,6 +20,8 @@ const Button: React.FC<ButtonProps> = props => {
className,
disabled,
icon,
toolTip,
tooltipPosition,
onKeyDown,
onClick,
onDown,
@ -33,6 +37,7 @@ const Button: React.FC<ButtonProps> = props => {
return (
<div
role="button"
data-tooltip={toolTip}
style={style}
onKeyDown={onKeyDown}
onClick={blurOnClick}
@ -47,6 +52,8 @@ const Button: React.FC<ButtonProps> = props => {
'btn-primary',
children ? 'btn-primary-content' : '',
disabled === true ? 'btn-primary-disabled' : '',
toolTip ? 'info-tooltip' : '',
tooltipPosition ? `info-tooltip-${tooltipPosition}` : '',
className,
].join(' ')}
>

28
lama_cleaner/app/src/components/shared/Tooltip.scss Normal file
View File

@ -0,0 +1,28 @@
$tooltip-translate: 100%;
$tooltip-margin: 1.5rem;
.info-tooltip {
&:hover:before {
content: attr(data-tooltip);
position: absolute;
background-color: var(--tooltip-bg);
color: var(--tooltip-text-color);
padding: 0.5rem;
border-radius: 0.3rem;
z-index: 2;
}
}
.info-tooltip-top {
&:hover:before {
transform: translateY(calc($tooltip-translate * -1));
margin-bottom: $tooltip-margin;
}
}
.info-tooltip-bottom {
&:hover:before {
transform: translateY($tooltip-translate);
margin-top: $tooltip-margin;
}
}

2
lama_cleaner/app/src/styles/_Colors.scss
View File

@ -9,6 +9,8 @@
--link-color: rgb(0, 0, 0);
--border-color: rgb(100, 100, 120);
--border-color-light: rgba(100, 100, 120, 0.5);
--tooltip-bg: rgb(230, 230, 234);
--tooltip-text-color: rgb(0, 0,0);
--error-color: rgb(239, 68, 68);
--success-color: rgb(16, 185, 129);

2
lama_cleaner/app/src/styles/_ColorsDark.scss
View File

@ -9,6 +9,8 @@
--link-color: var(--yellow-accent);
--border-color: rgb(100, 100, 120);
--border-color-light: rgba(102, 102, 102);
--tooltip-bg: rgb(33, 33, 33);
--tooltip-text-color: rgb(210, 210, 210);
// Editor
--editor-toolkit-bg: rgba(0, 0, 0, 0.5);

1
lama_cleaner/app/src/styles/_index.scss
View File

@ -21,6 +21,7 @@
@use '../components/shared/Switch';
@use '../components/shared/NumberInput';
@use '../components/shared/Toast';
@use '../components/shared/Tooltip';
// Main CSS
*,