Merge pull request #113 from NicolasConstant/develop

0.10.0

package.json

@@ -1,6 +1,6 @@
 {
     "name": "sengi",
-    "version": "0.9.1",
+    "version": "0.10.0",
     "license": "AGPL-3.0-or-later",
     "main": "main-electron.js",
     "description": "A multi-account desktop client for Mastodon and Pleroma",

src/app/app.module.ts

@@ -60,6 +60,8 @@ import { AccountEmojiPipe } from './pipes/account-emoji.pipe';
 import { CardComponent } from './components/stream/status/card/card.component';
 import { ListEditorComponent } from './components/floating-column/manage-account/my-account/list-editor/list-editor.component';
 import { ListAccountComponent } from './components/floating-column/manage-account/my-account/list-editor/list-account/list-account.component';
+import { PollComponent } from './components/stream/status/poll/poll.component';
+import { TimeLeftPipe } from './pipes/time-left.pipe';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -108,7 +110,9 @@ const routes: Routes = [
     AccountEmojiPipe,
     CardComponent,
     ListEditorComponent,
-    ListAccountComponent
+    ListAccountComponent,
+    PollComponent,
+    TimeLeftPipe
   ],
   imports: [
     FontAwesomeModule,

src/app/components/floating-column/manage-account/notifications/notifications.component.ts

@@ -154,6 +154,7 @@ class NotificationWrapper {
             case 'mention': 
             case 'reblog': 
             case 'favourite':
+            case 'poll':
                 this.status= new StatusWrapper(notification.status, provider);
                 break;          
         }    
@@ -164,5 +165,5 @@ class NotificationWrapper {
     wrapperId: string;
     account: Account;
     status: StatusWrapper;
-    type: 'mention' | 'reblog' | 'favourite' | 'follow';
+    type: 'mention' | 'reblog' | 'favourite' | 'follow' | 'poll';
 }

src/app/components/stream/status/poll/poll.component.html

@@ -0,0 +1,29 @@
+<div class="poll">
+    <div *ngIf="!poll.voted && !poll.expired">
+        <div *ngFor="let o of options">
+            <label class="poll__container">{{o.title}}
+                <input class="poll__container__input" type="{{choiceType}}" name="{{pollName}}" value="{{o.title}}"
+                    (change)="onSelectionChange(o)">
+                <span class="poll__container__checkmark" *ngIf="!pollLocked"
+                    [ngClass]="{'poll__container__checkmark--box' : choiceType=='checkbox', 'poll__container__checkmark--round': choiceType=='radio'}"></span>
+                <fa-icon *ngIf="pollLocked" class="poll__container__lock" title="Account can't access this poll" [icon]="faLock"></fa-icon>
+            </label>
+        </div>
+    </div>
+    <div *ngIf="poll.voted || poll.expired">
+        <div *ngFor="let o of options">
+            <div class="poll__result" title="{{ o.votes_count }} votes">
+                <div class="poll__result--progress-bar" [style.width]="o.percentage + '%'" [ngClass]="{ 'poll__result--progress-bar--most-votes': o.isMax }"></div>
+                <div class="poll__result--data"> <span class="poll__result--percentage">{{ o.percentage }}%</span>
+                    {{o.title}}</div>
+
+            </div>
+        </div>
+    </div>
+    <div class="poll__voting">
+        <button href *ngIf="!poll.voted && !poll.expired && !pollLocked" class="btn btn-sm btn-custom-primary poll__btn-vote"
+            title="don't boo, vote!" (click)="vote()">Vote</button>
+        <a href class="poll__refresh" *ngIf="(poll.voted || poll.expired) && !pollLocked" title="refresh poll" (click)="refresh()">refresh</a>
+        <div class="poll__statistics"><span *ngIf="(poll.voted || poll.expired) && !pollLocked" class="poll__separator">·</span>{{poll.votes_count}} votes<span *ngIf="!poll.expired" class="poll__separator" title="{{ poll.expires_at | timeLeft | async }}">· {{ poll.expires_at | timeLeft | async }}</span></div>
+    </div>
+</div>

src/app/components/stream/status/poll/poll.component.scss

@@ -0,0 +1,184 @@
+// @import "variables";
+// @import "commons";
+// @import "panel";
+@import "buttons";
+
+.poll {
+
+    color: white;
+    color: rgb(228, 228, 228);
+
+    &__btn-vote {
+        margin: 0 10px 0 0;
+        padding: 4px 15px;
+    }
+
+    &__statistics {
+        display: inline-block;
+        font-size: 0.8em;
+        color: rgb(101, 121, 160);
+    }
+
+    &__label {
+        cursor: pointer;
+    }
+
+    &__voting {
+        margin-top: 10px;
+    }
+
+    &__refresh {
+        font-size: 0.8em;
+        color: rgb(101, 121, 160);
+    }
+
+    &__container {
+        display: block;
+        position: relative;
+        padding-left: 25px;
+        margin: 0 0 5px 5px;
+        cursor: pointer;
+        // font-size: 22px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        &:hover &__input~&__checkmark {
+            background-color: #ccc;
+        }
+
+        & &__input:checked~&__checkmark {
+            background-color: rgb(62, 75, 100);
+        }
+
+        &__input {
+            position: absolute;
+            opacity: 0;
+            cursor: pointer;
+            height: 0;
+            width: 0;
+        }
+
+        &__lock {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+        &__checkmark--box {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 20px;
+            width: 20px;
+            background-color: #eee;
+
+            &:after {
+                content: "";
+                position: absolute;
+                display: none;
+            }
+        }
+
+        &__checkmark--round {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 20px;
+            width: 20px;
+            background-color: #eee;
+            border-radius: 50%;
+        }
+
+        & &__input:checked:checked~&__checkmark:after {
+            display: block;
+        }
+
+        & &__checkmark--box:after {
+            left: 7px;
+            top: 5px;
+            width: 5px;
+            height: 10px;
+            border: solid white;
+            border-width: 0 3px 3px 0;
+            -webkit-transform: rotate(45deg);
+            -ms-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+
+        &__checkmark--round:after {
+            content: "";
+            position: absolute;
+            display: none;
+        }
+
+        & &__checkmark--round:after {
+            top: 6px;
+            left: 6px;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: white;
+        }
+    }
+
+    &__result {
+        transition: width 2s;
+
+        margin: 0 0 5px 5px;
+        padding: 0 5px 0 5px;
+        position: relative;
+        height: 27px;
+
+        &--data {
+            position: absolute;
+            z-index: 10;
+        }
+
+        &--percentage {
+            color: rgb(228, 228, 228);
+            color: white;
+            display: inline;
+            margin-right: 10px;
+
+        }
+
+        &--progress-bar {
+            position: absolute;
+            background-color: rgb(47, 68, 100);
+            // background-color: rgb(43, 62, 92);
+            top:0;
+            left:0;
+            width: calc(100%);
+            height: 22px;
+            z-index: 1;
+            float: left;
+            border-radius: 2px;
+
+            &--most-votes {
+                background-color: rgb(18, 118, 158);
+            }
+        }
+    }
+
+    &__separator {
+        display: inline-block;
+        margin: 0 5px;
+    }
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+    -webkit-user-select: none;
+    /* Safari */
+    -khtml-user-select: none;
+    /* Konqueror HTML */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* Internet Explorer/Edge */
+    user-select: none;
+    /* Non-prefixed version, currently supported by Chrome and Opera */
+}

src/app/components/stream/status/poll/poll.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PollComponent } from './poll.component';
+
+xdescribe('PollComponent', () => {
+  let component: PollComponent;
+  let fixture: ComponentFixture<PollComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PollComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PollComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});