Skip to content
This repository was archived by the owner on Aug 27, 2018. It is now read-only.

Commit 916cedc

Browse files
xnerhuxnerhu
committed
Add posts filter dialog
1 parent c5c5bc8 commit 916cedc

File tree

13 files changed

+430
-7
lines changed

13 files changed

+430
-7
lines changed

‎panel/build/entry.bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎panel/src/images/Toolbar/filter.png‎

123 Bytes
Loading

‎panel/src/imports/materialdesign/components/Dialog/style.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,15 @@
3737
max-height: 65vh;
3838
transform: translateZ(0);
3939
@include material-scroll;
40+
z-index: 10;
4041
}
4142

4243
.material-dialog-action {
4344
width: 100%;
4445
padding-top: 8px;
4546
padding-bottom: 8px;
4647
margin-top: 24px;
48+
z-index: 9;
4749

4850
&.side-by-side .material-button {
4951
margin-right: 8px;

‎panel/src/imports/materialdesign/components/DropDown/components/Item/index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Component from '../../../../../../helpers/Component'
2+
3+
export default class Item extends Component {
4+
/**
5+
* Gets root.
6+
* @return {DOMElement} root
7+
*/
8+
getRoot () {
9+
return this.elements.root
10+
}
11+
12+
onClick = (e) => {
13+
const onClick = this.props.onClick
14+
15+
if (typeof onClick === 'function') onClick(e, this)
16+
}
17+
18+
render () {
19+
return (
20+
<div className='material-drop-down-item' ref='root' onClick={this.onClick}>
21+
{
22+
this.props.text
23+
}
24+
</div>
25+
)
26+
}
27+
28+
afterRender () {
29+
this.props.getDropDown().items.push(this)
30+
}
31+
}

‎panel/src/imports/materialdesign/components/DropDown/index.js‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import Component from '../../../../helpers/Component'
2+
3+
import Item from './components/Item'
4+
5+
export default class DropDown extends Component {
6+
beforeRender () {
7+
this.toggled = false
8+
9+
this.items = []
10+
this.selectedItem = null
11+
}
12+
13+
/**
14+
* Gets root.
15+
* @return {DOMElement} root
16+
*/
17+
getRoot () {
18+
return this.elements.root
19+
}
20+
21+
/**
22+
* Sets items.
23+
* @param {Array} items
24+
*/
25+
setItems (items) {
26+
for (var i = 0; i < items.length; i++) {
27+
this.addItem(items[i])
28+
}
29+
}
30+
31+
/**
32+
* Adds item.
33+
* @param {String} text
34+
*/
35+
addItem (text) {
36+
const item = (
37+
<Item text={text} getDropDown={() => { return this }} onClick={this.onItemClick} />
38+
)
39+
40+
this.renderComponents(item, this.elements.list)
41+
}
42+
43+
/**
44+
* On item click event.
45+
* @param {Event}
46+
* @param {Item}
47+
*/
48+
onItemClick = (e, item) => {
49+
this.selectedItem = item
50+
51+
this.elements.selected.innerHTML = item.props.text
52+
}
53+
54+
/**
55+
* Toggles list.
56+
* @param {Boolean}
57+
*/
58+
toggle (flag) {
59+
const root = this.getRoot()
60+
const list = this.elements.list
61+
62+
setTimeout(function () {
63+
if (flag) root.classList.add('no-shadow')
64+
else root.classList.remove('no-shadow')
65+
}, (flag) ? 50 : 100)
66+
67+
setTimeout(function () {
68+
list.style.display = (flag) ? 'block' : 'none'
69+
}, (flag) ? 10 : 270)
70+
71+
setTimeout(function () {
72+
list.style['overflow-y'] = (flag) ? 'auto' : 'hidden'
73+
}, (flag) ? 270 : 1)
74+
75+
setTimeout(function () {
76+
list.style.opacity = (flag) ? '1' : '0'
77+
list.style.height = ((flag) ? list.scrollHeight : 0) + 'px'
78+
}, 20)
79+
80+
this.toggled = flag
81+
82+
if (flag) {
83+
window.addEventListener('mouseup', this.onWindowMouseUp)
84+
} else {
85+
window.removeEventListener('mouseup', this.onWindowMouseUp)
86+
}
87+
}
88+
89+
/**
90+
* On window mouse up.
91+
* Hides list.
92+
* @param {Event}
93+
*/
94+
onWindowMouseUp = (e) => {
95+
this.toggle(false)
96+
}
97+
98+
/**
99+
* On button click.
100+
* Shows list.
101+
* @param {Event}
102+
*/
103+
onClick = (e) => {
104+
this.toggle(true)
105+
}
106+
107+
/**
108+
* Selects item.
109+
* @param {Int} index
110+
*/
111+
selectItem (index) {
112+
const item = this.items[index]
113+
114+
this.selectItem = item
115+
this.elements.selected.innerHTML = item.props.text
116+
}
117+
118+
/**
119+
* Gets index of selected item.
120+
* @return {Int} index
121+
*/
122+
getSelectedItemIndex () {
123+
return this.items.indexOf(this.selectedItem)
124+
}
125+
126+
render () {
127+
return (
128+
<div>
129+
<div className='material-drop-down' ref='root' onClick={this.onClick}>
130+
<div className='selected' ref='selected' />
131+
<div className='icon' ref='icon' />
132+
</div>
133+
<div className='material-drop-down-list' ref='list' />
134+
</div>
135+
)
136+
}
137+
}

‎panel/src/imports/materialdesign/components/DropDown/style.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.material-drop-down, .material-drop-down-item {
2+
min-height: 18px;
3+
padding-top: 16px;
4+
padding-bottom: 16px;
5+
padding-left: 24px;
6+
font-size: 15px;
7+
@include Roboto-Medium;
8+
cursor: pointer;
9+
position: relative;
10+
}
11+
12+
.material-drop-down {
13+
width: 164px;
14+
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
15+
background-color: #fff;
16+
17+
&.no-shadow {
18+
box-shadow: none;
19+
}
20+
21+
& .icon {
22+
width: 24px;
23+
height: 24px;
24+
background-position: center;
25+
background-repeat: no-repeat;
26+
background-size: 24px auto;
27+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAAAa0lEQVR4Ae3X0Q3AMAhDQUb35u0S+XnSXRdIlQDmEvoAAAAAAAAA+nbfw2/tX1j7FtZ+SGvXwtrlvHZHWruprj0X1h5ta0/ntQPG2hlp7Zi3dlJdO2yvvS+svfKsvbXtwpY6PgAAAAAAAAT8Ep6OlFL8/MEAAAAASUVORK5CYII=');
28+
position: absolute;
29+
@include center-vertical;
30+
right: 16px;
31+
opacity: 0.54;
32+
}
33+
}
34+
35+
.material-drop-down-list {
36+
width: 188px;
37+
height: 0px;
38+
max-height: 75vh;
39+
z-index: 100;
40+
position: absolute;
41+
top: 50%;
42+
transform: translateY(-50%);
43+
opacity: 0;
44+
transition: 0.25s height ease, 0.3s opacity;
45+
display: none;
46+
overflow: hidden;
47+
border-radius: 2px;
48+
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
49+
@include material-scroll;
50+
background-color: #fff;
51+
}
52+
53+
.material-drop-down-item {
54+
width: calc(100% - 30px);
55+
transition: 0.3s background-color;
56+
background-color: #fff;
57+
58+
&:hover {
59+
background-color: #eee;
60+
transition: 0.3s background-color;
61+
}
62+
}

‎panel/src/styles.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ $pictureBlur: 10px;
1414
@import 'src/imports/materialdesign/mixins/scroll.scss';
1515
@import 'src/imports/materialdesign/components/Checkbox/style.scss';
1616
@import 'src/imports/materialdesign/components/Dialog/style.scss';
17+
@import 'src/imports/materialdesign/components/DropDown/style.scss';
1718
@import 'src/imports/materialdesign/components/MaterialButton/style.scss';
1819
@import 'src/imports/materialdesign/components/Menu/style.scss';
1920
@import 'src/imports/materialdesign/components/Preloader/style.scss';
@@ -40,6 +41,7 @@ $pictureBlur: 10px;
4041
@import 'views/Pages/Posts/components/List/style.scss';
4142
@import 'views/Pages/Posts/components/PostDialog/style.scss';
4243
@import 'views/Pages/Posts/components/PostDialog/components/Post/style.scss';
44+
@import 'views/Pages/Posts/components/PostsFilterDialog/style.scss';
4345

4446
@import 'views/Pages/Gallery/style.scss';
4547
@import 'views/Pages/Gallery/components/PicturesDialog/style.scss';

‎panel/src/views/App/components/Toolbar/style.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,10 @@
7272
background-image: url(images/Toolbar/more.png);
7373
}
7474

75+
.toolbar-icon-filter {
76+
background-image: url(images/Toolbar/filter.png);
77+
}
78+
7579
.toolbar-icon-view {
7680
background-image: url(images/Toolbar/view_list.png);
7781

‎panel/src/views/App/index.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import Component from '../../helpers/Component'
22
import Url from '../../helpers/Url'
33

4-
import DialogManager from '../../helpers/DialogManager'
54
import MenuManager from '../../helpers/MenuManager'
65
import PageManager from '../../helpers/PageManager'
76

87
import PostDialog from '../Pages/Posts/components/PostDialog'
98
import DeletePostDialog from '../Pages/Posts/components/DeletePostDialog'
109
import DeletePostsDialog from '../Pages/Posts/components/DeletePostsDialog'
10+
import PostsFilterDialog from '../Pages/Posts/components/PostsFilterDialog'
1111

1212
import ErrorDialog from './components/ErrorDialog'
1313

@@ -28,7 +28,6 @@ import GalleryPage from '../Pages/Gallery'
2828
import AboutClassPage from '../Pages/AboutClass'
2929
import LessonsPlanPage from '../Pages/LessonsPlan'
3030

31-
import Dialog from './../../imports/materialdesign/components/Dialog'
3231
import FAB from './../../imports/materialdesign/components/FAB'
3332
import Menu from './../../imports/materialdesign/components/Menu'
3433
import Preloader from './../../imports/materialdesign/components/Preloader'
@@ -268,6 +267,13 @@ export default class App extends Component {
268267
className: 'toolbar-icon-more',
269268
onClick: this.onToolbarMenuIconClick
270269
},
270+
{
271+
type: 'Icon',
272+
ref: 'filterIcon',
273+
position: 'Right',
274+
className: 'toolbar-icon-filter',
275+
onClick: postsPage.onFilterClick
276+
},
271277
{
272278
type: 'Icon',
273279
ref: 'viewIcon',
@@ -431,6 +437,7 @@ export default class App extends Component {
431437
<Menu ref='lessonsPlanSubjectMenu' className='toolbar-menu' mobile='true' />
432438
<DeletePostDialog ref='deletePostDialog' />
433439
<DeletePostsDialog ref='deletePostsDialog' />
440+
<PostsFilterDialog ref='postsFilterDialog' />
434441
<AddCategoryDialog ref='addCategoryDialog' />
435442
<EditCategoryDialog ref='editCategoryDialog' />
436443
<DeleteCategoryDialog ref='deleteCategoryDialog' />

0 commit comments

Comments
 (0)