split code base for UI from dpo-voyager

source/ui/Logo.ts

-/**
- * 3D Foundation Project
- * Copyright 2019 Smithsonian Institution
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import CustomElement, { customElement, html } from "@ff/ui/CustomElement";
-
-////////////////////////////////////////////////////////////////////////////////
-
-@customElement("sv-logo")
-export default class Logo extends CustomElement
-{
-    protected static readonly h = html`<div class="sv-sunburst"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 161">
-      <path style="stroke-width:1.40431406744;fill:#00a5e8" d="M82.02 53.44C86.63 53.44 91.25 53.44 95.85 53.44C95.85 71.29 95.85 89.13 95.85 107.0C91.22 107.0 86.57 107.0 81.93 107.0C81.93 99.63 81.93 92.29 81.93 84.94C75.24 84.94 68.56 84.94 61.86 84.94C61.86 88.25 61.86 91.54 61.86 94.85C75.96 103.4 90.07 112.0 104.2 120.6C104.2 93.71 104.2 66.84 104.2 39.97C96.79 44.46 89.4 48.96 82.02 53.44C82.02 53.44 82.02 53.44 82.02 53.44M47.94 74.18C44.6 76.21 41.25 78.25 37.9 80.28C41.25 82.32 44.6 84.35 47.94 86.38C47.94 82.31 47.94 78.25 47.94 74.18C47.94 74.18 47.94 74.18 47.94 74.18M81.93 53.5C75.24 57.57 68.56 61.64 61.86 65.71C61.86 68.53 61.86 71.34 61.86 74.16C68.56 74.16 75.24 74.16 81.93 74.16C81.93 67.28 81.93 60.38 81.93 53.5C81.93 53.5 81.93 53.5 81.93 53.5" id="polygon3684" />
-      <path style="stroke-width:1.40431406744;fill:#00517d" d="M81.93 85.51C82.17 84.75 81.45 84.95 80.94 84.94C74.58 84.94 68.22 84.94 61.86 84.94C61.86 89.2 61.86 93.46 61.86 97.72C68.56 93.65 75.24 89.58 81.93 85.51C81.93 85.51 81.93 85.51 81.93 85.51M81.93 73.91C75.24 69.84 68.56 65.77 61.86 61.7C61.86 65.85 61.86 70.01 61.86 74.16C68.56 74.16 75.24 74.16 81.93 74.16C81.93 74.06 81.93 73.99 81.93 73.91C81.93 73.91 81.93 73.91 81.93 73.91" id="polygon3708" />
-    </svg></div>`;
-    protected static readonly text = html`<div class="sv-smithsonian"><svg xmlns="http://www.w3.org/2000/svg" viewBox="150 0 362 161">
-      <g class="logo-text" style="fill:#103040;">
-        <path id="text-h"
-          d="m 159.7,44.78 c 0,0 0,20.63 0,20.63 0.4,-0.35 0.9,-0.81 1.7,-1.36 0.7,-0.56 1.7,-1.11 2.7,-1.67 1.2,-0.56 2.5,-1.04 4.1,-1.45 1.5,-0.41 3.3,-0.61 5.3,-0.61 3.4,0 6,0.51 8.1,1.53 2.1,1.03 3.7,2.33 4.9,3.91 1.2,1.58 2,3.28 2.5,5.13 0.4,1.85 0.6,3.59 0.6,5.22 0,0 0,30.89 0,30.89 0,0 -11.7,0 -11.7,0 0,0 0,-29.74 0,-29.74 0,-2.05 -0.6,-3.71 -1.8,-4.96 -1.3,-1.26 -3.3,-1.89 -6.3,-1.89 -1.4,0 -2.7,0.19 -3.9,0.57 -1.2,0.38 -2.2,0.82 -3,1.32 -0.8,0.5 -1.6,0.98 -2.1,1.45 -0.5,0.47 -0.9,0.79 -1,0.96 0,0 0,32.29 0,32.29 0,0 -11.7,0 -11.7,0 0,0 0,-62.22 0,-62.22 0,0 11.6,0 11.6,0"
-          />
-        <path id="text-o"
-          d="m 219.1,60.32 c 3.4,0 6.7,0.61 9.8,1.84 3.1,1.23 5.6,2.91 7.9,5.05 2.3,2.13 4,4.66 5.3,7.59 1.3,2.93 1.9,6.09 1.9,9.49 0,3.33 -0.6,6.46 -1.8,9.39 -1.2,2.93 -2.9,5.46 -5.1,7.62 -2.2,2.1 -4.8,3.8 -7.8,5.1 -3.1,1.3 -6.5,1.9 -10.2,1.9 -3.6,0 -7,-0.6 -10.1,-1.8 -3,-1.2 -5.6,-2.8 -7.8,-5 -2.3,-2.07 -4,-4.62 -5.3,-7.55 -1.2,-2.93 -1.8,-6.15 -1.8,-9.65 0,-3.28 0.6,-6.38 1.9,-9.31 1.3,-2.93 3,-5.47 5.2,-7.63 2.2,-2.17 4.7,-3.88 7.8,-5.14 3.1,-1.27 6.4,-1.9 10.1,-1.9 0,0 0,0 0,0 m -13.1,23.66 c 0,2.04 0.3,3.88 1,5.51 0.6,1.63 1.5,3.03 2.7,4.2 1.1,1.16 2.5,2.07 4.1,2.71 1.6,0.65 3.4,0.96 5.3,0.96 1.8,0 3.6,-0.31 5.2,-0.96 1.6,-0.64 3,-1.56 4.1,-2.76 1.2,-1.19 2.1,-2.61 2.7,-4.24 0.7,-1.63 1,-3.42 1,-5.33 0,-1.81 -0.3,-3.5 -1,-5.08 -0.6,-1.58 -1.5,-2.96 -2.7,-4.15 -1.1,-1.19 -2.5,-2.12 -4.1,-2.8 -1.6,-0.67 -3.4,-1 -5.2,-1 -2,0 -3.8,0.34 -5.4,1 -1.7,0.68 -3,1.59 -4.1,2.75 -1.2,1.17 -2,2.55 -2.7,4.11 -0.6,1.57 -0.9,3.27 -0.9,5.08 0,0 0,0 0,0"/>
-        <path id="text-l"
-          d="m 259.7,44.78 c 0,0 0,62.22 0,62.22 0,0 -11.6,0 -11.6,0 0,0 0,-62.22 0,-62.22 0,0 11.6,0 11.6,0" />
-        <path id="text-u"
-          d="M306.7377 61.54635C306.7377 61.54635 306.7377 94.55367 306.7377 94.55367C306.7377 96.65883 306.837 98.38665 306.9363 99.7272C307.1349 101.1174 307.2342 102.1104 307.4328 103.0041C307.6314 103.7985 307.83 104.3943 308.0286 104.8908C308.2272 105.3873 308.4258 105.6852 308.5251 105.9831C308.5251 105.9831 297.2049 107.7705 297.2049 107.7705C296.7084 106.7775 296.4105 105.5859 296.2119 104.295C296.0133 103.0041 295.914 101.8125 295.8147 100.6209C295.5168 101.0181 295.1196 101.6139 294.6231 102.5076C294.0273 103.302 293.2329 104.1957 292.1406 104.9901C290.949 105.8838 289.5588 106.6782 287.7714 107.274C286.0833 107.9691 283.8987 108.267 281.2176 108.267C278.4372 108.267 276.054 107.7705 274.068 106.8768C272.082 105.8838 270.4932 104.6922 269.3016 103.1034C268.0107 101.5146 267.117 99.7272 266.5212 97.75113C266.0247 95.73534 265.7268 93.64011 265.7268 91.47537C265.7268 91.47537 265.7268 61.54635 265.7268 61.54635C265.7268 61.54635 277.2456 61.54635 277.2456 61.54635C277.2456 61.54635 277.2456 89.80713 277.2456 89.80713C277.2456 95.18919 280.026 97.88022 285.4875 97.88022C286.7784 97.88022 287.97 97.67169 289.1616 97.26456C290.2539 96.85743 291.3462 96.2517 292.2399 95.46723C293.1336 94.68276 293.8287 93.70962 294.4245 92.56767C294.921 91.42572 295.2189 90.15468 295.2189 88.75455C295.2189 88.75455 295.2189 61.54635 295.2189 61.54635C295.2189 61.54635 306.7377 61.54635 306.7377 61.54635" />
-        <path id="text-s"
-            d="M331.7613 60.31503C333.8466 60.31503 335.8326 60.49377 337.7193 60.84132C339.5067 61.18887 341.1948 61.60593 342.585 62.07264C344.0745 62.53935 345.2661 63.02592 346.2591 63.52242C347.2521 64.01892 348.0465 64.44591 348.543 64.79346C348.543 64.79346 343.9752 73.04529 343.9752 73.04529C343.6773 72.8169 343.1808 72.48921 342.3864 72.08208C341.6913 71.67495 340.7976 71.26782 339.7053 70.85076C338.7123 70.44363 337.4214 70.07622 336.1305 69.75846C334.7403 69.4407 333.3501 69.27189 331.9599 69.27189C330.0732 69.27189 328.3851 69.60951 326.7963 70.28475C325.3068 70.95999 324.5124 71.85369 324.5124 72.96585C324.5124 73.73046 324.8103 74.36598 325.3068 74.89227C325.9026 75.41856 326.697 75.88527 327.69 76.2924C328.7823 76.69953 330.0732 77.11659 331.5627 77.52372C333.0522 77.93085 334.7403 78.39756 336.627 78.92385C338.613 79.50972 340.4997 80.21475 342.1878 81.02901C343.7766 81.8532 345.2661 82.8462 346.4577 84.00801C347.7486 85.17975 348.6423 86.53023 349.4367 88.04952C350.1318 89.56881 350.4297 91.29663 350.4297 93.22305C350.4297 95.09982 350.0325 96.92694 349.1388 98.70441C348.3444 100.5216 347.0535 102.1104 345.2661 103.5006C343.578 104.8908 341.4927 105.9831 338.9109 106.8768C336.3291 107.7705 333.3501 108.267 329.9739 108.267C327.3921 108.267 324.9096 107.9691 322.725 107.4726C320.5404 106.8768 318.6537 106.3803 316.9656 105.6852C315.2775 105.0894 313.8873 104.3943 312.795 103.7985C311.7027 103.1034 310.9083 102.6069 310.5111 102.4083C310.5111 102.4083 315.4761 93.24291 315.4761 93.24291C316.9656 94.29549 318.9516 95.34807 321.3348 96.40065C323.8173 97.45323 326.5977 97.97952 329.7753 97.97952C335.634 97.97952 338.613 96.51981 338.613 93.59046C338.613 92.7762 338.2158 92.05131 337.5207 91.43565C336.8256 90.81999 335.9319 90.26391 334.7403 89.76741C333.5487 89.27091 332.2578 88.8042 330.7683 88.36728C329.2788 87.93036 327.69 87.44379 326.2005 86.9175C324.4131 86.39121 322.8243 85.79541 321.1362 85.12017C319.5474 84.44493 318.0579 83.61081 316.767 82.61781C315.5754 81.62481 314.4831 80.44314 313.6887 79.06287C312.8943 77.69253 312.5964 75.97464 312.5964 73.92906C312.5964 71.88348 313.0929 70.02657 314.0859 68.35833C315.0789 66.69009 316.3698 65.26017 318.1572 64.05864C319.8453 62.85711 321.9306 61.93362 324.2145 61.2981C326.5977 60.64272 329.0802 60.31503 331.7613 60.31503C331.7613 60.31503 331.7613 60.31503 331.7613 60.31503" />
-        <path id="text-i"
-          d="M352.6143 48.37917C352.6143 46.39317 353.3094 44.72493 354.6996 43.37445C356.0898 42.0339 357.7779 41.35866 359.7639 41.35866C361.6506 41.35866 363.3387 42.01404 364.7289 43.33473C366.1191 44.65542 366.8142 46.33359 366.8142 48.37917C366.8142 50.42475 366.0198 52.11285 364.6296 53.42361C363.2394 54.7443 361.6506 55.39968 359.7639 55.39968C357.7779 55.39968 356.1891 54.7443 354.6996 53.42361C353.3094 52.11285 352.6143 50.43468 352.6143 48.37917C352.6143 48.37917 352.6143 48.37917 352.6143 48.37917M365.5233 61.54635C365.5233 61.54635 365.5233 106.9761 365.5233 106.9761C365.5233 106.9761 354.0045 106.9761 354.0045 106.9761C354.0045 106.9761 354.0045 61.54635 354.0045 61.54635C354.0045 61.54635 365.5233 61.54635 365.5233 61.54635" />
-        <path id="text-o"
-          d="M394.9161 60.31503C398.4909 60.31503 401.7678 60.93069 404.7468 62.16201C407.8251 63.39333 410.5062 65.0715 412.6908 67.20645C414.9747 69.3414 416.7621 71.87355 417.9537 74.8029C419.2446 77.73225 419.8404 80.88999 419.8404 84.28605C419.8404 87.62253 419.2446 90.75048 418.053 93.67983C416.8614 96.60918 415.1733 99.14133 412.9887 101.316C410.8041 103.4013 408.123 105.0894 405.144 106.3803C402.0657 107.6712 398.6895 108.267 394.9161 108.267C391.3413 108.267 387.9651 107.6712 384.9861 106.4796C381.9078 105.288 379.2267 103.6992 377.0421 101.5146C374.8575 99.4293 373.0701 96.87729 371.8785 93.94794C370.6869 91.01859 369.9918 87.80127 369.9918 84.29598C369.9918 81.01908 370.6869 77.92092 371.8785 74.99157C373.1694 72.06222 374.8575 69.52014 377.0421 67.3554C379.2267 65.19066 381.9078 63.4827 384.8868 62.22159C387.9651 60.95055 391.3413 60.31503 394.9161 60.31503C394.9161 60.31503 394.9161 60.31503 394.9161 60.31503M382.0071 83.97822C382.0071 86.0238 382.305 87.86085 382.9008 89.48937C383.5959 91.11789 384.4896 92.51802 385.5819 93.68976C386.7735 94.8615 388.1637 95.7552 389.6532 96.40065C391.242 97.0461 393.0294 97.36386 394.9161 97.36386C396.9021 97.36386 398.6895 97.0461 400.179 96.40065C401.7678 95.7552 403.158 94.84164 404.3496 93.64011C405.4419 92.44851 406.3356 91.02852 407.0307 89.4C407.6265 87.77148 407.9244 85.98408 407.9244 84.06759C407.9244 82.26033 407.6265 80.57223 407.0307 78.99336C406.3356 77.41449 405.4419 76.03422 404.3496 74.84262C403.158 73.65102 401.7678 72.7176 400.179 72.04236C398.6895 71.36712 396.9021 71.03943 394.9161 71.03943C392.9301 71.03943 391.1427 71.37705 389.5539 72.04236C387.9651 72.7176 386.5749 73.63116 385.4826 74.79297C384.3903 75.96471 383.4966 77.33505 382.9008 78.90399C382.305 80.47293 382.0071 82.17096 382.0071 83.97822C382.0071 83.97822 382.0071 83.97822 382.0071 83.97822" />
-        <path id="text-n"
-          d="M464.724 106.9761C464.724 106.9761 453.1059 106.9761 453.1059 106.9761C453.1059 106.9761 453.1059 79.71825 453.1059 79.71825C453.1059 76.84848 452.3115 74.64402 450.822 73.09494C449.2332 71.54586 446.6514 70.77132 443.1759 70.77132C440.7927 70.77132 439.1046 70.87062 438.1116 71.03943C437.1186 71.21817 436.2249 71.44656 435.4305 71.74446C435.4305 71.74446 435.4305 106.9761 435.4305 106.9761C435.4305 106.9761 423.8124 106.9761 423.8124 106.9761C423.8124 106.9761 423.8124 69.98685 423.8124 69.98685C423.8124 68.69595 423.8124 67.72281 423.8124 67.04757C423.7131 66.37233 423.7131 65.8659 423.6138 65.50842C423.5145 65.16087 423.3159 64.88283 423.1173 64.6743C422.9187 64.46577 422.7201 64.13808 422.4222 63.66144C423.3159 63.37347 424.3089 63.03585 425.5005 62.64858C426.6921 62.27124 428.0823 61.90383 429.7704 61.55628C431.4585 61.20873 433.4445 60.91083 435.7284 60.68244C438.0123 60.45405 440.6934 60.33489 443.7717 60.33489C446.9493 60.33489 449.829 60.71223 452.3115 61.47684C454.8933 62.24145 457.1772 63.39333 458.9646 64.94241C460.8513 66.49149 462.2415 68.43777 463.2345 70.78125C464.2275 73.12473 464.724 75.87534 464.724 79.03308C464.724 79.03308 464.724 106.9761 464.724 106.9761" />
-      </g>
-    </svg></div>`;
-
-    protected firstConnected()
-    {
-        super.firstConnected();
-        this.classList.add("sv-logo");
-    }
-
-    protected render()
-    {
-        return html`<div class="sv-short">${Logo.h}</div><div class="sv-full">${Logo.h}${Logo.text}</div>`;
-    }
-}
\ No newline at end of file

source/ui/MainView.ts

 import { LitElement, html, customElement } from 'lit-element';
 
-import Notification from "@ff/ui/Notification";
 
-import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!./styles.scss';
+import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!./styles/main.scss';
+
+import "./styles/globals.scss";
 
-import "./globals.scss";
 
 import "./composants/UploadButton";
 import "./composants/navbar/NavLink";
@@ -19,28 +19,13 @@ import "./screens/UserSettings";
 import "./screens/Home"
 import "./composants/Modal";
 
+import Notification from "./composants/Notification";
+
 import { updateLogin, withUser } from './state/auth';
 import Modal from './composants/Modal';
 import i18n from './state/translate';
 import { route, router } from './state/router';
 
-/**
- * Simplified from path-to-regex for our simple use-case
- * @see https://github.com/pillarjs/path-to-regexp
- */
-function toRegex(path:string|RegExp){
-  if(path instanceof RegExp) return path;
-  const matcher = `[^\/#\?]+`
-  let parts = path.split("/")
-  .filter(p=>p)
-  .map( p =>{
-    let param = /:(\w+)/.exec(p);
-    if(!param) return p;
-    return `(?<${param[1]}>${matcher})`;
-  })
-  return new RegExp(`^/${parts.join("/")}\/?$`,"i")
-}
-
 
 @customElement("ecorpus-main")
 export default class MainView extends router(i18n(withUser(LitElement))){
@@ -57,7 +42,7 @@ export default class MainView extends router(i18n(withUser(LitElement))){
 
   connectedCallback(): void {
     super.connectedCallback();
-    Notification.shadowRootNode = this.shadowRoot;
+    // FIXME : configure notifications
     updateLogin().catch(e => {
       Modal.show({header: "Error", body: e.message});
     });

source/ui/assets/images/defaultSprite.svg

+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+  <title>Cube</title>
+  <path d="M448 341.37V170.61A32 32 0 00432.11 143l-152-88.46a47.94 47.94 0 00-48.24 0L79.89 143A32 32 0 0064 170.61v170.76A32 32 0 0079.89 369l152 88.46a48 48 0 0048.24 0l152-88.46A32 32 0 00448 341.37z" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
+  <path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M69 153.99l187 110 187-110M256 463.99v-200"/>
+</svg>
\ No newline at end of file

source/ui/assets/images/logo-full.svg

+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 161" xml:space="preserve">
+<rect width="512.0" height="161.0" x="0.0" y="0" fill="none" stroke="none"/>
+<g class="logo-text" style="fill:#ffffff;">
+  <path id="text-h"
+    d="m 159.7,44.78 c 0,0 0,20.63 0,20.63 0.4,-0.35 0.9,-0.81 1.7,-1.36 0.7,-0.56 1.7,-1.11 2.7,-1.67 1.2,-0.56 2.5,-1.04 4.1,-1.45 1.5,-0.41 3.3,-0.61 5.3,-0.61 3.4,0 6,0.51 8.1,1.53 2.1,1.03 3.7,2.33 4.9,3.91 1.2,1.58 2,3.28 2.5,5.13 0.4,1.85 0.6,3.59 0.6,5.22 0,0 0,30.89 0,30.89 0,0 -11.7,0 -11.7,0 0,0 0,-29.74 0,-29.74 0,-2.05 -0.6,-3.71 -1.8,-4.96 -1.3,-1.26 -3.3,-1.89 -6.3,-1.89 -1.4,0 -2.7,0.19 -3.9,0.57 -1.2,0.38 -2.2,0.82 -3,1.32 -0.8,0.5 -1.6,0.98 -2.1,1.45 -0.5,0.47 -0.9,0.79 -1,0.96 0,0 0,32.29 0,32.29 0,0 -11.7,0 -11.7,0 0,0 0,-62.22 0,-62.22 0,0 11.6,0 11.6,0"
+     />
+  <path id="text-o"
+    d="m 219.1,60.32 c 3.4,0 6.7,0.61 9.8,1.84 3.1,1.23 5.6,2.91 7.9,5.05 2.3,2.13 4,4.66 5.3,7.59 1.3,2.93 1.9,6.09 1.9,9.49 0,3.33 -0.6,6.46 -1.8,9.39 -1.2,2.93 -2.9,5.46 -5.1,7.62 -2.2,2.1 -4.8,3.8 -7.8,5.1 -3.1,1.3 -6.5,1.9 -10.2,1.9 -3.6,0 -7,-0.6 -10.1,-1.8 -3,-1.2 -5.6,-2.8 -7.8,-5 -2.3,-2.07 -4,-4.62 -5.3,-7.55 -1.2,-2.93 -1.8,-6.15 -1.8,-9.65 0,-3.28 0.6,-6.38 1.9,-9.31 1.3,-2.93 3,-5.47 5.2,-7.63 2.2,-2.17 4.7,-3.88 7.8,-5.14 3.1,-1.27 6.4,-1.9 10.1,-1.9 0,0 0,0 0,0 m -13.1,23.66 c 0,2.04 0.3,3.88 1,5.51 0.6,1.63 1.5,3.03 2.7,4.2 1.1,1.16 2.5,2.07 4.1,2.71 1.6,0.65 3.4,0.96 5.3,0.96 1.8,0 3.6,-0.31 5.2,-0.96 1.6,-0.64 3,-1.56 4.1,-2.76 1.2,-1.19 2.1,-2.61 2.7,-4.24 0.7,-1.63 1,-3.42 1,-5.33 0,-1.81 -0.3,-3.5 -1,-5.08 -0.6,-1.58 -1.5,-2.96 -2.7,-4.15 -1.1,-1.19 -2.5,-2.12 -4.1,-2.8 -1.6,-0.67 -3.4,-1 -5.2,-1 -2,0 -3.8,0.34 -5.4,1 -1.7,0.68 -3,1.59 -4.1,2.75 -1.2,1.17 -2,2.55 -2.7,4.11 -0.6,1.57 -0.9,3.27 -0.9,5.08 0,0 0,0 0,0"/>
+  <path id="text-l"
+    d="m 259.7,44.78 c 0,0 0,62.22 0,62.22 0,0 -11.6,0 -11.6,0 0,0 0,-62.22 0,-62.22 0,0 11.6,0 11.6,0" />
+  <path id="text-u"
+    d="M306.7377 61.54635C306.7377 61.54635 306.7377 94.55367 306.7377 94.55367C306.7377 96.65883 306.837 98.38665 306.9363 99.7272C307.1349 101.1174 307.2342 102.1104 307.4328 103.0041C307.6314 103.7985 307.83 104.3943 308.0286 104.8908C308.2272 105.3873 308.4258 105.6852 308.5251 105.9831C308.5251 105.9831 297.2049 107.7705 297.2049 107.7705C296.7084 106.7775 296.4105 105.5859 296.2119 104.295C296.0133 103.0041 295.914 101.8125 295.8147 100.6209C295.5168 101.0181 295.1196 101.6139 294.6231 102.5076C294.0273 103.302 293.2329 104.1957 292.1406 104.9901C290.949 105.8838 289.5588 106.6782 287.7714 107.274C286.0833 107.9691 283.8987 108.267 281.2176 108.267C278.4372 108.267 276.054 107.7705 274.068 106.8768C272.082 105.8838 270.4932 104.6922 269.3016 103.1034C268.0107 101.5146 267.117 99.7272 266.5212 97.75113C266.0247 95.73534 265.7268 93.64011 265.7268 91.47537C265.7268 91.47537 265.7268 61.54635 265.7268 61.54635C265.7268 61.54635 277.2456 61.54635 277.2456 61.54635C277.2456 61.54635 277.2456 89.80713 277.2456 89.80713C277.2456 95.18919 280.026 97.88022 285.4875 97.88022C286.7784 97.88022 287.97 97.67169 289.1616 97.26456C290.2539 96.85743 291.3462 96.2517 292.2399 95.46723C293.1336 94.68276 293.8287 93.70962 294.4245 92.56767C294.921 91.42572 295.2189 90.15468 295.2189 88.75455C295.2189 88.75455 295.2189 61.54635 295.2189 61.54635C295.2189 61.54635 306.7377 61.54635 306.7377 61.54635" />
+  <path id="text-s"
+      d="M331.7613 60.31503C333.8466 60.31503 335.8326 60.49377 337.7193 60.84132C339.5067 61.18887 341.1948 61.60593 342.585 62.07264C344.0745 62.53935 345.2661 63.02592 346.2591 63.52242C347.2521 64.01892 348.0465 64.44591 348.543 64.79346C348.543 64.79346 343.9752 73.04529 343.9752 73.04529C343.6773 72.8169 343.1808 72.48921 342.3864 72.08208C341.6913 71.67495 340.7976 71.26782 339.7053 70.85076C338.7123 70.44363 337.4214 70.07622 336.1305 69.75846C334.7403 69.4407 333.3501 69.27189 331.9599 69.27189C330.0732 69.27189 328.3851 69.60951 326.7963 70.28475C325.3068 70.95999 324.5124 71.85369 324.5124 72.96585C324.5124 73.73046 324.8103 74.36598 325.3068 74.89227C325.9026 75.41856 326.697 75.88527 327.69 76.2924C328.7823 76.69953 330.0732 77.11659 331.5627 77.52372C333.0522 77.93085 334.7403 78.39756 336.627 78.92385C338.613 79.50972 340.4997 80.21475 342.1878 81.02901C343.7766 81.8532 345.2661 82.8462 346.4577 84.00801C347.7486 85.17975 348.6423 86.53023 349.4367 88.04952C350.1318 89.56881 350.4297 91.29663 350.4297 93.22305C350.4297 95.09982 350.0325 96.92694 349.1388 98.70441C348.3444 100.5216 347.0535 102.1104 345.2661 103.5006C343.578 104.8908 341.4927 105.9831 338.9109 106.8768C336.3291 107.7705 333.3501 108.267 329.9739 108.267C327.3921 108.267 324.9096 107.9691 322.725 107.4726C320.5404 106.8768 318.6537 106.3803 316.9656 105.6852C315.2775 105.0894 313.8873 104.3943 312.795 103.7985C311.7027 103.1034 310.9083 102.6069 310.5111 102.4083C310.5111 102.4083 315.4761 93.24291 315.4761 93.24291C316.9656 94.29549 318.9516 95.34807 321.3348 96.40065C323.8173 97.45323 326.5977 97.97952 329.7753 97.97952C335.634 97.97952 338.613 96.51981 338.613 93.59046C338.613 92.7762 338.2158 92.05131 337.5207 91.43565C336.8256 90.81999 335.9319 90.26391 334.7403 89.76741C333.5487 89.27091 332.2578 88.8042 330.7683 88.36728C329.2788 87.93036 327.69 87.44379 326.2005 86.9175C324.4131 86.39121 322.8243 85.79541 321.1362 85.12017C319.5474 84.44493 318.0579 83.61081 316.767 82.61781C315.5754 81.62481 314.4831 80.44314 313.6887 79.06287C312.8943 77.69253 312.5964 75.97464 312.5964 73.92906C312.5964 71.88348 313.0929 70.02657 314.0859 68.35833C315.0789 66.69009 316.3698 65.26017 318.1572 64.05864C319.8453 62.85711 321.9306 61.93362 324.2145 61.2981C326.5977 60.64272 329.0802 60.31503 331.7613 60.31503C331.7613 60.31503 331.7613 60.31503 331.7613 60.31503" />
+  <path id="text-i"
+    d="M352.6143 48.37917C352.6143 46.39317 353.3094 44.72493 354.6996 43.37445C356.0898 42.0339 357.7779 41.35866 359.7639 41.35866C361.6506 41.35866 363.3387 42.01404 364.7289 43.33473C366.1191 44.65542 366.8142 46.33359 366.8142 48.37917C366.8142 50.42475 366.0198 52.11285 364.6296 53.42361C363.2394 54.7443 361.6506 55.39968 359.7639 55.39968C357.7779 55.39968 356.1891 54.7443 354.6996 53.42361C353.3094 52.11285 352.6143 50.43468 352.6143 48.37917C352.6143 48.37917 352.6143 48.37917 352.6143 48.37917M365.5233 61.54635C365.5233 61.54635 365.5233 106.9761 365.5233 106.9761C365.5233 106.9761 354.0045 106.9761 354.0045 106.9761C354.0045 106.9761 354.0045 61.54635 354.0045 61.54635C354.0045 61.54635 365.5233 61.54635 365.5233 61.54635" />
+  <path id="text-o"
+    d="M394.9161 60.31503C398.4909 60.31503 401.7678 60.93069 404.7468 62.16201C407.8251 63.39333 410.5062 65.0715 412.6908 67.20645C414.9747 69.3414 416.7621 71.87355 417.9537 74.8029C419.2446 77.73225 419.8404 80.88999 419.8404 84.28605C419.8404 87.62253 419.2446 90.75048 418.053 93.67983C416.8614 96.60918 415.1733 99.14133 412.9887 101.316C410.8041 103.4013 408.123 105.0894 405.144 106.3803C402.0657 107.6712 398.6895 108.267 394.9161 108.267C391.3413 108.267 387.9651 107.6712 384.9861 106.4796C381.9078 105.288 379.2267 103.6992 377.0421 101.5146C374.8575 99.4293 373.0701 96.87729 371.8785 93.94794C370.6869 91.01859 369.9918 87.80127 369.9918 84.29598C369.9918 81.01908 370.6869 77.92092 371.8785 74.99157C373.1694 72.06222 374.8575 69.52014 377.0421 67.3554C379.2267 65.19066 381.9078 63.4827 384.8868 62.22159C387.9651 60.95055 391.3413 60.31503 394.9161 60.31503C394.9161 60.31503 394.9161 60.31503 394.9161 60.31503M382.0071 83.97822C382.0071 86.0238 382.305 87.86085 382.9008 89.48937C383.5959 91.11789 384.4896 92.51802 385.5819 93.68976C386.7735 94.8615 388.1637 95.7552 389.6532 96.40065C391.242 97.0461 393.0294 97.36386 394.9161 97.36386C396.9021 97.36386 398.6895 97.0461 400.179 96.40065C401.7678 95.7552 403.158 94.84164 404.3496 93.64011C405.4419 92.44851 406.3356 91.02852 407.0307 89.4C407.6265 87.77148 407.9244 85.98408 407.9244 84.06759C407.9244 82.26033 407.6265 80.57223 407.0307 78.99336C406.3356 77.41449 405.4419 76.03422 404.3496 74.84262C403.158 73.65102 401.7678 72.7176 400.179 72.04236C398.6895 71.36712 396.9021 71.03943 394.9161 71.03943C392.9301 71.03943 391.1427 71.37705 389.5539 72.04236C387.9651 72.7176 386.5749 73.63116 385.4826 74.79297C384.3903 75.96471 383.4966 77.33505 382.9008 78.90399C382.305 80.47293 382.0071 82.17096 382.0071 83.97822C382.0071 83.97822 382.0071 83.97822 382.0071 83.97822" />
+  <path id="text-n"
+    d="M464.724 106.9761C464.724 106.9761 453.1059 106.9761 453.1059 106.9761C453.1059 106.9761 453.1059 79.71825 453.1059 79.71825C453.1059 76.84848 452.3115 74.64402 450.822 73.09494C449.2332 71.54586 446.6514 70.77132 443.1759 70.77132C440.7927 70.77132 439.1046 70.87062 438.1116 71.03943C437.1186 71.21817 436.2249 71.44656 435.4305 71.74446C435.4305 71.74446 435.4305 106.9761 435.4305 106.9761C435.4305 106.9761 423.8124 106.9761 423.8124 106.9761C423.8124 106.9761 423.8124 69.98685 423.8124 69.98685C423.8124 68.69595 423.8124 67.72281 423.8124 67.04757C423.7131 66.37233 423.7131 65.8659 423.6138 65.50842C423.5145 65.16087 423.3159 64.88283 423.1173 64.6743C422.9187 64.46577 422.7201 64.13808 422.4222 63.66144C423.3159 63.37347 424.3089 63.03585 425.5005 62.64858C426.6921 62.27124 428.0823 61.90383 429.7704 61.55628C431.4585 61.20873 433.4445 60.91083 435.7284 60.68244C438.0123 60.45405 440.6934 60.33489 443.7717 60.33489C446.9493 60.33489 449.829 60.71223 452.3115 61.47684C454.8933 62.24145 457.1772 63.39333 458.9646 64.94241C460.8513 66.49149 462.2415 68.43777 463.2345 70.78125C464.2275 73.12473 464.724 75.87534 464.724 79.03308C464.724 79.03308 464.724 106.9761 464.724 106.9761" />
+</g>
+  <path
+     style="stroke-width:1.40;fill:#5bc5f2"
+     d="M82.02 53.44C86.63 53.44 91.25 53.44 95.85 53.44C95.85 71.29 95.85 89.13 95.85 107.0C91.22 107.0 86.57 107.0 81.93 107.0C81.93 99.63 81.93 92.29 81.93 84.94C75.24 84.94 68.56 84.94 61.86 84.94C61.86 88.25 61.86 91.54 61.86 94.85C75.96 103.4 90.07 112.0 104.2 120.6C104.2 93.71 104.2 66.84 104.2 39.97C96.79 44.46 89.4 48.96 82.02 53.44C82.02 53.44 82.02 53.44 82.02 53.44M47.94 74.18C44.6 76.21 41.25 78.25 37.9 80.28C41.25 82.32 44.6 84.35 47.94 86.38C47.94 82.31 47.94 78.25 47.94 74.18C47.94 74.18 47.94 74.18 47.94 74.18M81.93 53.5C75.24 57.57 68.56 61.64 61.86 65.71C61.86 68.53 61.86 71.34 61.86 74.16C68.56 74.16 75.24 74.16 81.93 74.16C81.93 67.28 81.93 60.38 81.93 53.5C81.93 53.5 81.93 53.5 81.93 53.5"
+     id="polygon3684" /><path
+     style="stroke-width:1.40;fill:#009fe3"
+     d="M81.93 85.51C82.17 84.75 81.45 84.95 80.94 84.94C74.58 84.94 68.22 84.94 61.86 84.94C61.86 89.2 61.86 93.46 61.86 97.72C68.56 93.65 75.24 89.58 81.93 85.51C81.93 85.51 81.93 85.51 81.93 85.51M81.93 73.91C75.24 69.84 68.56 65.77 61.86 61.7C61.86 65.85 61.86 70.01 61.86 74.16C68.56 74.16 75.24 74.16 81.93 74.16C81.93 74.06 81.93 73.99 81.93 73.91C81.93 73.91 81.93 73.91 81.93 73.91"
+     id="polygon3708" />
+</svg>

source/ui/assets/images/logo-sm.svg

+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 161 161" xml:space="preserve">
+  <path
+     style="stroke-width:1.40;fill:#5bc5f2"
+     d="M82.02 53.44C86.63 53.44 91.25 53.44 95.85 53.44C95.85 71.29 95.85 89.13 95.85 107.0C91.22 107.0 86.57 107.0 81.93 107.0C81.93 99.63 81.93 92.29 81.93 84.94C75.24 84.94 68.56 84.94 61.86 84.94C61.86 88.25 61.86 91.54 61.86 94.85C75.96 103.4 90.07 112.0 104.2 120.6C104.2 93.71 104.2 66.84 104.2 39.97C96.79 44.46 89.4 48.96 82.02 53.44C82.02 53.44 82.02 53.44 82.02 53.44M47.94 74.18C44.6 76.21 41.25 78.25 37.9 80.28C41.25 82.32 44.6 84.35 47.94 86.38C47.94 82.31 47.94 78.25 47.94 74.18C47.94 74.18 47.94 74.18 47.94 74.18M81.93 53.5C75.24 57.57 68.56 61.64 61.86 65.71C61.86 68.53 61.86 71.34 61.86 74.16C68.56 74.16 75.24 74.16 81.93 74.16C81.93 67.28 81.93 60.38 81.93 53.5C81.93 53.5 81.93 53.5 81.93 53.5"
+     id="polygon3684" /><path
+     style="stroke-width:1.40;fill:##009fe"
+     d="M81.93 85.51C82.17 84.75 81.45 84.95 80.94 84.94C74.58 84.94 68.22 84.94 61.86 84.94C61.86 89.2 61.86 93.46 61.86 97.72C68.56 93.65 75.24 89.58 81.93 85.51C81.93 85.51 81.93 85.51 81.93 85.51M81.93 73.91C75.24 69.84 68.56 65.77 61.86 61.7C61.86 65.85 61.86 70.01 61.86 74.16C68.56 74.16 75.24 74.16 81.93 74.16C81.93 74.06 81.93 73.99 81.93 73.91C81.93 73.91 81.93 73.91 81.93 73.91"
+     id="polygon3708" />
+</svg>

source/ui/assets/images/spinner.svg

+<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <style>
+    .c1{
+      fill:none;
+      fill-opacity:1;
+      stroke:#00517d;
+      stroke-width:6;
+      stroke-miterlimit:4;
+      stroke-linecap:round;
+      stroke-dasharray:56.5;
+      stroke-dashoffset:0;
+      stroke-opacity:1;
+    }
+    .c2{
+      fill:none;
+      fill-opacity:1;
+      stroke:#ffffff;
+      stroke-width:6;
+      stroke-opacity:1;
+    }
+  </style>
+
+  <g >
+    <circle class="c1" cx="50" cy="50" r="36" />
+    <circle class="c2" cx="50" cy="50" r="44" />
+  </g>
+</svg>
\ No newline at end of file

source/ui/composants/Button.ts

+/**
+ * FF Typescript Foundation Library
+ * Copyright 2019 Ralph Wiedemeier, Frame Factory GmbH
+ *
+ * License: MIT
+ */
+
+import "./Icon";
+
+import { customElement, property, html, PropertyValues, LitElement } from "lit-element";
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Emitted by [[Button]] if clicked.
+ * @event
+ */
+export interface IButtonClickEvent extends MouseEvent
+{
+    type: "click";
+    target: Button;
+}
+
+export interface IButtonKeyboardEvent extends KeyboardEvent
+{
+    type: "click";
+    target: Button;
+}
+
+/**
+ * Custom element displaying a button with a text and/or an icon.
+ * The button emits a [[IButtonClickEvent]] if clicked.
+ * Classes assigned: "ff-button", "ff-control".
+ */
+@customElement("ui-button")
+export default class Button extends LitElement
+{
+    /** Optional name to identify the button. */
+    @property({ type: String })
+    name = "";
+
+    /** Optional index to identify the button. */
+    @property({ type: Number })
+    index = 0;
+
+    @property({ type: Number })
+    selectedIndex = -1;
+
+    @property({ type: Number })
+    tabbingIndex = 0;
+
+    /** If true, adds "ui-selected" class to element. */
+    @property({ type: Boolean, reflect: true })
+    selected = false;
+
+    /** If true, toggles selected state every time the button is clicked. */
+    @property({ type: Boolean })
+    selectable = false;
+
+    @property({ type: Boolean })
+    disabled = false;
+
+    /** Optional text to be displayed on the button. */
+    @property()
+    text: string;
+
+    /** Optional name of the icon to be displayed on the button. */
+    @property()
+    icon = "";
+
+    /** Optional role - defaults to 'button'. */
+    @property()
+    role = "button";
+
+    /** If true, displays a downward facing triangle at the right side. */
+    @property({ type: Boolean })
+    caret = false;
+
+    @property({ type: Boolean })
+    inline = false;
+
+    @property({ type: Boolean })
+    transparent = false;
+
+    constructor()
+    {
+        super();
+
+        this.addEventListener("click", (e) => this.onClick(e));
+        this.addEventListener("keydown", (e) => this.onKeyDown(e));
+    }
+
+    protected firstConnected()
+    {
+        this.tabIndex = this.tabbingIndex;
+        this.setAttribute("role", this.role);
+        this.classList.add("ff-button");
+    }
+
+    protected shouldUpdate(changedProperties: PropertyValues)
+    {
+        if (changedProperties.has("selectedIndex") || changedProperties.has("index")) {
+            if (this.selectedIndex >= 0) {
+                this.selected = this.index === this.selectedIndex;
+            }
+        }
+
+        if (changedProperties.has("disabled")) {
+          this.classList.toggle("ff-disabled");
+        }
+
+        return true;
+    }
+
+    protected update(changedProperties: PropertyValues)
+    {
+        this.classList.remove("ff-inline", "ff-transparent", "ff-control");
+
+        if (this.inline) {
+            this.classList.add("ff-inline");
+        }
+        else if (this.transparent) {
+            this.classList.add("ff-transparent");
+        }
+        else {
+            this.classList.add("ff-control");
+        }
+
+        super.update(changedProperties);
+    }
+
+    protected render()
+    {
+        return html`${this.renderIcon()}${this.renderText()}${this.renderCaret()}`;
+    }
+
+    protected renderIcon()
+    {
+        return this.icon ? html`<ui-icon class="ff-off" name=${this.icon}></ui-icon>` : null;
+    }
+
+    protected renderText()
+    {
+        return this.text ? html`<div class="ff-text ff-off">${this.text}</div>` : null;
+    }
+
+    protected renderCaret()
+    {
+        return this.caret ? html`<div class="ff-caret-down ff-off"></div>` : null;
+    }
+
+    protected onClick(event: MouseEvent)
+    {
+        if (this.selectable) {
+            this.selected = !this.selected;
+        }
+    }
+
+    protected onKeyDown(event: KeyboardEvent)
+    {
+        const activeElement = document.activeElement.shadowRoot ? document.activeElement.shadowRoot.activeElement : document.activeElement;
+        
+        if (activeElement === this && (event.code === "Space" || event.code === "Enter")) {
+            event.preventDefault();
+            this.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        }
+    }
+}

source/ui/composants/DocView.ts

@@ -2,13 +2,12 @@
 import { customElement, property, html, TemplateResult, LitElement, css } from "lit-element";
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 
-import "@ff/ui/Button";
 
-import "client/ui/Spinner";
+import "./Spinner";
 import i18n from "../state/translate";
 import { Language } from "../state/strings";
 
-import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../styles.scss';
+import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../styles/common.scss';
 
 /**
  * Main UI view for the Voyager Explorer application.
@@ -91,7 +90,7 @@ import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../s
       if(this.error){
         return html`<h1>Error</h1><div>${this.error.message}</div>`;
       }else if(!this.content || this.content =="loading..."){
-        return html`<div style="margin-top:10vh">Loading...<sv-spinner visible/></div>`
+        return html`<div style="margin-top:10vh">Loading...<spin-loader visible></spin-loader></div>`
       }
       return html`${unsafeHTML(this.content)}`;
     }

source/ui/composants/Icon.ts

-import {html} from "lit-element";
-import Icon from "@ff/ui/Icon"
+import {LitElement, customElement, property, html, TemplateResult} from "lit-element";
 
+/**
+ * Imported from 
+ * FF Typescript Foundation Library
+ * Copyright 2019 Ralph Wiedemeier, Frame Factory GmbH
+ *
+ * License: MIT
+ */
+@customElement("ui-icon")
+export default class Icon extends LitElement
+{
+    protected static templates = {};
 
+    createRenderRoot() {
+      return this;
+    }
+
+    static add(name: string, template: TemplateResult)
+    {
+        if (Icon.templates[name]) {
+            throw new Error(`icon already registered: '${name}'`);
+        }
+        Icon.templates[name] = template;
+    }
+
+    static getTemplateNames()
+    {
+        return Object.keys(Icon.templates);
+    }
+
+    @property({ attribute: false })
+    template: TemplateResult = null;
+
+    @property({ type: String })
+    name: string;
+
+    constructor(name?: string)
+    {
+        super();
+        this.name = name || "";
+    }
+
+    protected firstConnected()
+    {
+        this.classList.add("ui-icon");
+    }
+
+    protected render()
+    {
+        if (this.name) {
+            const template = (this.constructor as typeof Icon).templates[this.name];
+            if (!template) {
+                console.warn(`icon not found: '${this.name}'`);
+            }
+            return template;
+        }
+        if (this.template) {
+            return this.template;
+        }
+
+        return html`[icon undefined]`;
+    }
+}
+
+
+
+Icon.add("empty", html``);
+
+Icon.add("check", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>`);
+Icon.add("close", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>`);
+Icon.add("grip", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"/></svg>`);
+Icon.add("up", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"/></svg>`);
+Icon.add("down", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"/></svg>`);
+
+Icon.add("caret-up", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"/></svg>`);
+Icon.add("caret-down", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>`);
+
+Icon.add("folder", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"/></svg>`);
+Icon.add("file", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z"/></svg>`);
+
+Icon.add("info", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>`);
+Icon.add("warning", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/></svg>`);
+Icon.add("error", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/></svg>`);
+Icon.add("prompt", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"/></svg>`);
 
 Icon.add("trash", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M192 188v216c0 6.627-5.373 12-12 12h-24c-6.627 0-12-5.373-12-12V188c0-6.627 5.373-12 12-12h24c6.627 0 12 5.373 12 12zm100-12h-24c-6.627 0-12 5.373-12 12v216c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12V188c0-6.627-5.373-12-12-12zm132-96c13.255 0 24 10.745 24 24v12c0 6.627-5.373 12-12 12h-20v336c0 26.51-21.49 48-48 48H80c-26.51 0-48-21.49-48-48V128H12c-6.627 0-12-5.373-12-12v-12c0-13.255 10.745-24 24-24h74.411l34.018-56.696A48 48 0 0 1 173.589 0h100.823a48 48 0 0 1 41.16 23.304L349.589 80H424zm-269.611 0h139.223L276.16 50.913A6 6 0 0 0 271.015 48h-94.028a6 6 0 0 0-5.145 2.913L154.389 80zM368 128H80v330a6 6 0 0 0 6 6h276a6 6 0 0 0 6-6V128z"/></svg>`);
 Icon.add("plus",  html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>`)
@@ -29,5 +110,3 @@ Icon.add("comment", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51
 Icon.add("globe", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/></svg>`);
 Icon.add("audio", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 85 300 275"><path d="M144.800 88.415 C 105.869 89.675,75.661 108.730,58.580 142.800 C 42.479 174.915,49.153 218.126,74.086 243.200 C 82.194 251.354,81.622 247.747,81.571 290.400 C 81.526 327.954,81.532 328.075,83.579 331.303 C 85.932 335.013,81.918 334.725,133.200 334.853 L 178.200 334.965 180.317 334.026 C 184.940 331.975,186.179 329.159,187.004 318.834 C 187.966 306.788,188.179 306.609,201.600 306.579 C 223.132 306.529,231.384 304.069,239.712 295.216 C 246.448 288.055,247.778 282.132,247.527 260.400 C 247.353 245.306,247.496 245.061,256.908 244.337 C 272.369 243.147,279.383 238.170,279.366 228.400 C 279.356 222.955,278.475 220.120,267.737 191.000 C 266.520 187.700,263.126 177.980,260.196 169.400 C 249.024 136.687,242.930 126.187,227.400 112.880 C 209.769 97.774,189.461 89.600,166.600 88.407 C 158.610 87.991,157.887 87.991,144.800 88.415 M205.416 171.240 C 218.099 175.986,216.908 195.403,203.667 199.781 C 192.504 203.472,180.685 190.157,185.674 179.509 C 189.403 171.550,197.349 168.222,205.416 171.240 M311.000 220.715 C 304.366 224.871,305.398 229.213,315.511 239.699 C 325.906 250.478,330.441 259.997,334.191 278.909 C 338.184 299.050,330.538 322.088,313.936 339.938 C 307.475 346.885,307.028 347.548,307.030 350.184 C 307.038 359.089,317.896 358.672,326.406 349.440 C 353.041 320.544,357.609 275.463,337.176 243.154 C 326.661 226.527,316.131 217.500,311.000 220.715 M291.392 243.932 C 286.465 247.613,286.911 251.389,293.068 258.095 C 310.600 277.194,310.622 300.169,293.125 319.139 C 287.742 324.975,286.682 328.672,289.377 332.205 C 294.000 338.266,301.447 335.014,309.224 323.540 C 324.531 300.956,324.654 275.911,309.565 254.525 C 302.386 244.350,295.897 240.567,291.392 243.932 M272.664 267.012 C 268.192 270.357,268.344 272.961,273.453 280.549 C 278.010 287.318,277.882 290.657,272.777 298.232 C 267.556 305.977,269.217 312.622,276.361 312.571 C 288.218 312.486,295.338 289.895,288.227 274.922 C 284.588 267.259,277.292 263.551,272.664 267.012 " fill-rule="evenodd"></path></svg>`);
 Icon.add("eye", html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M569.354 231.631C512.969 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-75.162 0-136-60.827-136-136 0-75.162 60.826-136 136-136 75.162 0 136 60.826 136 136 0 75.162-60.826 136-136 136zm104-136c0 57.438-46.562 104-104 104s-104-46.562-104-104c0-17.708 4.431-34.379 12.236-48.973l-.001.032c0 23.651 19.173 42.823 42.824 42.823s42.824-19.173 42.824-42.823c0-23.651-19.173-42.824-42.824-42.824l-.032.001C253.621 156.431 270.292 152 288 152c57.438 0 104 46.562 104 104z"/></svg>`);
-
-export default Icon;

source/ui/composants/Modal.ts

@@ -3,7 +3,7 @@ import { css, LitElement,customElement, property, html, TemplateResult, query }
 import "./Icon"
 
 
-import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../styles.scss';
+import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../styles/common.scss';
 
 interface ModalOptions{
   header :TemplateResult|string;
@@ -82,7 +82,7 @@ interface ModalOptions{
         <div>${this.body}</div>
         <div>${this.buttons}</div>
         <button id="exit" @click=${this.handleClose}>
-          <ff-icon name="close"></ff-icon>
+          <ui-icon name="close"></ui-icon>
         </button>
       </dialog>`;
     }

source/ui/composants/Notification.ts

+import { LitElement, customElement, property } from "lit-element";
+
+
+type NotificationLevel = "info" | "success" | "warning" | "error";
+
+const _levelClasses = {
+    "info": "notification-info",
+    "success": "notification-success",
+    "warning": "notification-warning",
+    "error": "notification-error"
+} as const;
+
+const _levelIcons = {
+    "info": "info",
+    "success": "check",
+    "warning": "warning",
+    "error": "error"
+};
+
+const _levelTimeouts = {
+    "info": 2000,
+    "success": 2000,
+    "warning": 5000,
+    "error": 0
+} as const;
+
+
+@customElement("notification-line")
+class Notification extends LitElement{
+  @property({ type: String })
+  message: string;
+
+  @property({ type: String })
+  level: NotificationLevel;
+
+  @property({ type: Number })
+  timeout: number;
+
+
+  createRenderRoot() {
+    return this;
+  }
+
+  constructor(message?: string, level?: NotificationLevel, timeout?: number)
+  {
+      super();
+      this.message = message || "<message>";
+      this.level = level || "info";
+      this.timeout = timeout !== undefined ? timeout : _levelTimeouts[this.level];
+  }
+
+}
+
+
+@customElement("notification-stack")
+export default class Notifications extends LitElement{
+  static container: HTMLElement = null;
+  static show(message: string, level?: NotificationLevel, timeout?: number){
+    let line = new Notification(message, level, timeout);
+    if(!Notifications.container){
+      return console.error("Notification stack not configured. Please mount <notification-stack> in your DOM before calling Notification.show");
+    }
+  }
+
+}
\ No newline at end of file

source/ui/composants/SceneCard.ts

 import { LitElement, customElement, property, html, TemplateResult, css } from "lit-element";
-import WebDAVProvider from "@ff/scene/assets/WebDAVProvider";
+
+import defaultSprite from "../assets/images/defaultSprite.svg";
+
 import i18n from "../state/translate";
 import { AccessType, AccessTypes, Scene } from "../state/withScenes";
 
@@ -13,7 +15,6 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
  @customElement("scene-card")
  export default class SceneCard extends i18n(LitElement)
  {
-    static _assets = new WebDAVProvider();
     @property()
     thumb :string;
 
@@ -52,13 +53,7 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
         if(this.cardStyle == "grid") this.classList.add("card-grid");
         
         if(!this.thumb ){
-          SceneCard._assets.get(this.path, false).then(p=>{
-            let thumbProps = p.find(f=> f.name.endsWith(`-image-thumb.jpg`));
-            if(!thumbProps) return console.log("No thumbnail for", this.name);
-            this.thumb = thumbProps.url;
-          }, (e)=>{
-            console.warn("Failed to PROPFIND %s :", this.path, e);
-          });
+          console.warn("Failed to PROPFIND %s :", this.path);
         }
     }
 
@@ -72,7 +67,7 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
         <div class="scene-card-inner ${this.cardStyle == "list" ? "scene-card-inner-list": ""}" }>
             <div style="display:flex; flex:auto; align-items:center;">
               <a href="${explorer}">
-                ${this.thumb? html`<img src="${this.thumb}"/>`: html`<img style="background:radial-gradient(circle, #103040 0, #0b0b0b 100%);" src="/images/defaultSprite.svg" />`}
+                ${this.thumb? html`<img src="${this.thumb}"/>`: html`<img style="background:radial-gradient(circle, #103040 0, #0b0b0b 100%);" src="${defaultSprite}" />`}
               </a>
               <div class="infos">
                 <h4 class="card-title">${this.name}</h4>
@@ -80,9 +75,9 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
               </div>          
             </div>
             <div class="tools">
-              <a href="${explorer}"><ff-icon name="eye"></ff-icon>${this.t("ui.view")}</a>
-              ${this.can("write")? html`<a class="tool-link" href="${story}"><ff-icon name="edit"></ff-icon>${this.t("ui.edit")}</a>`:null}
-              ${this.can("admin")? html`<a class="tool-properties" href="/ui/scenes/${this.name}/" title="propriétés de l'objet"><ff-icon name="admin"></ff-icon>${this.t("ui.admin")}</a>`:null}
+              <a href="${explorer}"><ui-icon name="eye"></ui-icon>${this.t("ui.view")}</a>
+              ${this.can("write")? html`<a class="tool-link" href="${story}"><ui-icon name="edit"></ui-icon>${this.t("ui.edit")}</a>`:null}
+              ${this.can("admin")? html`<a class="tool-properties" href="/ui/scenes/${this.name}/" title="propriétés de l'objet"><ui-icon name="admin"></ui-icon>${this.t("ui.admin")}</a>`:null}
             </div>
         </div>
         ${(this.onChange? html`<span class="pill">

source/ui/composants/Spinner.ts

+import { LitElement, property, customElement, html, css } from "lit-element";
+
+
+@customElement("spin-loader")
+export default class Spinner extends LitElement{
+
+  @property({type: Boolean})
+  overlay :boolean = false;
+  @property({type: Boolean})
+  visible :boolean = false;
+
+
+
+  render(){
+    return html`<div id="loader" class="spin-loader${this.overlay?" loading-overlay":""}">
+			<span class="loader"></span>
+			<span class="load-text" id="load-text"><slot></slot></span>
+    </div>`;
+  }
+  static readonly styles = [css`
+    .spin-loader{
+      position:relative;
+    }
+    
+    .loading-overlay{
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.6);
+      transition: opacity 0.5s ease-out;
+      pointer-events: auto;
+      z-index: 10;
+    }
+    
+    :host:not([visible]) .loading-overlay{
+      pointer-events: none;
+      opacity: 0;
+    }
+    
+    
+    .loader {
+      top: calc(50% - 48px);
+      left: calc(50% - 48px);
+      width: 96px;
+      height: 96px;
+      border: 6px solid #FFF;
+      border-radius: 50%;
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      animation: rotation 1s linear infinite;
+      transition: transform 0.5s ease-out;
+    }
+
+    .loader::after {
+      content: '';  
+      box-sizing: border-box;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      border: 6px solid;
+      border-color: var(--color-primary) transparent;
+    }
+    
+    .load-text{
+      position: absolute;
+      bottom:10px;
+      left:0;
+      right:0;
+      text-align: center;
+      font-size: 2rem;
+    }
+    .load-text:empty{
+      display: none;
+    }
+    
+    @keyframes rotation {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    } 
+  `];
+}
\ No newline at end of file

source/ui/composants/UserLogin.ts

@@ -5,8 +5,8 @@ import { css, LitElement,customElement, property, html, TemplateResult } from "l
 import { doLogin } from "../state/auth";
 import i18n from "../state/translate";
 
-import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../styles.scss';
-import Notification from "@ff/ui/Notification";
+import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../styles/common.scss';
+import Notification from "./Notification";
 
 /**
  * Main UI view for the Voyager Explorer application.

source/ui/composants/navbar/ChangeLocale.ts

 import { LitElement, html, customElement, property, css, TemplateResult } from 'lit-element';
-import Button from "@ff/ui/Button";
+
 import i18n, {Localization} from '../../state/translate';
 
 @customElement("change-locale")
-export default class ChangeLocale extends i18n(Button){
+export default class ChangeLocale extends i18n(LitElement){
   constructor(){
     super();
+    this.addEventListener("click", (e) => this.onClick());
   }
   onclick = (ev :MouseEvent)=>{
     ev.preventDefault();
@@ -15,12 +16,12 @@ export default class ChangeLocale extends i18n(Button){
   protected createRenderRoot(): Element | ShadowRoot {
     return this;
   }
+  
   onClick = ()=>{
     Localization.Instance.setLanguage(this.language == "fr"? "en": "fr");
   }
+
   protected render(): TemplateResult {
-    this.text = this.language;
-    console.log("lang render : ", Localization.Instance);
-    return super.render();
+    return  html`<div class="">${this.language}</div>`;
   }
 }
\ No newline at end of file

source/ui/composants/navbar/Navbar.ts

@@ -3,6 +3,7 @@ import { css, customElement, html, LitElement, TemplateResult } from "lit-elemen
 
 import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!./styles.scss';
 
+import favicon from "../../assets/favicon.png";
 
 /**
  * Main UI view for the Voyager Explorer application.
@@ -20,7 +21,7 @@ import styles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!./st
   return html`<nav>
     <div class="brand">
       <a style="display:flex; align-items:center; color:#c8c8c8;text-decoration:none;font-weight:bold" href="/">
-        <img style="height:32px; padding: 0px 10px;" src="/images/logo-ecorpus.png" alt="logo eCorpus">
+        <img style="height:32px; padding: 0px 10px;" src="${favicon}" alt="logo eCorpus">
         <span>eCorpus</span>
       </a>
     </div>

source/ui/composants/navbar/styles.scss

-@import "../../variables.scss";
-@import "@ff/ui/styles/_styles.scss";
+@import "../../styles/variables.scss";
 
 :host(corpus-navbar) {
   position: fixed;

source/ui/corpus.hbs

@@ -6,7 +6,7 @@
 
         <title>{{title}}</title>
 
-        <link rel="shortcut icon" type="image/png" href="/images/logo-ecorpus.png"/>
+        <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
         <style>
             body{
                 background: #303030;