diff --git a/client/config/webpack.config.base.cjs b/client/config/webpack.config.base.cjs index 85e446c..225b8f6 100644 --- a/client/config/webpack.config.base.cjs +++ b/client/config/webpack.config.base.cjs @@ -42,6 +42,10 @@ const webpackConfig = { 'style-loader', 'css-loader', ] + }, + { + test: /\.svg$/, + loader: 'svg-inline-loader' } ] }, diff --git a/client/package-lock.json b/client/package-lock.json index ca141b4..3f44565 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -27,6 +27,7 @@ "less": "^4.6.4", "less-loader": "^12.3.2", "style-loader": "^4.0.0", + "svg-inline-loader": "^0.8.2", "ts-loader": "^9.5.4", "typescript": "^5.9.3", "userscript-metadata-webpack-plugin": "^0.4.2", @@ -2728,6 +2729,16 @@ "node": ">=6.0.0" } }, + "node_modules/big.js": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", + "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": "*" + } + }, "node_modules/body": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/body/-/body-5.1.0.tgz", @@ -3202,6 +3213,16 @@ "dev": true, "license": "ISC" }, + "node_modules/emojis-list": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, "node_modules/enhanced-resolve": { "version": "5.20.1", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz", @@ -5113,6 +5134,34 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/loader-utils": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz", + "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==", + "dev": true, + "license": "MIT", + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^1.0.1" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/loader-utils/node_modules/json5": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", + "dev": true, + "license": "MIT", + "dependencies": { + "minimist": "^1.2.0" + }, + "bin": { + "json5": "lib/cli.js" + } + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -6380,6 +6429,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/simple-html-tokenizer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz", + "integrity": "sha512-Mc/gH3RvlKvB/gkp9XwgDKEWrSYyefIJPGG8Jk1suZms/rISdUuVEMx5O1WBnTWaScvxXDvGJrZQWblUmQHjkQ==", + "dev": true, + "license": "MIT" + }, "node_modules/sirv": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz", @@ -6562,6 +6618,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-inline-loader": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz", + "integrity": "sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==", + "dev": true, + "license": "MIT", + "dependencies": { + "loader-utils": "^1.1.0", + "object-assign": "^4.0.1", + "simple-html-tokenizer": "^0.1.1" + } + }, "node_modules/tapable": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz", diff --git a/client/package.json b/client/package.json index de35d63..1f736d7 100644 --- a/client/package.json +++ b/client/package.json @@ -43,6 +43,7 @@ "less": "^4.6.4", "less-loader": "^12.3.2", "style-loader": "^4.0.0", + "svg-inline-loader": "^0.8.2", "ts-loader": "^9.5.4", "typescript": "^5.9.3", "userscript-metadata-webpack-plugin": "^0.4.2", diff --git a/client/src/call-history.ts b/client/src/call-history.ts index 1ca0ce3..4834690 100644 --- a/client/src/call-history.ts +++ b/client/src/call-history.ts @@ -3,6 +3,7 @@ import { TapiContact } from './tapi-contact' import { extractNumber } from './utils' import GM_fetch from '@trim21/gm-fetch' import { Config } from './config' +const telephoneIcon = require('./telephone.svg'); export class CallHistory { private callerIds: { [number: string]: TapiContact } = {} @@ -58,18 +59,7 @@ export class CallHistory { a.onclick = () => { window.open(href) } - a.innerHTML = '' + - '' + - ' ' + - ' ' + - ' ' + - ' ' + - '' + - '' + a.innerHTML = telephoneIcon; a.classList.add('btn'); a.classList.add('btn-plain'); diff --git a/client/src/index.js b/client/src/index.js index cb60193..210ffc0 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -17,7 +17,7 @@ waitForKeyElements('call-view', (element) => { callNotification.showCallNotifica const callHistory = new CallHistory() // eslint-disable-next-line no-undef -waitForKeyElements('.call-history-list call', (element) => { callHistory.showCallHistory(element) }, false) +waitForKeyElements('call', (element) => { callHistory.showCallHistory(element) }, false) const status = new Status() // eslint-disable-next-line no-undef diff --git a/client/src/status.ts b/client/src/status.ts index 88d53a1..85c8d00 100644 --- a/client/src/status.ts +++ b/client/src/status.ts @@ -2,6 +2,7 @@ import { Config } from './config'; import './status.css'; import { ZcStatus } from './zc-status'; import GM_fetch from "@trim21/gm-fetch"; +const zcIcon = require('./stopwatch-regular-full.svg'); declare function waitForKeyElements(selectorOrFunction: any, callback: any, waitOnce: boolean): any; @@ -57,18 +58,30 @@ export class Status { element.appendChild(divider); var menu = document.createElement('li'); + menu.role = 'menuitem'; element.appendChild(menu); var link = document.createElement('a'); link.id = 'tapi-zc-button'; - link.innerText = 'ZeitConsens'; + //link.innerText = 'ZeitConsens'; link.classList.add('dropdown-item'); link.classList.add('d-flex'); + link.classList.add('align-items-center'); + link.classList.add('gap-2'); link.onclick = () => { document.getElementById('zc-modal').classList.toggle('show'); } menu.appendChild(link); + var icon = document.createElement('span'); + icon.classList.add('icon'); + icon.classList.add('svg-xs'); + icon.innerHTML = zcIcon; + link.appendChild(icon); + var text = document.createElement('span'); + text.innerText = 'ZeitConsens'; + link.appendChild(text); + var html = '
' + '
' + diff --git a/client/src/stopwatch-regular-full.svg b/client/src/stopwatch-regular-full.svg new file mode 100644 index 0000000..e7dee58 --- /dev/null +++ b/client/src/stopwatch-regular-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/telephone.svg b/client/src/telephone.svg new file mode 100644 index 0000000..d3dd155 --- /dev/null +++ b/client/src/telephone.svg @@ -0,0 +1,12 @@ + + + + + + + +