Adding mode icons

Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2018-09-10 11:41:20 -07:00
parent 6f41771d22
commit dc0dc0da3c
2 changed files with 31 additions and 10 deletions

View File

@ -24,7 +24,7 @@
"paper-toolbar": "PolymerElements/paper-toolbar#^1.1.4", "paper-toolbar": "PolymerElements/paper-toolbar#^1.1.4",
"paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.9", "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.9",
"paper-icon-button": "PolymerElements/paper-icon-button#^2.2.0", "paper-icon-button": "PolymerElements/paper-icon-button#^2.2.0",
"iron-icons": "PolymerElements/iron-icons#^1.1.3", "iron-icons": "PolymerElements/iron-icons#^2.1.1",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1", "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.2.1", "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.2.1",
"paper-listbox": "polymerelements/paper-listbox#^1.1.2", "paper-listbox": "polymerelements/paper-listbox#^1.1.2",
@ -59,6 +59,7 @@
"iron-resizable-behavior": "^1.0.4", "iron-resizable-behavior": "^1.0.4",
"paper-checkbox": "^1.2.0", "paper-checkbox": "^1.2.0",
"webcomponentsjs": "^v1.1.0", "webcomponentsjs": "^v1.1.0",
"paper-icon-button": "^1.1.2" "paper-icon-button": "^1.1.2",
"iron-icons": "^1.1.3"
} }
} }

View File

@ -67,7 +67,6 @@
} }
#albums { #albums {
height: 100%;
overflow-y: scroll; overflow-y: scroll;
} }
@ -76,6 +75,20 @@
cursor: pointer; cursor: pointer;
} }
#searchBox {
}
#searchContents {
box-sizing: border-box;
height: 100%;
}
#searchMode {
padding: 0.5em 1em;
background: #ddd;
color: #444;
}
#breadcrumb > div { #breadcrumb > div {
margin-right: 0.5em; margin-right: 0.5em;
cursor: pointer; cursor: pointer;
@ -195,13 +208,20 @@
<app-drawer-layout id="albumLayout" force-narrow=true> <app-drawer-layout id="albumLayout" force-narrow=true>
<app-drawer id="searchBox" slot="drawer"> <app-drawer id="searchBox" slot="drawer">
<div id="albums" class="layout vertical"> <div id="searchContents" class="layout vertical">
<template is="dom-repeat" items="[[breadcrumb(path)]]"> <div id="searchMode" class="layout horizontal justified">
<div on-tap="loadPath">[[item.name]] /</div> <paper-icon-button icon="folder"></paper-icon-button>
</template> <paper-icon-button icon="date-range"></paper-icon-button>
<template is="dom-repeat" items="[[albums.children]]"> <paper-icon-button icon="today"></paper-icon-button>
<div on-tap="loadPath">[[item.name]]</div> </div>
</template> <div id="albums" class="flex layout vertical">
<template is="dom-repeat" items="[[breadcrumb(path)]]">
<div on-tap="loadPath">[[item.name]] /</div>
</template>
<template is="dom-repeat" items="[[albums.children]]">
<div on-tap="loadPath">[[item.name]]</div>
</template>
</div>
</div> </div>
</app-drawer> </app-drawer>
<app-header-layout> <app-header-layout>