Skip to content

Commit

Permalink
Merge pull request #89 from twrecked/small-tiny
Browse files Browse the repository at this point in the history 
Small and tiny icon and font sizes.
  • Loading branch information
@twrecked
twrecked authored Mar 4, 2021
2 parents 1927e12 + a3d78cf commit 299a123
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 28 deletions.
4 changes: 3 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ entities:

| Name | Type | Required | Supported Values |
|------------|------|----------|---------------------------------------------|
| global | list | No | active, muted, square, blended |
| global | list | No | active, muted, square, blended, small, tiny |

These are the options that determine the overall behaviour of the card.
- `active`; for multi camera cards, the image will change to the most recently
Expand All @@ -175,6 +175,8 @@ These are the options that determine the overall behaviour of the card.
the library view as well.
- `blended`; for multi camera cards; the library view will display all camera
recordings spliced together
- `small`; use smaller fonts and icons
- `tiny`; use even smaller fonts and icons


#### Image Options
Expand Down
85 changes: 58 additions & 27 deletions dist/hass-aarlo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,14 +143,14 @@ class AarloGlance extends LitElement {
overflow: hidden;
}
.box {
white-space: var(--paper-font-common-nowrap_-_white-space); overflow: var(--paper-font-common-nowrap_-_overflow); text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
white-space: var(--paper-font-common-nowrap_-_white-space);
overflow: var(--paper-font-common-nowrap_-_overflow);
text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
position: absolute;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
padding: 4px 8px;
font-size: 16px;
line-height: 36px;
color: white;
display: flex;
justify-content: space-between;
Expand All @@ -161,14 +161,6 @@ class AarloGlance extends LitElement {
.box-bottom {
bottom: 0;
}
.box-bottom-small {
bottom: 0;
line-height: 30px;
}
.box-title {
font-weight: 500;
margin-left: 4px;
}
.box-align-left {
margin-left: 4px;
}
Expand All @@ -186,11 +178,6 @@ class AarloGlance extends LitElement {
font-weight: 500;
text-transform: capitalize;
}
.box-status {
font-weight: 500;
margin-right: 4px;
text-transform: capitalize;
}
ha-icon {
cursor: pointer;
padding: 2px;
Expand Down Expand Up @@ -228,10 +215,6 @@ class AarloGlance extends LitElement {
height: auto;
transform: translate(-50%, -50%);
}
.aarlo-library {
width: 100%;
cursor: pointer;
}
.aarlo-modal-video-wrapper {
overflow: hidden;
position: absolute;
Expand All @@ -249,6 +232,10 @@ class AarloGlance extends LitElement {
left: 0;
background-color: darkgrey;
}
.aarlo-library {
width: 100%;
cursor: pointer;
}
.aarlo-library-row {
display: flex;
margin: 6px 2px 6px 2px;
Expand All @@ -257,8 +244,29 @@ class AarloGlance extends LitElement {
flex: 32%;
padding: 2px;
}
.hidden {
display: none;
.aarlo-text-medium {
font-size: 16px;
line-height: 26px;
}
.aarlo-text-small {
font-size: 14px;
line-height: 24px;
}
.aarlo-text-tiny {
font-size: 12px;
line-height: 22px;
}
.aarlo-icon-medium {
}
.aarlo-icon-small {
--mdc-icon-size: 18px;
height: 18px;
width: 18px;
}
.aarlo-icon-tiny {
--mdc-icon-size: 14px;
height: 14px;
width: 14px;
}
.aarlo-broken-image {
background: grey url("/static/images/image-broken.svg") center/36px
Expand Down Expand Up @@ -368,7 +376,6 @@ class AarloGlance extends LitElement {
<img class="aarlo-image"
id="${this._id('camera-viewer')}"
style="display:none"
@error="${() => { this.imageFailed(); }}"
@click="${() => { this.imageClicked(); }}">
<div class="aarlo-image"
id="${this._id('library-viewer')}"
Expand All @@ -387,30 +394,36 @@ class AarloGlance extends LitElement {
id="${this._id('bottom-bar')}"
style="display:none">
</div>
<div class="box box-bottom-small"
<div class="box box-bottom"
id="${this._id('library-controls')}"
style="display:none">
<div>
<ha-icon id="${this._id('library-control-first')}"
class="aarlo-icon-${this._sizeSuffix()}"
@click="${() => { this.firstLibraryPage(); }}">
</ha-icon>
<ha-icon id="${this._id('library-control-previous')}"
class="aarlo-icon-${this._sizeSuffix()}"
@click="${() => { this.previousLibraryPage(); }}">
</ha-icon>
</div>
<div style="margin-left: auto; margin-right: auto">
<ha-icon id="${this._id('library-control-resize')}"
class="aarlo-icon-${this._sizeSuffix()}"
@click="${() => { this.resizeLibrary() }}">
</ha-icon>
<ha-icon id="${this._id('library-control-close')}"
class="aarlo-icon-${this._sizeSuffix()}"
@click="${() => { this.closeLibrary() }}">
</ha-icon>
</div>
<div>
<ha-icon id="${this._id('library-control-next')}"
class="aarlo-icon-${this._sizeSuffix()}"
@click="${() => { this.nextLibraryPage() }}">
</ha-icon>
<ha-icon id="${this._id('library-control-last')}"
class="aarlo-icon-${this._sizeSuffix()}"
@click="${() => { this.lastLibraryPage(); }}">
</ha-icon>
</div>
Expand Down Expand Up @@ -645,6 +658,16 @@ class AarloGlance extends LitElement {
}
}

_sizeSuffix() {
if( this.gc.small ) {
return "small"
}
else if( this.gc.tiny ) {
return "tiny"
}
return "medium"
}

_paddingTop( id, top ) {
let element = this._element(id)
if ( element ) {
Expand Down Expand Up @@ -1082,6 +1105,10 @@ class AarloGlance extends LitElement {
aspectRatioMultiplier: (_includes(config.global, 'square') ||
_includes(config.image_view, 'square')) ? 1 : 0.5625,

// size
small: _includes(config.global,'small'),
tiny: _includes(config.global,'tiny'),

// blended library
blendedMode: _includes(config.global, 'blended') ||
_includes( config.library_view, "blended" ),
Expand Down Expand Up @@ -1536,10 +1563,10 @@ class AarloGlance extends LitElement {
} else if(text_items.includes(item)) {
elem = document.createElement("span")
elem.classList.add(`camera-${item}`)
elem.classList.add(`camera-text`)
elem.classList.add(`aarlo-text-${this._sizeSuffix()}`)
} else {
elem = document.createElement("ha-icon")
elem.classList.add(`camera-icon`)
elem.classList.add(`aarlo-icon-${this._sizeSuffix()}`)
elem.addEventListener('click', (evt) => {
this.imageIconClicked(evt)
})
Expand Down Expand Up @@ -1583,6 +1610,10 @@ class AarloGlance extends LitElement {

const viewer = this._element("camera-viewer")

viewer.addEventListener('error', () => {
this.imageFailed();
})

if( this.gc.isMobile ) {
viewer.addEventListener('touchstart', (e) => {
this.ls.xDown = e.touches[0].clientX
Expand Down Expand Up @@ -1741,7 +1772,7 @@ class AarloGlance extends LitElement {
a.style.left = `2%`
a.style.top = `5%`
a.setAttribute("download","")
a.innerHTML = `<ha-icon icon="mdi:download" style="color: white;"></ha-icon>`
a.innerHTML = `<ha-icon class="aarlo-icon-small" icon="mdi:download" style="color: white;"></ha-icon>`

const column = Math.floor((i % this.gs.librarySize) + 1)
const row = Math.floor((i / this.gs.librarySize) + 1)
Expand Down

0 comments on commit 299a123

Please sign in to comment.