Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • advertisement
  • automagic
  • dbp-translation-component
  • demo
  • demo-file-handling
  • favorites-and-recent-files
  • icon-set-mapping
  • lit2
  • main
  • person-select-custom
  • port-i18next-parser
  • publish
  • remove-sentry
  • renovate/lock-file-maintenance
  • revert-6c632dc6
  • wc-part
  • wip-cleanup
17 results

Target

Select target project
  • 987FCF504483CBC8/toolkit
1 result
Select Git revision
  • advertisement
  • automagic
  • dbp-translation-component
  • demo
  • demo-file-handling
  • favorites-and-recent-files
  • icon-set-mapping
  • lit2
  • main
  • person-select-custom
  • port-i18next-parser
  • publish
  • remove-sentry
  • renovate/lock-file-maintenance
  • revert-6c632dc6
  • wc-part
  • wip-cleanup
17 results
Show changes
Commits on Source (40)
Showing
with 7790 additions and 10 deletions
......@@ -52,7 +52,7 @@ publish:
- ssh-keyscan -t rsa "${DEPLOY_HOST}" >> ~/.ssh/known_hosts
# Deploy
- cd toolkit-showcase
- dep deploy "${CI_ENVIRONMENT_NAME}"
- dep deploy --file ./../.gitlab-ci/deploy.php "${CI_ENVIRONMENT_NAME}"
- echo "Deployed to ${CI_ENVIRONMENT_URL}"
# Simple health check
- curl --max-time 10 --retry 3 --output /dev/null --silent --show-error --fail --location "${CI_ENVIRONMENT_URL}"
......
......@@ -23,7 +23,7 @@ set('rsync',[
'timeout' => 60,
]);
set('rsync_src', __DIR__ . '/dist');
set('rsync_src', __DIR__ . '/../toolkit-showcase/dist');
set('rsync_dest','{{release_path}}');
// Hosts
......
This diff is collapsed.
......@@ -5,3 +5,4 @@ npm-debug.log
.vscode
.cert
package-lock.json
yarn.lock
......@@ -3,3 +3,4 @@ node_modules
npm-debug.log
package-lock.json
index.html
yarn.lock
......@@ -27,12 +27,12 @@ You need Keycloak and other parts to be in place to really make full use of the
Best take a look on examples like [index.html](https://gitlab.tugraz.at/dbp/esign/signature/-/blob/master/examples/dbp-signature/index.html)
for more explanation.
You need to set the `provider-root` attribute for the app-shell to "terminate" all provider events.
If you don't want to set the app-shell as `provider-root` then you need to set the attributes `auth`,
`requested-login-status` and `analytics-event` as attribute for the app-shell or in a `dbp-provider` above it.
## Attributes
- `provider-root` (optional): You need to set the `provider-root` attribute for the app-shell to "terminate" all provider events
- If you don't want to set the app-shell as `provider-root` then you need to set the attributes `auth`,
`requested-login-status` and `analytics-event` as attribute for the app-shell or in a `dbp-provider` above it
- example `<dbp-app-shell provider-root></dbp-app-shell>`
- `lang` (optional, default: `de`): set to `de` or `en` for German or English
- example `<dbp-app-shell lang="de"></dbp-app-shell>`
- `src`: The path to a topic metadata file (json)
......
{
"name": "@dbp-toolkit/app-shell",
"homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/app-shell",
"version": "0.2.6",
"version": "0.2.7",
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
......
......@@ -66,6 +66,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
this.matomoSiteId = -1;
this._attrObserver = new MutationObserver(this.onAttributeObserved);
this._onShowActivityEvent = this._onShowActivityEvent.bind(this);
this.auth = {};
}
......@@ -761,6 +762,10 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
return elm;
}
_onShowActivityEvent(e) {
this.switchComponent(e.detail.name);
}
_onActivityAdded(element) {
for(const key of this.topic.attributes || []) {
let value = sessionStorage.getItem('dbp-attr-' + key);
......@@ -769,10 +774,12 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
}
}
this._attrObserver.observe(element, {attributes: true, attributeFilter: this.topic.attributes});
element.addEventListener('dbp-show-activity', this._onShowActivityEvent);
}
_onActivityRemoved(element) {
this._attrObserver.disconnect();
element.removeEventListener('dbp-show-activity', this._onShowActivityEvent);
}
track(action, message) {
......
......@@ -52,6 +52,23 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
h2 a:hover {
color: #E4154B;
}
h2 a {
cursor: pointer;
text-decoration: none;
}
h2 a::after {
content: "\\00a0\\00a0\\00a0";
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.6836mm%22%20width%3D%225.2043mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-size: 60%;
background-repeat: no-repeat;
background-position: center center;
margin: 0 0 0 6px;
padding: 0 0 -0.75% 0px;
animation: 0.15s linkIconOut;
font-size: 100%;
}
`;
}
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="lni_lni-checkmark-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">
<g>
<path d="M26,51C12.2,51,1.1,39.8,1.1,26S12.2,1.1,26,1.1S51,12.2,51,26S39.8,51,26,51z M26,3.9C13.8,3.9,3.9,13.8,3.9,26
S13.8,48.2,26,48.2s22.2-10,22.2-22.2S38.2,3.9,26,3.9z"/>
</g>
<g>
<circle cx="25.6" cy="12.4" r="2"/>
<path d="M29.6,39.8H27V19.5c0-1.2-0.9-2.1-2.1-2.1h-2.4c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h2.4c0.2,0,0.3,0.1,0.3,0.3v20.2
h-2.6c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h7.1c0.5,0,0.9-0.4,0.9-0.9S30.1,39.8,29.6,39.8z"/>
</g>
</svg>
......@@ -1069,6 +1069,17 @@ export function getLinkCss() {
animation: 0s linkIconIn;
font-size: 103%;
}
.int-link-internal{
transition: background-color 0.15s, color 0.15s;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
.int-link-internal:hover{
background-color: black;
color: white;
text-decoration: underline;
}
`;
}
......@@ -37,7 +37,7 @@
"@dbp-toolkit/auth": "^0.2.2",
"@dbp-toolkit/common": "^0.2.2",
"@open-wc/scoped-elements": "^1.3.3",
"datatables.net-buttons": "^1.6.1",
"datatables.net-buttons": "^2.0.0",
"datatables.net-buttons-dt": "^2.0.0",
"datatables.net-dt": "^1.10.20",
"datatables.net-responsive": "^2.2.3",
......
/vendor/**
/dist/**
/*.js
\ No newline at end of file
{
"root": true,
"extends": "./../../eslint.common.json"
}
\ No newline at end of file
dist
node_modules
.idea
npm-debug.log
package-lock.json
node_modules
.idea
npm-debug.log
package-lock.json
index.html
This diff is collapsed.
# Tooltip Web Component
The tooltip component provides an icon as an anker for a tooltip.
There is a generic tooltip `<dbp-tooltip>` which supports any icon the app has bundled.
Another info tooltip `<dbp-info-tooltip>` shows an embedded info icon (small letter i inside a circle) as a convenient
shortcut.
## Install
You can install this component via npm:
```bash
npm i @dbp-toolkit/tooltip
```
## Usage
```html
<dbp-tooltip text-content="text to show" icon-name="information"></dbp-tooltip>
<dbp-info-tooltip text-content="text to show"></dbp-info-tooltip>
<script type="module" src="node_modules/@dbp-toolkit/tooltip/dist/dbp-tooltip.js"></script>
```
Or directly via CDN:
```html
<dbp-tooltip text-content="text to show" icon-name="information"></dbp-tooltip>
<dbp-info-tooltip text-content="text to show"></dbp-info-tooltip>
<script type="module" src="https://unpkg.com/@dbp-toolkit/tooltip@0.0.1/dist/dbp-tooltip.js"></script>
```
## Attributes
- `text-content`: Text to show as tooltip (default is 'text missing.' as a reminder!)
- `icon-name`: (`<dbp-tooltip>` only, default is a skull) Name of the bundled icon (SVG) for `<dbp-icon>`
- `button-text`: (`<dbp-button-tooltip>` only, default is 'submit') Text on the button
- `type`: (`<dbp-button-tooltip>` only, default is 'submit') Options are 'submit', 'reset', or any string
- `form-id`: (`<dbp-button-tooltip>` only) Id of the from to submit, if omitted the next form in DOM hirachy will be used.
\ No newline at end of file
packages/tooltip/assets/favicon.ico

2.49 KiB

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="module" src="dbp-tooltip-demo.js"></script>
</head>
<body>
<dbp-tooltip-demo lang="de" ></dbp-tooltip-demo>
<p>version: <span style="color: white; background-color: black;"><%= buildInfo.info %></span></p>
</body>
</html>