designer

designer.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../font-roboto/roboto.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../nuxeo-elements/nx-connection.html">
<link rel="import" href="../nuxeo-elements/nx-content-view.html">
<link rel="import" href="../nuxeo-elements/nx-page-provider.html">

<nx-connection id="nx_connection" url="http://demo.nuxeo.com/nuxeo"></nx-connection>

<polymer-element name="nx-elements-sample">

  <template>
    <style>
    core-header-panel {
        height: 100%;
        overflow: auto;
        background-color: #E5E5E5;
        font-family: 'RobotoDraft', sans-serif;
    }

    core-toolbar {
        background: #03a9f4;
        color: white;
    }

    paper-tabs {
        width: 100%;
    }

    .container {
        width: 80%;
        margin: 50px auto;
    }

    @media (min-width: 481px) {
        paper-tabs {
            width: 200px;
        }

        .container {
            width: 400px;
        }
    }

    .card {
        display: block;
        position: relative;
        background-color: white;
        padding: 10px;
        margin-bottom: 20px;
        width: 100%;
    }

    .card h2 {
        margin: 0;
        font-weight: 300;
    }

    .card img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin: 10px;
    }
    
</style>

<core-header-panel>
    <core-toolbar>
        <paper-tabs valueattr="name" selected="{{selectedDoctype}}" self-end>
            <paper-tab name="Picture">PICTURES</paper-tab>
            <paper-tab name="Article">ARTICLES</paper-tab>                  
        </paper-tabs>
    </core-toolbar>

    <div class="container" layout vertical center>
        
        <nx-content-view>
            <nx-page-provider auto pageSize="5" query="select * from {{selectedDoctype}} where ecm:currentLifeCycleState != 'deleted'"></nx-page-provider>
            <template>
                <div class="card" layout horizontal center>
                    <img src="{{connection.url}}/nxthumb/default/{{item.uid}}/blobholder:0/" >
                    <h2>{{item.title}}</h2>
                </div>
            </template>
        </nx-content-view>
    </div>

</core-header-panel>
</template>
<script>
    Polymer('nx-elements-sample', {
        selectedDoctype: 'Picture',
        connectionId: 'nx_connection',
        ready: function() {
            this.connection = document.querySelector("#" + this.connectionId);
        }
    });

</script>

</polymer-element>