Merge branch 'develop' of ssh.gitgud.io:lambadalambda/pleroma-fe into feature/hash-routed

2017-04-21 19:15:54 +03:00 · 2017-04-21 19:15:54 +03:00 · c2db700544
parent 36655002d0 1f8d303863
commit c2db700544
17 changed files with 178 additions and 34 deletions
--- a/README.md
+++ b/README.md
@ -2,7 +2,7 @@

 > A Qvitter-style frontend for certain GS servers.

-![screenshot](http://i.imgur.com/3q30Zxt.jpg)
+![screenshot](https://my.mixtape.moe/kjzioz.PNG)

 # FOR ADMINS

--- a/index.html
+++ b/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
--- a/src/App.scss
+++ b/src/App.scss
@ -213,13 +213,20 @@ nav {
 }

 .main {
-    flex: 1;
-    flex-basis: 65%;
+    flex-basis: 60%;
+    flex-grow: 1;
+    flex-shrink: 1;
 }

 .sidebar {
-    flex: 1;
-    flex-basis: 35%;
+  flex: 0;
+  flex-basis: 35%;
+}
+
+.sidebar-flexer {
+  flex: 1;
+  flex-basis: 345px;
+  width: 365px;
 }

 .mobile-shown {
@ -238,6 +245,30 @@ nav {
    }
 }

+@media all and (min-width: 960px) {
+  .sidebar {
+    overflow: hidden;
+    max-height: 100vh;
+    width: 350px;
+    position: fixed;
+    margin-top: -10px;
+
+    .sidebar-container {
+      height: 96vh;
+      width: 362px;
+      padding-top: 10px;
+      padding-right: 20px;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+  }
+  .sidebar-flexer {
+    max-height: 96vh;
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+}
+
@media all and (max-width: 959px) {
    .mobile-hidden {
        display: none;
--- a/src/App.vue
+++ b/src/App.vue
@ -15,10 +15,14 @@
        <button @click="activatePanel('sidebar')">Sidebar</button>
        <button @click="activatePanel('timeline')">Timeline</button>
      </div>
-      <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
-        <user-panel></user-panel>
-        <nav-panel></nav-panel>
-        <notifications v-if="currentUser"></notifications>
+      <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
+        <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
+          <div class="sidebar-container">
+            <user-panel></user-panel>
+            <nav-panel></nav-panel>
+            <notifications v-if="currentUser"></notifications>
+          </div>
+        </div>
      </div>
      <div class="main" :class="{ 'mobile-hidden': mobileActivePanel != 'timeline' }">
        <transition name="fade">
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@ -33,10 +33,10 @@
  .attachments {
      display: flex;
      flex-wrap: wrap;
-      margin-right: -0.8em;
+      margin-right: -0.7em;
      .attachment {
          flex: 1 0 30%;
-          margin: 0.5em 0.8em 0.6em 0.0em;
+          margin: 0.5em 0.7em 0.6em 0.0em;
          align-self: flex-start;

          &.html {
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@ -8,6 +8,11 @@ const sortAndFilterConversation = (conversation) => {
 }

 const conversation = {
+  data () {
+    return {
+      highlight: null
+    }
+  },
  props: [
    'statusoid',
    'collapsable'
@ -54,6 +59,9 @@ const conversation = {
      } else {
        return (id === this.statusoid.id)
      }
+    },
+    setHighlight (id) {
+      this.highlight = Number(id)
    }
  }
 }
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@ -8,7 +8,7 @@
    </div>
    <div class="panel-body">
      <div class="timeline">
-        <status v-for="status in conversation" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true'></status>
+        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight"></status>
      </div>
    </div>
  </div>
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@ -1,6 +1,8 @@
@import '../../_variables.scss';

 .notifications {
+  // a bit of a hack to allow scrolling below notifications
+  padding-bottom: 15em;

  .panel-heading {
    // force the text to stay centered, while keeping
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@ -14,11 +14,11 @@
          <div class='text'>
            <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
            <div v-if="notification.type === 'favorite'">
-              <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+              <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</router-link></h1>
              <p>{{ notification.status.text }}</p>
            </div>
            <div v-if="notification.type === 'repeat'">
-              <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+              <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</router-link></h1>
              <p>{{ notification.status.text }}</p>
            </div>
            <div v-if="notification.type === 'mention'">
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@ -4,6 +4,10 @@
      <div class="form-group" >
        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
      </div>
+      <div class='form-bottom'>
+        <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
+        <button :disabled="submitDisabled" type="submit" class="btn btn-default base05 base01-background">Submit</button>
+      </div>
      <div class="attachments">
        <div class="attachment" v-for="file in newStatus.files">
          <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
@ -13,10 +17,6 @@
          <a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
        </div>
      </div>
-      <div class='form-bottom'>
-        <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
-        <button :disabled="submitDisabled" type="submit" class="btn btn-default base05 base01-background">Submit</button>
-      </div>
    </form>
  </div>
 </template>
@ -44,14 +44,20 @@
     .form-bottom {
         display: flex;
         padding: 0.5em;
+         height: 32px;

         button {
-             flex: 2;
+             width: 10em;
         }
     }

     .attachments {
-         padding: 0.5em;
+         padding: 0 0.5em;
+
+         .attachment {
+           position: relative;
+           margin: 0.5em 0.8em 0.2em 0;
+         }

         i {
            position: absolute;
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@ -11,7 +11,8 @@ const Status = {
    'statusoid',
    'expandable',
    'inConversation',
-    'focused'
+    'focused',
+    'highlight'
  ],
  data: () => ({
    replying: false,
@ -53,6 +54,16 @@ const Status = {
      return {
        borderBottomColor: this.$store.state.config.colors['base02']
      }
+    },
+    isFocused () {
+      // retweet or root of an expanded conversation
+      if (this.focused) {
+        return true
+      } else if (!this.inConversation) {
+        return false
+      }
+      // use conversation highlight only when in conversation
+      return this.status.id === this.highlight
    }
  },
  components: {
@ -75,6 +86,10 @@ const Status = {
    toggleReplying () {
      this.replying = !this.replying
    },
+    gotoOriginal () {
+      // only handled by conversation, not status_or_conversation
+      this.$emit('goto', this.status.in_reply_to_status_id)
+    },
    toggleExpanded () {
      this.$emit('toggleExpanded')
    },
@ -84,6 +99,20 @@ const Status = {
    toggleUserExpanded () {
      this.userExpanded = !this.userExpanded
    }
+  },
+  watch: {
+    'highlight': function (id) {
+      id = Number(id)
+      if (this.status.id === id) {
+        let rect = this.$el.getBoundingClientRect()
+        if (rect.top < 100) {
+          window.scrollBy(0, rect.top - 200)
+        } else if (rect.bottom > window.innerHeight - 100) {
+          // will be useful when scrolling down to replies or root posts is in
+          window.scrollBy(0, rect.bottom + 200)
+        }
+      }
+    }
  }
 }

--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': focused }, { 'status-conversation': inConversation }]" >
+  <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
    <template v-if="muted">
      <div class="media status container muted">
        <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@ -35,12 +35,10 @@
                  {{status.in_reply_to_screen_name}}
                </router-link>
              </small>
-              <template v-if="isReply">
-                  <small>
-                      <router-link :to="{ name: 'conversation', params: { id: status.in_reply_to_status_id } }">
-                          <i class="icon-reply"></i>
-                      </router-link>
-                  </small>
+              <template v-if="isReply && !expandable">
+                <small>
+                  <a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
+                </small>
              </template>
              -
              <small>
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@ -79,9 +79,8 @@
        return this.$store.state.users.currentUser
      },
      dailyAvg () {
-        return Math.round(
-          this.user.statuses_count / ((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
-        )
+        const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
+        return Math.round(this.user.statuses_count / days)
      }
    },
    methods: {
@ -117,7 +116,6 @@
 }

 .profile-panel-body {
-  padding-top: 0em;
  top: -0em;
  padding-top: 4em;
 }
--- a/static/config.json
+++ b/static/config.json
@ -1,6 +1,6 @@
 {
  "name": "Pleroma FE",
-  "theme": "base16-ashes.css",
+  "theme": "base16-pleroma-dark.css",
  "background": "/static/bg.jpg",
  "logo": "/static/logo.png"
 }
--- a/static/css/base16-pleroma-dark.css
+++ b/static/css/base16-pleroma-dark.css
@ -0,0 +1,33 @@
+.base00-background { background-color: #161c20; }
+.base01-background { background-color: #282e32; }
+.base02-background { background-color: #343a3f; }
+.base03-background { background-color: #4e5256; }
+.base04-background { background-color: #ababab; }
+.base05-background { background-color: #b9b9b9; }
+.base06-background { background-color: #d0d0d0; }
+.base07-background { background-color: #e7e7e7; }
+.base08-background { background-color: #baaa9c; }
+.base09-background { background-color: #999999; }
+.base0A-background { background-color: #a0a0a0; }
+.base0B-background { background-color: #8e8e8e; }
+.base0C-background { background-color: #868686; }
+.base0D-background { background-color: #686868; }
+.base0E-background { background-color: #747474; }
+.base0F-background { background-color: #5e5e5e; }
+
+.base00 { color: #161c20; }
+.base01 { color: #282e32; }
+.base02 { color: #36393e; }
+.base03 { color: #4e5256; }
+.base04 { color: #ababab; }
+.base05 { color: #b9b9b9; }
+.base06 { color: #d0d0d0; }
+.base07 { color: #e7e7e7; }
+.base08 { color: #baaa9c; }
+.base09 { color: #999999; }
+.base0A { color: #a0a0a0; }
+.base0B { color: #8e8e8e; }
+.base0C { color: #868686; }
+.base0D { color: #686868; }
+.base0E { color: #747474; }
+.base0F { color: #5e5e5e; }
--- a/static/css/base16-pleroma-light.css
+++ b/static/css/base16-pleroma-light.css
@ -0,0 +1,33 @@
+.base00-background { background-color: #f2f4f6; }
+.base01-background { background-color: #dde2e6; }
+.base02-background { background-color: #c0c6cb; }
+.base03-background { background-color: #a4a4a4; }
+.base04-background { background-color: #545454; }
+.base05-background { background-color: #304055; }
+.base06-background { background-color: #040404; }
+.base07-background { background-color: #000000; }
+.base08-background { background-color: #e92f2f; }
+.base09-background { background-color: #e09448; }
+.base0A-background { background-color: #dddd13; }
+.base0B-background { background-color: #0ed839; }
+.base0C-background { background-color: #23edda; }
+.base0D-background { background-color: #3b48e3; }
+.base0E-background { background-color: #f996e2; }
+.base0F-background { background-color: #69542d; }
+
+.base00 { color: #f2f4f6; }
+.base01 { color: #dde2e6; }
+.base02 { color: #c0c6cb; }
+.base03 { color: #a4a4a4; }
+.base04 { color: #545454; }
+.base05 { color: #304055; }
+.base06 { color: #040404; }
+.base07 { color: #000000; }
+.base08 { color: #e46f0f; }
+.base09 { color: #e09448; }
+.base0A { color: #dddd13; }
+.base0B { color: #0ed839; }
+.base0C { color: #23edda; }
+.base0D { color: #3b48e3; }
+.base0E { color: #f996e2; }
+.base0F { color: #69542d; }
--- a/static/css/themes.json
+++ b/static/css/themes.json
@ -1,4 +1,6 @@
 [
+"base16-pleroma-dark.css",
+"base16-pleroma-light.css",
 "base16-3024.css",
 "base16-apathy.css",
 "base16-ashes.css",