puniko/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'master' of ssh.gitgud.io:lambadalambda/pleroma-fe

Browse source
This commit is contained in:
Roger Braun 2016-11-07 11:56:14 +01:00
commit cf972e968c
36 changed files with 273 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
config/index.js
View file

@ -26,11 +26,6 @@ module.exports = {
target: 'https://social.heldscal.la/', target: 'https://social.heldscal.la/',
changeOrigin: true, changeOrigin: true,
cookieDomainRewrite: 'localhost' cookieDomainRewrite: 'localhost'
},
'/main': {
target: 'https://social.heldscal.la/',
changeOrigin: true,
cookieDomainRewrite: 'localhost'
} }
}, },
// CSS Sourcemaps off by default because relative paths are "buggy" // CSS Sourcemaps off by default because relative paths are "buggy"

2
index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Pleroma</title> <title>Pleroma</title>
<link rel="stylesheet" href="static/font/css/fontello.css"> <link rel="stylesheet" href="/static/font/css/fontello.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

4
src/App.js
View file

@ -1,9 +1,11 @@
import UserPanel from './components/user_panel/user_panel.vue' import UserPanel from './components/user_panel/user_panel.vue'
import NavPanel from './components/nav_panel/nav_panel.vue'
export default { export default {
name: 'app', name: 'app',
components: { components: {
UserPanel UserPanel,
NavPanel
}, },
computed: { computed: {
user () { return this.$store.state.users.currentUser || {} }, user () { return this.$store.state.users.currentUser || {} },

29
src/App.scss
View file

@ -2,12 +2,13 @@ $main-color: #f58d2c;
$main-background: white; $main-background: white;
$darkened-background: whitesmoke; $darkened-background: whitesmoke;
body { #app {
background-color: $main-color; background-color: $main-color;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 50px; background-position: 0 50px;
min-height: 100vh;
} }
h4 { h4 {
@ -197,27 +198,6 @@ status.ng-enter.ng-enter-active {
cursor: pointer; cursor: pointer;
} }
nav-panel ul {
list-style: none;
margin: 0;
padding: 0;
}
nav-panel li {
border-bottom: 1px solid silver;
padding: 0.5em;
padding-left: 1em;
}
nav-panel li:last-child {
border: none;
}
nav-panel a {
display: block;
width: 100%;
}
.status-el p { .status-el p {
margin: 0; margin: 0;
margin-top: 0.2em; margin-top: 0.2em;
@ -279,11 +259,6 @@ attention {
display: flex; display: flex;
padding: 0.5em; padding: 0.5em;
media-upload {
font-size: 26px;
flex: 1;
}
button { button {
flex: 2; flex: 2;
} }

4
src/components/attachment/attachment.js
View file

@ -19,8 +19,8 @@ const Attachment = {
type = 'image'; type = 'image';
} }
if(this.attachment.mimetype.match(/video\/webm/)) { if(this.attachment.mimetype.match(/video\/(webm|mp4)/)) {
type = 'webm'; type = 'video';
}; };
return type return type

2
src/components/attachment/attachment.vue
View file

@ -6,7 +6,7 @@
<a class="image-attachment" v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a> <a class="image-attachment" v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a>
<video v-if="type === 'webm' && !nsfw" :src="attachment.url" controls></video> <video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video>
<span v-if="type === 'unknown'">Don't know how to display this...</span> <span v-if="type === 'unknown'">Don't know how to display this...</span>

22
src/components/media_upload/media_upload.js Normal file
View file

@ -0,0 +1,22 @@
/* eslint-env browser */
import statusPosterService from '../../services/status_poster/status_poster.service.js'
const mediaUpload = {
mounted () {
const store = this.$store
const input = this.$el.querySelector('input')
const self = this
input.addEventListener('change', ({target}) => {
const file = target.files[0];
const formData = new FormData();
formData.append('media', file);
statusPosterService.uploadMedia({ store, formData })
.then((fileData) => {
self.$emit('uploaded', fileData)
})
})
}
}
export default mediaUpload

17
src/components/media_upload/media_upload.vue Normal file
View file

@ -0,0 +1,17 @@
<template>
<div class="media-upload">
<label class="btn btn-default">
<i class="fa icon-upload"></i>
<input type=file style="position: fixed; top: -100em"></input>
</label>
</div>
</template>
<script src="./media_upload.js" ></script>
<style>
.media-upload {
font-size: 26px;
flex: 1;
}
</style>

4
src/components/nav_panel/nav_panel.js Normal file
View file

@ -0,0 +1,4 @@
const NavPanel = {
}
export default NavPanel

54
src/components/nav_panel/nav_panel.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<div class="nav-panel">
<div class="panel panel-default">
<ul>
<li ng-if='currentUser'>
<router-link to='/main/friends'>
Timeline
</router-link>
</li>
<li>
<router-link to='/main/public'>
Public Timeline
</router-link>
</li>
<li>
<router-link to='/main/all'>
The Whole Known Network
</router-link>
</li>
</ul>
</div>
</div>
</template>
<script src="./nav_panel.js" ></script>
<style lang="scss">
.nav-panel ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-panel li {
border-bottom: 1px solid silver;
padding: 0.5em;
padding-left: 1em;
}
.nav-panel li:last-child {
border: none;
}
.nav-panel a {
display: block;
width: 100%;
&.router-link-active {
font-weight: bold
}
}
</style>

17
src/components/post_status_form/post_status_form.js
View file

@ -1,4 +1,6 @@
import statusPoster from '../../services/status_poster/status_poster.service.js' import statusPoster from '../../services/status_poster/status_poster.service.js'
import MediaUpload from '../media_upload/media_upload.vue'
import { reject, map, uniqBy } from 'lodash'; import { reject, map, uniqBy } from 'lodash';
const buildMentionsString = ({user, attentions}, currentUser) => { const buildMentionsString = ({user, attentions}, currentUser) => {
@ -23,6 +25,9 @@ const PostStatusForm = {
'repliedUser', 'repliedUser',
'attentions' 'attentions'
], ],
components: {
MediaUpload
},
data () { data () {
let statusText = '' let statusText = ''
@ -33,7 +38,8 @@ const PostStatusForm = {
return { return {
newStatus: { newStatus: {
status: statusText status: statusText,
files: []
} }
} }
}, },
@ -41,11 +47,18 @@ const PostStatusForm = {
postStatus (newStatus) { postStatus (newStatus) {
statusPoster.postStatus({ statusPoster.postStatus({
status: newStatus.status, status: newStatus.status,
media: newStatus.files,
store: this.$store, store: this.$store,
inReplyToStatusId: this.replyTo inReplyToStatusId: this.replyTo
}) })
this.newStatus = { } this.newStatus = {
status: '',
files: []
}
this.$emit('posted') this.$emit('posted')
},
addMediaFile (fileInfo) {
this.newStatus.files.push(fileInfo)
} }
} }
} }

2
src/components/post_status_form/post_status_form.vue
View file

@ -10,7 +10,7 @@
</div> </div>
</div> </div>
<div class='form-bottom'> <div class='form-bottom'>
<media-upload files="newStatus.files"></media-upload> <media-upload v-on:uploaded="addMediaFile"></media-upload>
<button type="submit" class="btn btn-default" >Submit</button> <button type="submit" class="btn btn-default" >Submit</button>
</div> </div>
</form> </form>

11
src/components/public_and_external_timeline/public_and_external_timeline.js Normal file
View file

@ -0,0 +1,11 @@
import Timeline from '../timeline/timeline.vue'
const PublicAndExternalTimeline = {
components: {
Timeline
},
computed: {
timeline () { return this.$store.state.statuses.timelines.publicAndExternal }
}
}
export default PublicAndExternalTimeline

10
src/components/public_and_external_timeline/public_and_external_timeline.vue Normal file
View file

@ -0,0 +1,10 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading">THE WHOLE KNOWN NETWORK</div>
<div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
</div>
</div>
</template>
<script src="./public_and_external_timeline.js"></script>

3
src/components/status/status.js
View file

@ -16,6 +16,9 @@ const Status = {
} else { } else {
return this.statusoid return this.statusoid
} }
},
loggedIn () {
return !!this.$store.state.users.currentUser
} }
}, },
components: { components: {

2
src/components/status/status.vue
View file

@ -32,7 +32,7 @@
</attachment> </attachment>
</div> </div>
<div> <div v-if="loggedIn">
<div class='status-actions'> <div class='status-actions'>
<div> <div>
<a href="#" v-on:click.prevent="toggleReplying"> <a href="#" v-on:click.prevent="toggleReplying">

24
src/components/timeline/timeline.js
View file

@ -1,4 +1,5 @@
import Status from '../status/status.vue' import Status from '../status/status.vue'
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
const Timeline = { const Timeline = {
props: [ props: [
@ -8,9 +9,32 @@ const Timeline = {
components: { components: {
Status Status
}, },
created () {
const store = this.$store
const credentials = store.state.users.currentUser.credentials
timelineFetcher.fetchAndUpdate({
store,
credentials,
timeline: this.timelineName,
showImmediately: true
})
},
methods: { methods: {
showNewStatuses () { showNewStatuses () {
this.$store.commit('showNewStatuses', { timeline: this.timelineName }) this.$store.commit('showNewStatuses', { timeline: this.timelineName })
},
fetchOlderStatuses () {
const store = this.$store
const credentials = store.state.users.currentUser.credentials
store.commit('setLoading', { timeline: this.timelineName, value: true });
timelineFetcher.fetchAndUpdate({
store,
credentials,
timeline: this.timelineName,
older: true,
showImmediately: true
}).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
} }
} }
} }

7
src/components/timeline/timeline.vue
View file

@ -8,6 +8,13 @@
</div> </div>
</a> </a>
<status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status> <status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
<div class="new-status-notification">
<p class="text-center" >
Load older statuses.
</p>
</div>
</a>
</div> </div>
</template> </template>
<script src="./timeline.js"></script> <script src="./timeline.js"></script>

15
src/main.js
View file

@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
import Vuex from 'vuex' import Vuex from 'vuex'
import App from './App.vue' import App from './App.vue'
import PublicTimeline from './components/public_timeline/public_timeline.vue' import PublicTimeline from './components/public_timeline/public_timeline.vue'
import PublicAndExternalTimeline from './components/public_and_external_timeline/public_and_external_timeline.vue'
import FriendsTimeline from './components/friends_timeline/friends_timeline.vue' import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
import statusesModule from './modules/statuses.js' import statusesModule from './modules/statuses.js'
@ -19,12 +20,16 @@ const store = new Vuex.Store({
}) })
const routes = [ const routes = [
{ path: '/', redirect: '/main/public' }, { path: '/', redirect: '/main/all' },
{ path: '/main/all', component: PublicAndExternalTimeline },
{ path: '/main/public', component: PublicTimeline }, { path: '/main/public', component: PublicTimeline },
{ path: '/main/friends', component: FriendsTimeline } { path: '/main/friends', component: FriendsTimeline }
] ]
const router = new VueRouter({routes}) const router = new VueRouter({
mode: 'history',
routes
})
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
@ -34,9 +39,3 @@ new Vue({
template: '<App/>', template: '<App/>',
components: { App } components: { App }
}) })
const statusesEx = require('../test/fixtures/statuses.json')
setTimeout(() => {
store.commit('addNewStatuses', { statuses: statusesEx, timeline: 'public', showImmediately: false })
}, 3000)

20
src/modules/statuses.js
View file

@ -12,7 +12,8 @@ const defaultState = {
visibleStatuses: [], visibleStatuses: [],
newStatusCount: 0, newStatusCount: 0,
maxId: 0, maxId: 0,
minVisibleId: 0 minVisibleId: 0,
loading: false
}, },
publicAndExternal: { publicAndExternal: {
statuses: [], statuses: [],
@ -20,7 +21,8 @@ const defaultState = {
visibleStatuses: [], visibleStatuses: [],
newStatusCount: 0, newStatusCount: 0,
maxId: 0, maxId: 0,
minVisibleId: 0 minVisibleId: 0,
loading: false
}, },
friends: { friends: {
statuses: [], statuses: [],
@ -28,7 +30,8 @@ const defaultState = {
visibleStatuses: [], visibleStatuses: [],
newStatusCount: 0, newStatusCount: 0,
maxId: 0, maxId: 0,
minVisibleId: 0 minVisibleId: 0,
loading: false
} }
} }
} }
@ -37,7 +40,7 @@ const statusType = (status) => {
return !status.is_post_verb && status.uri.match(/fave/) ? 'fave' : 'status' return !status.is_post_verb && status.uri.match(/fave/) ? 'fave' : 'status'
} }
const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visibleStatuses, newStatusCount, faves }) => { const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visibleStatuses, newStatusCount, faves, loading }) => {
const statusesAndFaves = groupBy(addedStatuses, statusType) const statusesAndFaves = groupBy(addedStatuses, statusType)
const addedFaves = statusesAndFaves['fave'] || [] const addedFaves = statusesAndFaves['fave'] || []
const unseenFaves = differenceBy(addedFaves, faves, 'id') const unseenFaves = differenceBy(addedFaves, faves, 'id')
@ -55,6 +58,9 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
// Add some html and nsfw to the statuses. // Add some html and nsfw to the statuses.
each(addedStatuses, (status) => { each(addedStatuses, (status) => {
const statusoid = status.retweeted_status || status const statusoid = status.retweeted_status || status
statusoid.created_at_parsed = statusoid.created_at
if (statusoid.parsedText === undefined) { if (statusoid.parsedText === undefined) {
// statusoid.parsedText = statusParserService.parse(statusoid) // statusoid.parsedText = statusParserService.parse(statusoid)
statusoid.parsedText = statusoid.text statusoid.parsedText = statusoid.text
@ -89,7 +95,8 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
newStatusCount: newNewStatusCount, newStatusCount: newNewStatusCount,
maxId: newStatuses[0].id, maxId: newStatuses[0].id,
minVisibleId: (last(newVisibleStatuses) || { id: undefined }).id, minVisibleId: (last(newVisibleStatuses) || { id: undefined }).id,
faves: unionBy(faves, addedFaves, 'id') faves: unionBy(faves, addedFaves, 'id'),
loading
} }
} }
@ -135,6 +142,9 @@ const statuses = {
const newStatus = find(state.allStatuses, status) const newStatus = find(state.allStatuses, status)
newStatus.favorited = value newStatus.favorited = value
}, },
setLoading (state, { timeline, value }) {
state.timelines[timeline].loading = value
},
setNsfw (state, { id, nsfw }) { setNsfw (state, { id, nsfw }) {
// For now, walk through all the statuses because the stuff might be in the replied_to_status // For now, walk through all the statuses because the stuff might be in the replied_to_status
// TODO: Save the replied_tos as references. // TODO: Save the replied_tos as references.

25
src/services/api/api.service.js
View file

@ -6,21 +6,27 @@ const PUBLIC_AND_EXTERNAL_TIMELINE_URL = '/api/statuses/public_and_external_time
const FAVORITE_URL = '/api/favorites/create' const FAVORITE_URL = '/api/favorites/create'
const UNFAVORITE_URL = '/api/favorites/destroy' const UNFAVORITE_URL = '/api/favorites/destroy'
const STATUS_UPDATE_URL = '/api/statuses/update.json' const STATUS_UPDATE_URL = '/api/statuses/update.json'
const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
// const CONVERSATION_URL = '/api/statusnet/conversation/'; // const CONVERSATION_URL = '/api/statusnet/conversation/';
// const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload';
// const FORM_CONTENT_TYPE = {'Content-Type': 'application/x-www-form-urlencoded'}; // const FORM_CONTENT_TYPE = {'Content-Type': 'application/x-www-form-urlencoded'};
// import { param, ajax } from 'jquery'; // import { param, ajax } from 'jquery';
// import { merge } from 'lodash'; // import { merge } from 'lodash';
const authHeaders = (user) => ({ 'Authorization': `Basic ${btoa(`${user.username}:${user.password}`)}` }) const authHeaders = (user) => {
if (user) {
return { 'Authorization': `Basic ${btoa(`${user.username}:${user.password}`)}` }
} else {
return { }
}
}
const fetchTimeline = ({timeline, credentials, since = false, until = false}) => { const fetchTimeline = ({timeline, credentials, since = false, until = false}) => {
const timelineUrls = { const timelineUrls = {
public: PUBLIC_TIMELINE_URL, public: PUBLIC_TIMELINE_URL,
friends: FRIENDS_TIMELINE_URL, friends: FRIENDS_TIMELINE_URL,
'public-and-external': PUBLIC_AND_EXTERNAL_TIMELINE_URL 'publicAndExternal': PUBLIC_AND_EXTERNAL_TIMELINE_URL
} }
let url = timelineUrls[timeline] let url = timelineUrls[timeline]
@ -75,12 +81,23 @@ const postStatus = ({credentials, status, mediaIds, inReplyToStatusId}) => {
}) })
} }
const uploadMedia = ({formData, credentials}) => {
return fetch(MEDIA_UPLOAD_URL, {
body: formData,
method: 'POST',
headers: authHeaders(credentials)
})
.then((response) => response.text())
.then((text) => (new DOMParser()).parseFromString(text, 'application/xml'))
}
const apiService = { const apiService = {
verifyCredentials, verifyCredentials,
fetchTimeline, fetchTimeline,
favorite, favorite,
unfavorite, unfavorite,
postStatus postStatus,
uploadMedia
} }
export default apiService export default apiService

15
src/services/status_poster/status_poster.service.js
View file

@ -12,8 +12,21 @@ const postStatus = ({ store, status, media = [], inReplyToStatusId = undefined }
}) })
} }
const uploadMedia = ({ store, formData }) => {
const credentials = store.state.users.currentUser.credentials
return apiService.uploadMedia({ credentials, formData }).then((xml) => {
return {
id: xml.getElementsByTagName('media_id')[0].textContent,
url: xml.getElementsByTagName('media_url')[0].textContent,
image: xml.getElementsByTagName('atom:link')[0].getAttribute('href')
}
})
}
const statusPosterService = { const statusPosterService = {
postStatus postStatus,
uploadMedia
} }
export default statusPosterService export default statusPosterService

1
src/services/timeline_fetcher/.#timeline_fetcher.service.js
View file

@ -1 +0,0 @@
roger@yuuyuu.18961

6
src/services/timeline_fetcher/timeline_fetcher.service.js
View file

@ -16,7 +16,8 @@ const update = ({store, statuses, timeline, showImmediately}) => {
const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => { const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => {
const args = { timeline, credentials } const args = { timeline, credentials }
const timelineData = store.rootState.statuses.timelines[camelCase(timeline)] const rootState = store.rootState || store.state
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
if (older) { if (older) {
args['until'] = timelineData.minVisibleId args['until'] = timelineData.minVisibleId
@ -24,7 +25,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
args['since'] = timelineData.maxId args['since'] = timelineData.maxId
} }
apiService.fetchTimeline(args) return apiService.fetchTimeline(args)
.then((statuses) => update({store, statuses, timeline, showImmediately})) .then((statuses) => update({store, statuses, timeline, showImmediately}))
} }
@ -35,6 +36,7 @@ const startFetching = ({ timeline = 'friends', credentials, store }) => {
setInterval(boundFetchAndUpdate, 10000) setInterval(boundFetchAndUpdate, 10000)
} }
const timelineFetcher = { const timelineFetcher = {
fetchAndUpdate,
startFetching startFetching
} }

6
static/font/config.json
View file

@ -29,6 +29,12 @@
"css": "star-empty", "css": "star-empty",
"code": 59394, "code": 59394,
"src": "fontawesome" "src": "fontawesome"
},
{
"uid": "eeec3208c90b7b48e804919d0d2d4a41",
"css": "upload",
"code": 59395,
"src": "fontawesome"
} }
] ]
} }

1
static/font/css/fontello-codes.css vendored
View file

@ -2,4 +2,5 @@
.icon-retweet:before { content: '\e800'; } /* '' */ .icon-retweet:before { content: '\e800'; } /* '' */
.icon-star:before { content: '\e801'; } /* '' */ .icon-star:before { content: '\e801'; } /* '' */
.icon-star-empty:before { content: '\e802'; } /* '' */ .icon-star-empty:before { content: '\e802'; } /* '' */
.icon-upload:before { content: '\e803'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */ .icon-reply:before { content: '\f112'; } /* '' */

13
static/font/css/fontello-embedded.css vendored
View file

File diff suppressed because one or more lines are too long

1
static/font/css/fontello-ie7-codes.css vendored
View file

@ -2,4 +2,5 @@
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); } .icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); } .icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); } .icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); } .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }

1
static/font/css/fontello-ie7.css vendored
View file

@ -13,4 +13,5 @@
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); } .icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); } .icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); } .icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); } .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }

15
static/font/css/fontello.css vendored
View file

@ -1,11 +1,11 @@
@font-face { @font-face {
font-family: 'fontello'; font-family: 'fontello';
src: url('../font/fontello.eot?1876128'); src: url('../font/fontello.eot?70483588');
src: url('../font/fontello.eot?1876128#iefix') format('embedded-opentype'), src: url('../font/fontello.eot?70483588#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?1876128') format('woff2'), url('../font/fontello.woff2?70483588') format('woff2'),
url('../font/fontello.woff?1876128') format('woff'), url('../font/fontello.woff?70483588') format('woff'),
url('../font/fontello.ttf?1876128') format('truetype'), url('../font/fontello.ttf?70483588') format('truetype'),
url('../font/fontello.svg?1876128#fontello') format('svg'); url('../font/fontello.svg?70483588#fontello') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face { @font-face {
font-family: 'fontello'; font-family: 'fontello';
src: url('../font/fontello.svg?1876128#fontello') format('svg'); src: url('../font/fontello.svg?70483588#fontello') format('svg');
} }
} }
*/ */
@ -58,4 +58,5 @@
.icon-retweet:before { content: '\e800'; } /* '' */ .icon-retweet:before { content: '\e800'; } /* '' */
.icon-star:before { content: '\e801'; } /* '' */ .icon-star:before { content: '\e801'; } /* '' */
.icon-star-empty:before { content: '\e802'; } /* '' */ .icon-star-empty:before { content: '\e802'; } /* '' */
.icon-upload:before { content: '\e803'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */ .icon-reply:before { content: '\f112'; } /* '' */

13
static/font/demo.html
View file

@ -229,11 +229,11 @@ body {
} }
@font-face { @font-face {
font-family: 'fontello'; font-family: 'fontello';
src: url('./font/fontello.eot?51751583'); src: url('./font/fontello.eot?93026246');
src: url('./font/fontello.eot?51751583#iefix') format('embedded-opentype'), src: url('./font/fontello.eot?93026246#iefix') format('embedded-opentype'),
url('./font/fontello.woff?51751583') format('woff'), url('./font/fontello.woff?93026246') format('woff'),
url('./font/fontello.ttf?51751583') format('truetype'), url('./font/fontello.ttf?93026246') format('truetype'),
url('./font/fontello.svg?51751583#fontello') format('svg'); url('./font/fontello.svg?93026246#fontello') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@ -304,6 +304,9 @@ body {
<div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe800;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe800</span></div> <div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe800;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe800</span></div>
<div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-star">&#xe801;</i> <span class="i-name">icon-star</span><span class="i-code">0xe801</span></div> <div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-star">&#xe801;</i> <span class="i-name">icon-star</span><span class="i-code">0xe801</span></div>
<div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe802;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe802</span></div> <div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe802;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe802</span></div>
<div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-upload">&#xe803;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe803</span></div>
</div>
<div class="row">
<div title="Code: 0xf112" class="the-icons span3"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div> <div title="Code: 0xf112" class="the-icons span3"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
</div> </div>
</div> </div>

BIN
static/font/font/fontello.eot
View file

Binary file not shown.

2
static/font/font/fontello.svg
View file

@ -12,6 +12,8 @@
<glyph glyph-name="star-empty" unicode="&#xe802;" d="M635 290l170 166-235 34-106 213-105-213-236-34 171-166-41-235 211 111 211-111z m294 199q0-12-15-27l-202-197 48-279q0-4 0-12 0-28-23-28-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" /> <glyph glyph-name="star-empty" unicode="&#xe802;" d="M635 290l170 166-235 34-106 213-105-213-236-34 171-166-41-235 211 111 211-111z m294 199q0-12-15-27l-202-197 48-279q0-4 0-12 0-28-23-28-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
<glyph glyph-name="upload" unicode="&#xe803;" d="M714 29q0 14-10 25t-25 10-25-10-11-25 11-25 25-11 25 11 10 25z m143 0q0 14-10 25t-26 10-25-10-10-25 10-25 25-11 26 11 10 25z m72 125v-179q0-22-16-38t-38-16h-821q-23 0-38 16t-16 38v179q0 22 16 38t38 15h238q12-31 39-51t62-20h143q34 0 61 20t40 51h238q22 0 38-15t16-38z m-182 361q-9-22-33-22h-143v-250q0-15-10-25t-25-11h-143q-15 0-25 11t-11 25v250h-143q-23 0-33 22-9 22 8 39l250 250q10 10 25 10t25-10l250-250q18-17 8-39z" horiz-adv-x="928.6" />
<glyph glyph-name="reply" unicode="&#xf112;" d="M1000 225q0-93-71-252-1-4-6-13t-7-17-7-12q-7-10-16-10-8 0-13 6t-5 14q0 5 1 15t2 13q3 38 3 69 0 56-10 101t-27 77-45 56-59 39-74 24-86 12-98 3h-125v-143q0-14-10-25t-26-11-25 11l-285 286q-11 10-11 25t11 25l285 286q11 10 25 10t26-10 10-25v-143h125q398 0 488-225 30-75 30-186z" horiz-adv-x="1000" /> <glyph glyph-name="reply" unicode="&#xf112;" d="M1000 225q0-93-71-252-1-4-6-13t-7-17-7-12q-7-10-16-10-8 0-13 6t-5 14q0 5 1 15t2 13q3 38 3 69 0 56-10 101t-27 77-45 56-59 39-74 24-86 12-98 3h-125v-143q0-14-10-25t-26-11-25 11l-285 286q-11 10-11 25t11 25l285 286q11 10 25 10t26-10 10-25v-143h125q398 0 488-225 30-75 30-186z" horiz-adv-x="1000" />
</font> </font>
</defs> </defs>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/font/font/fontello.ttf
View file

Binary file not shown.

BIN
static/font/font/fontello.woff
View file

Binary file not shown.

BIN
static/font/font/fontello.woff2
View file

Binary file not shown.