save-dialog.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">

<link rel="import" href="bower_components/iron-icons/iron-icons.html">

<link rel="import" href="file-view.html">

<dom-module id="save-dialog">
    <template>
        <style>
            * {
                box-sizing: border-box;
            }

            :host {
                cursor: default;
                --violet: #9b59b6;
                --green: #1abb47;
                --blue: #1a33bc;
                --red: #bb241a;
            }

            #dialog {
                border-radius: 2px;
                overflow: hidden;
            }

            h2 {
                color: var(--red);
            }

            h2 iron-icon {
                margin-top: -5px;
            }

            .filepath {
                font-style: italic;
            }

            #files {
                display: flex;
                margin: 24px 0;
            }

            .file {
                width: 50%;
                flex-grow: 1;
                flex-shrink: 1;
                text-align: center;
            }

            .file, .file > span {
                transition: 0.4s all ease;
            }

            .file file-view {
                margin-top: 8px;
            }

            .file.new span {
                color: var(--green);
            }

            .file.old span {
                color: var(--red);
            }

            #dialog > .buttons {
                padding: 0;
                margin: 8px 12px;
                flex-wrap: wrap;
                width: 516px;
            }

            paper-button {
                color: var(--blue);
                flex-grow: 1;
                width: 250px;
                margin: 0 4px 8px 4px;
                border: 1px solid currentColor;
                transition: 0.2s all ease !important;
                will-change: opacity box-shadow;
            }

            .buttons[previewed] paper-button {
                opacity: 0.3;
            }

            .buttons[previewed=rename] #rename,
            .buttons[previewed=both] #both,
            .buttons[previewed=replace] #replace,
            .buttons[previewed=cancel] #cancel {
                opacity: 1;
                @apply(--shadow-elevation-2dp);
            }

            #replace {
                color: var(--green);
            }

            #cancel {
                color: var(--red);
            }

            #files[previewed=replace] .file.new {
                width: 100%;
            }

            #files[previewed=replace] .file.old {
                width: 0;
                opacity: 0;
            }

            #files[previewed=cancel] .file.new {
                opacity: 0.5;
            }

            #files[previewed=cancel] .file.new file-view {
                font-style: italic;
            }
        </style>

        <paper-dialog id="dialog" opened modal>
            <h2><iron-icon icon="warning"></iron-icon> Dateikonflikt</h2>
            <div>
                Es existiert bereits eine Datei an der Stelle <span class="filepath">[[path]]</span>.
                <div id="files" previewed$="[[_previewed]]">
                    <div class="file new">
                        <span>Neu</span>
                        <file-view name="[[newName]]" icon="fileicon.svg"></file-view>
                    </div>
                    <div class="file old">
                        <span>Alt</span>
                        <file-view name="[[oldName]]" icon="fileicon_original.svg"></file-view>
                    </div>
                </div>
            </div>
            <div class="buttons" previewed$="[[_previewed]]">
                <paper-button id="rename">Anderen Namen wählen</paper-button>
                <paper-button id="both">Beide behalten</paper-button>
                <paper-button id="replace">Alte Datei überschreiben</paper-button>
                <paper-button id="cancel">Abbrechen</paper-button>
            </div>
        </paper-dialog>
    </template>

    <script>
        "use strict";

        (function() {
            Polymer({
                is: "save-dialog",

                properties: {
                    path: {
                        type: String
                    },

                    oldCreated: {
                        type: String
                    },

                    _previewed: {
                        type: String,
                        value: null
                    },

                    name: {
                        computed: "_computeName(path)"
                    },

                    newName: {
                        computed: "_computeNewName(name, _previewed)"
                    },

                    oldName: {
                        computed: "_computeOldName(name, _previewed, oldCreated)"
                    }
                },

                attached() {
                    ["rename", "both", "replace", "cancel"].forEach(button => {
                        this.listen(this.$[button], "mouseover", "_onMouseOver");
                        this.listen(this.$[button], "mouseout", "_onMouseOut");
                    });
                },

                _computeName: path => {
                    const raw = path.slice(path.lastIndexOf("/") + 1);
                    const dotPos = raw.lastIndexOf(".");

                    return {
                        raw,
                        prefix: dotPos < 0 ? raw: raw.slice(0, dotPos),
                        suffix: dotPos < 0 ? "" : raw.slice(dotPos + 1)
                    };
                },

                _computeNewName: (name, previewed) => previewed !== "rename" ? previewed !== "cancel" ? name.raw : "ungesichert" : "",
                _computeOldName: (name, previewed, oldCreated) => previewed !== "both"
                    ? name.raw
                    : `${name.prefix} Version vom ${oldCreated}.${name.suffix}`,

                _onMouseOver(event) {
                    this._previewed = event.target.id;
                },

                _onMouseOut(event) {
                    if(event.target.id === this._previewed)
                        this._previewed = null;
                }
            });
        }());
    </script>
</dom-module>