mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1147444 - Add a transition when deleting an item from the Reading List. ui-r=mmaslaney, r=Unfocused

This commit is contained in:
Blake Winton 2015-03-30 14:07:36 -04:00
Родитель 6d61c551f4
Коммит 05ecce6393
3 изменённых файлов: 22 добавлений и 7 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

19
browser/components/readinglist/sidebar.js
Просмотреть файл

@ -113,13 +113,20 @@ let RLSidebar = {
log.trace(`onItemDeleted: ${item}`); log.trace(`onItemDeleted: ${item}`);
let itemNode = this.itemNodesById.get(item.id); let itemNode = this.itemNodesById.get(item.id);
itemNode.remove(); itemNode.addEventListener('transitionend', (event) => {
this.itemNodesById.delete(item.id); if (event.propertyName == "max-height") {
this.itemsById.delete(item.id); this.itemNodesById.delete(item.id);
// TODO: ensureListItems doesn't yet cope with needing to add one item. this.itemsById.delete(item.id);
//this.ensureListItems(); itemNode.remove();
this.emptyListInfo.hidden = (this.numItems > 0); // TODO: ensureListItems doesn't yet cope with needing to add one item.
//this.ensureListItems();
this.emptyListInfo.hidden = (this.numItems > 0);
}
}, false);
itemNode.classList.remove('visible');
}, },
/** /**

2
browser/components/readinglist/sidebar.xhtml
Просмотреть файл

@ -16,7 +16,7 @@
<body role="application"> <body role="application">
<template id="item-template"> <template id="item-template">
<div class="item" role="option" tabindex="-1"> <div class="item visible" role="option" tabindex="-1">
<div class="item-thumb-container"></div> <div class="item-thumb-container"></div>
<div class="item-summary-container"> <div class="item-summary-container">
<div class="item-title-lines"> <div class="item-title-lines">

8
browser/themes/shared/readinglist/sidebar.inc.css
Просмотреть файл

@ -31,6 +31,9 @@ body {
flex-flow: row; flex-flow: row;
cursor: pointer; cursor: pointer;
padding: 6px; padding: 6px;
opacity: 0;
max-height: 0;
transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
} }
.item.active { .item.active {
@ -105,3 +108,8 @@ body {
border-width: 0; border-width: 0;
} }
.item.visible {
opacity: 1;
max-height: 80px;
transition: max-height 250ms ease-in-out, opacity 250ms ease-in-out 250ms;
}