fix most obvious new style issues

source/ui/composants/Button.ts

@@ -9,6 +9,7 @@ import "./Icon";
 
 import { customElement, property, html, PropertyValues, LitElement } from "lit-element";
 
+
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
@@ -29,8 +30,6 @@ export interface IButtonKeyboardEvent extends KeyboardEvent
 
 /**
  * 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
@@ -39,24 +38,6 @@ export default class Button extends LitElement
     @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;
 
@@ -82,51 +63,16 @@ export default class Button extends LitElement
     @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");
+    createRenderRoot() {
+        return this;
     }
 
-    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)
+    public connectedCallback()
     {
-        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);
+        super.connectedCallback();
+        this.setAttribute("role", this.role);
+        this.classList.add("btn");
     }
 
     protected render()
@@ -136,33 +82,16 @@ export default class Button extends LitElement
 
     protected renderIcon()
     {
-        return this.icon ? html`<ui-icon class="ff-off" name=${this.icon}></ui-icon>` : null;
+        return this.icon ? html`<ui-icon name=${this.icon}></ui-icon>` : null;
     }
 
     protected renderText()
     {
-        return this.text ? html`<div class="ff-text ff-off">${this.text}</div>` : null;
+        return this.text ? html`<div class="btn-text">${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 }));
-        }
+        return this.caret ? html`<div class="btn-caret-down"></div>` : null;
     }
 }

source/ui/composants/Icon.ts

@@ -41,13 +41,15 @@ export default class Icon extends LitElement
         this.name = name || "";
     }
 
-    protected firstConnected()
+    public connectedCallback()
     {
+        super.connectedCallback();
         this.classList.add("ui-icon");
     }
 
     protected render()
     {
+        console.log("Render icon :", this.name, this.template);
         if (this.name) {
             const template = (this.constructor as typeof Icon).templates[this.name];
             if (!template) {

source/ui/composants/Modal.ts

@@ -108,11 +108,11 @@ interface ModalOptions{
       box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
     }
 
-    .ff-button.ff-control{
+    .btn{
       color: white;
       background: var(--color-tertiary);
     }
-    .ff-button.ff-control:hover{
+    .btn:hover{
       background: var(--color-secondary);
     }
 

source/ui/composants/UploadButton.ts

@@ -1,5 +1,5 @@
 
-import { css, LitElement,customElement, html, TemplateResult } from "lit-element";
+import { css, LitElement, customElement, html, TemplateResult } from "lit-element";
 
 
 @customElement("upload-button")

source/ui/composants/navbar/styles.scss

@@ -40,15 +40,15 @@ nav {
     align-items: stretch;
     flex-basis: auto;
     justify-content: end;
-    ::slotted(.ff-button.ff-control), ::slotted(.nav-link){
+    ::slotted(.btn), ::slotted(.nav-link){
       height:100%;
       flex: 0 0 auto;
       box-sizing: border-box;
       background-color: transparent;
       font-size: 13px;
       color: $color-light;
     }
-    ::slotted(.ff-button.ff-control){
+    ::slotted(.btn){
       padding: 4px 10px !important;
     }
   }

source/ui/screens/Admin/UsersList.ts

@@ -10,6 +10,9 @@ import { nothing } from "lit-html";
 import Notification from "../../composants/Notification";
 import i18n from "../../state/translate";
 
+import commonStyles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../../styles/common.scss';
+import tableStyles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../../styles/tables.scss';
+
 interface User {
     uid :string;
     username :string;
@@ -35,9 +38,6 @@ interface User {
     {
         super();
     }
-    createRenderRoot() {
-        return this;
-    }
 
     public connectedCallback(): void {
         super.connectedCallback();
@@ -169,8 +169,8 @@ interface User {
                         <td><input style="width:20px; height:20px" type="checkbox" .checked=${u.isAdministrator} disabled></td>
                         <td>
                             <div style="display:flex; justify-content:end;gap:.6rem;">
-                            <ui-button style=${u.isAdministrator ? "color:var(--color-light);opacity:0.2":"color:var(--color-danger)"} inline icon="trash" title=${this.t("ui.delete")} @click=${()=>this.deleteUserOpen(u)} ?disabled=${u.isAdministrator}></ui-button>
-                            <ui-button style="color:var(--color-text-dark)" inline icon="key" title="login link" @click=${()=>this.createLoginLink(u)}></ui-button>
+                            <ui-button style=${u.isAdministrator ? "color:var(--color-light);opacity:0.2":"color:var(--color-danger)"} inline transparent icon="trash" title=${this.t("ui.delete")} @click=${()=>this.deleteUserOpen(u)} ?disabled=${u.isAdministrator}></ui-button>
+                            <ui-button style="color:var(--color-text-dark)" inline transparent icon="key" title="login link" @click=${()=>this.createLoginLink(u)}></ui-button>
                             </div>
                         </td>
                     </tr>`)}
@@ -194,4 +194,5 @@ interface User {
             return Notification.show(`Failed to create login link : ${e.message}`, "error");
         })
     }
+    static readonly styles = [commonStyles, tableStyles];
  }

source/ui/screens/Home.ts

@@ -161,10 +161,10 @@ interface Upload{
         return html`
         <h2>${this.t("info.homeHeader")}</h2>
         <div class="list-tasks" style="margin-bottom:1rem">
-            <upload-button class="ff-button ff-control btn-primary" @change=${this.onUploadBtnChange}>
+            <upload-button class="btn btn-primary" @change=${this.onUploadBtnChange}>
                 ${this.t("ui.upload")}
             </upload-button>
-            <a class="ff-button ff-control btn-primary" href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
+            <a class="btn btn-primary" href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
         </div>
 
         ${(this.list.length == 0 && Object.keys(this.uploads).length == 0)?null: html`

source/ui/screens/List.ts

@@ -144,20 +144,20 @@ interface Upload{
                 <div class="list-tasks form-control">
                     <div class="form-item" style="display:flex; margin-bottom:10px">
                         <input type="search" id="model-search" placeholder=${this.t("ui.searchScene")} @change=${this.onSearchChange}>
-                        <button class="ff-button ff-control btn-primary" style="margin-top:0" type="submit"><ui-icon name="search"></ui-icon></button>
+                        <button class="btn btn-primary" style="margin-top:0" type="submit"><ui-icon name="search"></ui-icon></button>
                     </div>
                     <div class="section">
                         <h4 style="margin-top:0">${this.t("ui.newScene")}</h4>
-                        <upload-button class="ff-button ff-control btn-primary" style="padding:8px" @change=${this.onUploadBtnChange}>
+                        <upload-button class="btn btn-primary" style="padding:8px" @change=${this.onUploadBtnChange}>
                             ${this.t("ui.upload")}
                         </upload-button>
                         
-                        <a class="ff-button ff-control btn-primary" href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
+                        <a class="btn btn-primary" href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
                     </div>
                     ${(this.selection.length)?html`
                     <div class="section">
                         <h4 style="margin-top:0">${this.t("ui.tools")}</h4>
-                        <a class="ff-button ff-control btn-primary btn-icon" download href="/api/v1/scenes?${
+                        <a class="btn btn-primary btn-icon" download href="/api/v1/scenes?${
                             this.selection.map(name=>`name=${encodeURIComponent(name)}`).join("&")
                             }&format=zip">
                             Download Zip

source/ui/screens/SceneHistory.ts

@@ -161,9 +161,9 @@ class SceneVersion{
               <h3>Total size: <b-size b=${size}></b-size></h3>
               <h3>${articles.size} article${(1 < articles.size?"s":"")}</h3>
               <div style="max-width: 300px">
-                <a class="ff-button ff-control btn-primary" href=${`/ui/scenes/${scene}/edit?lang=${this.language.toUpperCase()}`}><ui-icon name="edit"></ui-icon>  ${this.t("ui.editScene")}</a>
-                <a class="ff-button ff-control btn-primary" style="margin-top:10px" href=${`/ui/scenes/${scene}/view?lang=${this.language.toUpperCase()}`}><ui-icon name="eye"></ui-icon>  ${this.t("ui.viewScene")}</a>
-                <a class="ff-button ff-control btn-primary" style="margin-top:10px" download href="/api/v1/scenes/${scene}?format=zip"><ui-icon name="save"></ui-icon> ${this.t("ui.downloadScene")}</a>
+                <a class="btn btn-primary" href=${`/ui/scenes/${scene}/edit?lang=${this.language.toUpperCase()}`}><ui-icon name="edit"></ui-icon>  ${this.t("ui.editScene")}</a>
+                <a class="btn btn-primary" style="margin-top:10px" href=${`/ui/scenes/${scene}/view?lang=${this.language.toUpperCase()}`}><ui-icon name="eye"></ui-icon>  ${this.t("ui.viewScene")}</a>
+                <a class="btn btn-primary" style="margin-top:10px" download href="/api/v1/scenes/${scene}?format=zip"><ui-icon name="save"></ui-icon> ${this.t("ui.downloadScene")}</a>
               </div>
             </div>
             <div style="min-width:300px;" class="section">
@@ -209,7 +209,7 @@ class SceneVersion{
                         <input style="border:none;" type="text" name="username" id="username" placeholder="${this.t("ui.username")}" required>
                       </div>
                       <div class="form-item">
-                        <input class="ff-button ff-control btn-primary" style="border:none; margin:0" type="submit" value="${this.t("ui.add")}" >
+                        <input class="btn btn-primary" style="border:none; margin:0" type="submit" value="${this.t("ui.add")}" >
                       </div>
                     </div>
                   </form>

source/ui/screens/UserSettings.ts

@@ -47,7 +47,7 @@ export default class UserSettings extends i18n(withUser(LitElement)) {
           </div>
         </div>
         <div class="form-group">
-            <input class="ff-button ff-control btn-primary" style="padding:8px; width:100%" type="submit" value=${this.t("ui.saveChanges")}>
+            <input class="btn btn-primary" style="padding:8px; width:100%" type="submit" value=${this.t("ui.saveChanges")}>
         </div>
       </form>
 
@@ -69,7 +69,7 @@ export default class UserSettings extends i18n(withUser(LitElement)) {
         <div class="form-group">
         </div>
           <div>
-            <input class="ff-button ff-control btn-primary" style="padding:8px; width:100%" type="submit" name="password-submit" value="${this.t("ui.changePassword")}">
+            <input class="btn btn-primary" style="padding:8px; width:100%" type="submit" name="password-submit" value="${this.t("ui.changePassword")}">
           </div>
         </div>
       </form>

source/ui/styles/buttons.scss

@@ -18,13 +18,20 @@ a{
 }
 
 
-.ui-button, .btn {
+.btn {
   background: $color-background-light;
   color: white;
 
-  svg {
-    fill: white;
-  }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  padding: 5px;
+  transition: fill 0.2s;
+
+  cursor: pointer;
+
 
   &:hover, &:focus{
     background-color: $color-background-lighter;
@@ -41,15 +48,15 @@ a{
   &.btn-primary {
     background-color: $color-primary;
 
-    &:hover:not(:disabled){
+    &:hover:not([disabled]){
       background-color: $color-primary-light;
     }
   }
 
   &.btn-secondary {
     background-color: $color-primary-light;
 
-    &:hover:not(:disabled){
+    &:hover:not([disabled]){
       background-color: $color-secondary;
     }
   }
@@ -69,11 +76,33 @@ a{
     white-space:nowrap;
   }
 
-  .ui-icon{
+  & > .btn-text {
+    margin: 3px;
+    white-space: nowrap;
+  }
+
+  & > .ui-icon {
+    margin: 3px;
+    height: 1.3em;
     fill: currentColor;
+    svg{
+      height: 1.2rem;
+    }
   }
-  .btn-inline.btn-disabled{
+
+  & > .btn-caret-down {
+    margin: 3px;
+  }
+
+  &[disabled]{
     user-select: none;
     pointer-events: none;
   }
+  &[transparent]{
+    background: transparent;
+    color: $color-light;
+    &:hover{
+      color: $color-background-lighter;
+    }
+  }
 }

source/ui/styles/forms.scss

@@ -17,7 +17,7 @@
     }
   }
 
-  .ff-button.ff-control{
+  .ui-button{
     margin-top: 5px;
   }