loot/libloot
0
0
Fork 0
mirror of https://github.com/loot/libloot.git synced 2026-07-27 14:16:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

Improved editor open icon flip effect.

Browse Source 
The priority text reveal transition is also a bit messy.
This commit is contained in:
Oliver Hamlet
2015-02-10 20:20:09 +00:00
parent e269415cf4
commit 1be889a128
2 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/report/html/loot-plugin-item.html
+27 -22
View File
@@ -7,15 +7,22 @@
<polymer-element name="loot-plugin-item" attributes="priorityText data">
<template>
<style>
:host(:not([data-edits])) #hasUserEdits,
:host([data-editor-open]) #hasUserEdits,
:host(:not([data-editor-open])) #editorIsOpen {
:host(:not([data-edits]):not([data-editor-open])) #iconTooltip {
pointer-events: none;
}
:host(:not([data-edits])) #hasUserEditsTooltip,
:host([data-editor-open]) #hasUserEditsTooltip,
:host(:not([data-editor-open])) #editorIsOpenTooltip {
display: none;
}
#hasUserEdits > core-icon,
#editorIsOpen > core-icon {
:host(:not([data-edits])) #hasUserEdits {
visibility: hidden;
}
#hasUserEdits,
#editorIsOpen {
display: block;
margin-right: 0;
backface-visibility: hidden;
}
paper-item > core-tooltip {
margin-left: 16px;
@@ -30,12 +37,11 @@
:host([data-editor-open]) #flipper {
transform: rotateY(180deg);
}
#hasUserEdits, #editorIsOpen {
backface-visibility: hidden;
display: block;
}
#hasUserEdits {
transform: translateZ(1px);
position: absolute;
top: 0;
left: 0;
}
#editorIsOpen {
transform: rotateY(180deg) translateZ(-1px);
@@ -77,11 +83,6 @@
:host-context(body[data-editors]) #text {
line-height: normal;
}
:host-context(body[data-editors]) #primary {
/* MD spec says 16sp, but that doesn't fit, so use 14sp. */
/*font-size: 1.143rem;*/
font-size: 1rem;
}
#secondary {
/* MD spec says 14sp, but that doesn't fit, so use 12sp. */
/*font-size: 1rem; */
@@ -94,6 +95,10 @@
margin-right: 0;
height: 13px;
}
#hasUserEditsTooltip,
#editorIsOpenTooltip {
overflow: visible;
}
/* When not in edit mode, hide secondary text. */
#secondary.hidden,
@@ -119,14 +124,14 @@
<div id="priority"></div>
</div>
</div>
<div id="flipper">
<core-tooltip id="hasUserEdits" label="Has User Metadata" noarrow position="left">
<core-icon icon="account-circle"></core-icon>
</core-tooltip>
<core-tooltip id="editorIsOpen" label="Editor Is Open" noarrow position="left">
<core-icon icon="create"></core-icon>
</core-tooltip>
</div>
<core-tooltip id="iconTooltip" noarrow position="left">
<div tip id="hasUserEditsTooltip">Has User Metadata</div>
<div tip id="editorIsOpenTooltip">Editor Is Open</div>
<div id="flipper">
<core-icon id="hasUserEdits" icon="account-circle"></core-icon>
<core-icon id="editorIsOpen" icon="create"></core-icon>
</div>
</core-tooltip>
</paper-item>
</template>
<script>
resources/report/js/l10n.js
+2 -2
View File
@@ -137,8 +137,8 @@
pluginItem = document.querySelector('polymer-element[name="loot-plugin-item"]').querySelector('template').content;
}
pluginItem.querySelector('#secondary core-tooltip').setAttribute('label', l10n.translate("Global Priority").fetch());
pluginItem.getElementById('hasUserEdits').setAttribute('label', l10n.translate("Has User Metadata").fetch());
pluginItem.getElementById('editorIsOpen').setAttribute('label', l10n.translate("Editor Is Open").fetch());
pluginItem.getElementById('hasUserEditsTooltip').textContent = l10n.translate("Has User Metadata").fetch();
pluginItem.getElementById('editorIsOpenTooltip').textContent = l10n.translate("Editor Is Open").fetch();
/* File row template */
var fileRow = document.querySelector('link[rel="import"][href$="editable-table.html"]');