chris
/
pixelfed
forked from mirror/pixelfed
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #1381 from pixelfed/frontend-ui-refactor 

Frontend ui refactor
This commit is contained in:
daniel 2019-06-09 22:09:25 -06:00 committed by GitHub
parent e999d4be5a d9ac8ed710
commit cefe846f38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 6 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/js/status.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/timeline.js vendored
View File

File diff suppressed because one or more lines are too long

4
public/mix-manifest.json
View File

@ -11,6 +11,6 @@
"/js/loops.js": "/js/loops.js?id=0677173fdad43d0687ba",
"/js/profile.js": "/js/profile.js?id=461dd489765de3334344",
"/js/search.js": "/js/search.js?id=27e8be8bfef6be586d25",
"/js/status.js": "/js/status.js?id=51ffe173848e6d23ad2c",
"/js/timeline.js": "/js/timeline.js?id=31e326128f44acc066fa"
"/js/status.js": "/js/status.js?id=a8c41f16489f01bde38e",
"/js/timeline.js": "/js/timeline.js?id=146e741b9d4ef754c9ae"
}

74
resources/assets/js/components/Timeline.vue
View File

@ -182,7 +182,7 @@
</div>
</div>
</div>
<div v-if="modes.infinite == true && !loading && feed.length > 0">
<div v-if="!loading && feed.length > 0">
<div class="card">
<div class="card-body">
<infinite-loading @infinite="infiniteTimeline" :distance="800">
@ -192,9 +192,6 @@
</div>
</div>
</div>
<div v-if="modes.infinite == false && !loading && feed.length > 0" class="pagination">
<p class="btn btn-outline-secondary font-weight-bold btn-block" v-on:click="loadMore">Load more posts</p>
</div>
<div v-if="!loading && scope == 'home' && feed.length == 0">
<div class="card">
<div class="card-body text-center">
@ -223,7 +220,7 @@
<p class="my-0 text-muted pb-0">{{profile.display_name || 'loading...'}}</p>
</div>
<div class="ml-2">
<a :class="[optionMenuState == true ? 'text-primary' :'text-muted']" v-on:click="toggleOptionsMenu()"><i class="fas fa-cog fa-lg"></i></a>
<a class="text-muted" href="/settings/home"><i class="fas fa-cog fa-lg"></i></a>
</div>
</div>
</div>
@ -247,28 +244,6 @@
</div>
</div>
<div v-if="optionMenuState == true" class="mb-4">
<div class="card options-card">
<div class="card-body small">
<div v-if="profile.is_admin" class="custom-control custom-switch mb-3">
<input type="checkbox" class="custom-control-input" id="mode-mod" v-on:click="modeModToggle()" v-model="modes.mod">
<label class="custom-control-label font-weight-bold" for="mode-mod">Moderator Mode</label>
</div>
<!-- <div class="custom-control custom-switch mb-3">
<input type="checkbox" class="custom-control-input" id="mode-notify" v-on:click="modeNotifyToggle()" v-model="!modes.notify">
<label class="custom-control-label font-weight-bold" for="mode-notify">Disable Notifications</label>
</div> -->
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="mode-infinite" v-on:click="modeInfiniteToggle()" v-model="modes.infinite">
<label class="custom-control-label font-weight-bold" for="mode-infinite">Enable Infinite Scroll</label>
</div>
<hr>
<p class="font-weight-bold">BETA FEATURES</p>
<div class="alert alert-primary font-weight-bold text-center">Experimental features have been moved to the <a href="/settings/labs">Labs</a> settings page.</div>
</div>
</div>
</div>
<div v-show="modes.notify == true" class="mb-4">
<notification-card></notification-card>
</div>
@ -447,12 +422,10 @@
loading: true,
replies: [],
replyId: null,
optionMenuState: false,
modes: {
'mod': false,
'dark': false,
'notify': true,
'infinite': true,
'distractionFree': false
},
followers: [],
@ -932,49 +905,6 @@
}
},
toggleOptionsMenu() {
this.optionMenuState = !this.optionMenuState;
},
modeModToggle() {
this.modes.mod = !this.modes.mod;
//window.ls.set('pixelfed-classicui-settings', this.modes);
},
modeNotifyToggle() {
this.modes.notify = !this.modes.notify;
//window.ls.set('pixelfed-classicui-settings', this.modes);
},
modeDarkToggle() {
// todo: more graceful stylesheet change
if(this.modes.dark == true) {
axios.post('/i/metro/dark-mode', {
mode: 'light'
}).then(res => {
$('link[data-stylesheet=dark]')
.attr('data-stylesheet', 'light')
.attr('href', '/css/app.css?v=' + Date.now());
this.modes.dark = false;
});
} else {
axios.post('/i/metro/dark-mode', {
mode: 'dark'
}).then(res => {
$('link[data-stylesheet=light]')
.attr('data-stylesheet', 'dark')
.attr('href', '/css/appdark.css?v=' + Date.now());
this.modes.dark = true;
});
}
//window.ls.set('pixelfed-classicui-settings', this.modes);
},
modeInfiniteToggle() {
this.modes.infinite = !this.modes.infinite
//window.ls.set('pixelfed-classicui-settings', this.modes);
},
followingModal() {
if(this.following.length > 0) {
this.$refs.followingModal.show();