simpla-admin-controls.html

<link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../simpla-styles/simpla-styles.html"> <link rel="import" href="../simpla-styles/simple.html"> <link rel="import" href="../simple-dropdown/simple-dropdown.html"> <link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html"> <link rel="import" href="../iron-icon/iron-icon.html" async> <link rel="import" href="../simple-button/simple-button.html" async> <iron-iconset-svg name="simpla-admin" size="24"> <svg> <defs> <g id="exit-to-app"><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></g> <g id="lock-outline"><path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM8.9 6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2H8.9V6zM18 20H6V10h12v10z"/></g> <g id="perm-identity"><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"/></g> </defs> </svg> </iron-iconset-svg> <dom-module id="simpla-admin-controls"> <template> <style>*,::after,::before,:host{box-sizing:border-box}:host{position:fixed;display:flex;top:25px;right:25px;color:#fff;background:var(--simpla-primary-color);font-family:var(--simpla-font-family);font-size:var(--simpla-scale-0);height:var(--simpla-scale-4);border-radius:var(--simpla-border-radius);box-shadow:var(--simpla-elevation-2);z-index:var(--simpla-on-top)}.button{@apply(--simpla-button);font-size:var(--simpla-scale-00);height:100%;border-right:1px solid var(--simpla-light-white);border-top-right-radius:0;border-bottom-right-radius:0}.button[busy]{color:var(--simpla-bright-white)}.button::before{@apply(--simpla-button-highlight);}.button:active::before{@apply(--simpla-button-highlight-active);}.menu{--simple-dropdown-gutter:0.8em;--simple-dropdown-offset:0.15em;--simple-dropdown-toggle:{padding:0 .5em;height:100%};--simple-dropdown-menu:{@apply(--simpla-simple-dropdown-menu);box-shadow:var(--simpla-elevation-2)};}.menu[disabled]{pointer-events:none}.menu__item{@apply(--simpla-simple-dropdown-menu-item);cursor:pointer;color:var(--simpla-text-color)}.menu__item:hover{background:var(--simpla-grey-50)}.menu__item__icon{--iron-icon-width:var(--simpla-scale-00);--iron-icon-height:var(--simpla-scale-00);color:var(--simpla-grey-700);margin-right:.65em}[hidden]{display:none!important}</style> <button is="simple-button" class="button" busy="[[busy]]" on-tap="_executePrimaryAction"> [[_primaryActionLabel(editable, authenticated, busy)]] </button> <simple-dropdown class="menu" origin="top right" arrow="" disabled$="[[busy]]"> <a class="menu__item" hidden$="[[!editable]]" on-tap="exitEditMode"> <iron-icon class="menu__item__icon" icon="simpla-admin:lock-outline"> </iron-icon> Exit editing </a> <a class="menu__item" hidden$="[[authenticated]]" on-tap="login"> <iron-icon class="menu__item__icon" icon="simpla-admin:perm-identity"> </iron-icon> Login </a> <a class="menu__item" hidden$="[[!authenticated]]" on-tap="logout"> <iron-icon class="menu__item__icon" icon="simpla-admin:exit-to-app"> </iron-icon> Logout </a> </simple-dropdown> </template> <script>!function(){"use strict";var e=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},t=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),i={editableAuthed:{label:"save",method:"save"},editableNotAuthed:{label:"login",method:"login"},authedNotEditable:{label:"edit this page",method:"enterEditMode"}},n=function(){function n(){e(this,n)}return t(n,[{key:"beforeRegsiter",value:function(){this.is="simpla-admin-controls",this.properties={busy:Boolean,editable:Boolean,authenticated:Boolean}}},{key:"save",value:function(){this.fire("save")}},{key:"login",value:function(){this.fire("login")}},{key:"logout",value:function(){Simpla.logout(),Simpla.editable(!1)}},{key:"enterEditMode",value:function(){Simpla.editable(!0)}},{key:"exitEditMode",value:function(){Simpla.editable(!1)}},{key:"_executePrimaryAction",value:function(){var e=this._primaryAction.method;this[e]()}},{key:"_primaryActionLabel",value:function(){return this._primaryAction&&this._primaryAction.label}},{key:"_primaryAction",get:function(){var e=this.editable,t=this.authenticated,n=this.busy,a=i.editableAuthed,o=i.editableNotAuthed,r=i.authedNotEditable,l=void 0;return n?this.__primaryAction:(e&&t?l=a:!e&&t?l=r:e&&!t&&(l=o),this.__primaryAction=l,l)}}]),n}();Polymer(n)}(); </script> </dom-module>