PSI Software SE Design Library

File List

No notes defined.

<div class="fileList">

    <h3 class="fileList-title">Verfügbare Dateien</h3>

    <ul class="fileList-items">
        <li class="fileList-item">
            <div class="fileCard has-button is-confirmed">

                <div class="fileCard-name">Meine Datei.jpg</div>
                <div class="fileCard-indicator" title="Erfolgreich hochgeladen">Erfolgreich hochgeladen</div>
                <button class="fileCard-button" title="Datei entfernen" onclick="this.parentNode.remove();">Datei entfernen</button>

            </div>

        </li>
        <li class="fileList-item">
            <div class="fileCard has-button is-confirmed">

                <div class="fileCard-name">Meine Datei.jpg</div>
                <div class="fileCard-indicator" title="Erfolgreich hochgeladen">Erfolgreich hochgeladen</div>
                <button class="fileCard-button" title="Datei entfernen" onclick="this.parentNode.remove();">Datei entfernen</button>

            </div>

        </li>
        <li class="fileList-item">
            <div class="fileCard has-button is-failed">

                <div class="fileCard-name">Meine Datei.jpg</div>
                <div class="fileCard-indicator" title="Hochladen fehlgeschlagen">Hochladen fehlgeschlagen</div>
                <button class="fileCard-button" title="Datei entfernen" onclick="this.parentNode.remove();">Datei entfernen</button>

                <div class="fileCard-message">Die Datei hat das falsche Format!</div>

            </div>

        </li>
        <li class="fileList-item">
            <div class="fileCard has-button is-loading">

                <div class="fileCard-name">Meine Datei.jpg</div>
                <div class="fileCard-indicator" title="Wird hochgeladen">Wird hochgeladen</div>
                <button class="fileCard-button" title="Datei entfernen" onclick="this.parentNode.remove();">Datei entfernen</button>

                <div class="fileCard-message">Die Datei wird hochgeladen (78%).</div>

            </div>

        </li>
    </ul>

</div>
 
<div class="fileList{{#modifier}} {{{.}}}{{/modifier}}">

        {{#title}}
    <h3 class="fileList-title">{{{.}}}</h3>
        {{/title}}

        {{#if items}}
    <ul class="fileList-items">
            {{#items}}
        <li class="fileList-item">
            {{#filecard}}
                {{render '@filecard' (contextData '@filelist' this) merge=true}}
            {{/filecard}}
        </li>
            {{/items}}
    </ul>
        {{/if}}

</div>
 
{
  "title": "Verfügbare Dateien",
  "items": [
    {
      "filecard": {
        "name": "Meine Datei.jpg",
        "indicator": {
          "type": "confirmed",
          "label": "Erfolgreich hochgeladen"
        },
        "button": {
          "label": "Datei entfernen",
          "onclick": "this.parentNode.remove();"
        }
      }
    },
    {
      "filecard": {
        "name": "Meine Datei.jpg",
        "indicator": {
          "type": "confirmed",
          "label": "Erfolgreich hochgeladen"
        },
        "button": {
          "label": "Datei entfernen",
          "onclick": "this.parentNode.remove();"
        }
      }
    },
    {
      "filecard": {
        "name": "Meine Datei.jpg",
        "indicator": {
          "type": "failed",
          "label": "Hochladen fehlgeschlagen"
        },
        "button": {
          "label": "Datei entfernen",
          "onclick": "this.parentNode.remove();"
        },
        "message": "Die Datei hat das falsche Format!"
      }
    },
    {
      "filecard": {
        "name": "Meine Datei.jpg",
        "indicator": {
          "type": "loading",
          "label": "Wird hochgeladen"
        },
        "button": {
          "label": "Datei entfernen",
          "onclick": "this.parentNode.remove();"
        },
        "message": "Die Datei wird hochgeladen (78%)."
      }
    }
  ]
}
  • Content: 
    %fileList {
    @include stack-spacing(component);

    &-title {
        @extend %label;
    }

    &-items {
        list-style: none;
        padding: 0;

        @include stack-spacing(0);
    }

    &-title + &-items {
        margin-top: $field_stack-spacing;
    }

    &-item {

        & + & {
            @include stack-spacing(small);
        }

        .fileCard {
            margin-top: 0;
        }

    }

}

.fileList {
    @extend %fileList;

    &-title {
        @extend %fileList-title;
    }

    &-items {
        @extend %fileList-items;
    }

    &-item {
        @extend %fileList-item;
    }

}
  • URL: /components/raw/filelist/_fileList.styles.scss
  • Filesystem Path: components/03-fragments/fileList/_fileList.styles.scss
  • Size: 623 Bytes