HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Refactor

Browse source
This commit is contained in:
syuilo 2017-12-14 12:32:23 +09:00
parent 561d5c0069
commit d408d19f72
3 changed files with 62 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/web/app/desktop/tags/image-dialog.tag
View file

@ -1,61 +0,0 @@
<mk-image-dialog>
<div class="bg" ref="bg" onclick={ close }></div><img ref="img" src={ image.url } alt={ image.name } title={ image.name } onclick={ close }/>
<style>
:scope
display block
position fixed
z-index 2048
top 0
left 0
width 100%
height 100%
opacity 0
> .bg
display block
position fixed
z-index 1
top 0
left 0
width 100%
height 100%
background rgba(0, 0, 0, 0.7)
> img
position fixed
z-index 2
top 0
right 0
bottom 0
left 0
max-width 100%
max-height 100%
margin auto
cursor zoom-out
</style>
<script>
import anime from 'animejs';
this.image = this.opts.image;
this.on('mount', () => {
anime({
targets: this.root,
opacity: 1,
duration: 100,
easing: 'linear'
});
});
this.close = () => {
anime({
targets: this.root,
opacity: 0,
duration: 100,
easing: 'linear',
complete: () => this.unmount()
});
};
</script>
</mk-image-dialog>

62
src/web/app/desktop/tags/images.tag
View file

@ -108,3 +108,65 @@
}; };
</script> </script>
</mk-images-image> </mk-images-image>
<mk-image-dialog>
<div class="bg" ref="bg" onclick={ close }></div><img ref="img" src={ image.url } alt={ image.name } title={ image.name } onclick={ close }/>
<style>
:scope
display block
position fixed
z-index 2048
top 0
left 0
width 100%
height 100%
opacity 0
> .bg
display block
position fixed
z-index 1
top 0
left 0
width 100%
height 100%
background rgba(0, 0, 0, 0.7)
> img
position fixed
z-index 2
top 0
right 0
bottom 0
left 0
max-width 100%
max-height 100%
margin auto
cursor zoom-out
</style>
<script>
import anime from 'animejs';
this.image = this.opts.image;
this.on('mount', () => {
anime({
targets: this.root,
opacity: 1,
duration: 100,
easing: 'linear'
});
});
this.close = () => {
anime({
targets: this.root,
opacity: 0,
duration: 100,
easing: 'linear',
complete: () => this.unmount()
});
};
</script>
</mk-image-dialog>

1
src/web/app/desktop/tags/index.ts
View file

@ -77,7 +77,6 @@ require('./set-banner-suggestion.tag');
require('./repost-form.tag'); require('./repost-form.tag');
require('./sub-post-content.tag'); require('./sub-post-content.tag');
require('./images.tag'); require('./images.tag');
require('./image-dialog.tag');
require('./donation.tag'); require('./donation.tag');
require('./users-list.tag'); require('./users-list.tag');
require('./user-following.tag'); require('./user-following.tag');