chore: design first iteration of refined polls

extend.php

@@ -26,7 +26,8 @@
 return [
     (new Extend\Frontend('forum'))
         ->js(__DIR__.'/js/dist/forum.js')
-        ->css(__DIR__.'/resources/less/forum.less'),
+        ->css(__DIR__.'/resources/less/forum.less')
+        ->route('/polls', 'polls'),
 
     (new Extend\Frontend('admin'))
         ->js(__DIR__.'/js/dist/admin.js')

js/src/forum/addPollsLink.js

@@ -0,0 +1,17 @@
+import { extend } from 'flarum/common/extend';
+import IndexPage from 'flarum/forum/components/IndexPage';
+import LinkButton from 'flarum/common/components/LinkButton';
+
+import app from 'flarum/forum/app';
+
+export default function () {
+  extend(IndexPage.prototype, 'navItems', function (items) {
+    items.add(
+      'polls',
+      <LinkButton icon="fas fa-poll" href={app.route('polls')}>
+        Polls
+      </LinkButton>,
+      -11
+    );
+  });
+}

js/src/forum/components/Poll.tsx

@@ -0,0 +1,74 @@
+import * as Mithril from 'mithril';
+import Component from 'flarum/common/Component';
+
+export default class IndexPolls extends Component {
+  view(): Mithril.Children {
+    return (
+      <div className="Index-poll">
+        <b>Polls</b>
+        <p>Lorem Ipsum Dolor Sit amet Consectetur Adipiscing Elit </p>
+        <form>
+          <fieldset>
+            <legend className="sr-only">Privacy setting</legend>
+            <div className="aaa">
+              <label className="ba bbb">
+                <input
+                  type="radio"
+                  name="privacy-setting"
+                  value="Public access"
+                  className="ccc"
+                  aria-labelledby="privacy-setting-0-label"
+                  aria-describedby="privacy-setting-0-description"
+                />
+                <span className="ddd">
+                  <span id="privacy-setting-0-label" className="fff">
+                    Public access
+                  </span>
+                  <span id="privacy-setting-0-description" className="ggg">
+                    This project would be available to anyone who has the link
+                  </span>
+                </span>
+              </label>
+              <label className="bbb">
+                <input
+                  type="radio"
+                  name="privacy-setting"
+                  value="Private to Project Members"
+                  className="ccc"
+                  aria-labelledby="privacy-setting-1-label"
+                  aria-describedby="privacy-setting-1-description"
+                />
+                <span className="ddd">
+                  <span id="privacy-setting-1-label" className="fff">
+                    Private to Project Members
+                  </span>
+                  <span id="privacy-setting-1-description" className="ggg">
+                    Only members of this project would be able to access
+                  </span>
+                </span>
+              </label>
+              <label className="bba bbb">
+                <input
+                  type="radio"
+                  name="privacy-setting"
+                  value="Private to you"
+                  className="ccc"
+                  aria-labelledby="privacy-setting-2-label"
+                  aria-describedby="privacy-setting-2-description"
+                />
+                <span className="ddd">
+                  <span id="privacy-setting-2-label" className="fff">
+                    Private to you
+                  </span>
+                  <span id="privacy-setting-2-description" className="ggg">
+                    You are the only one able to access this project
+                  </span>
+                </span>
+              </label>
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    );
+  }
+}

js/src/forum/components/PollsPage.js

@@ -0,0 +1,42 @@
+import app from 'flarum/forum/app';
+import Page from 'flarum/common/components/Page';
+import ItemList from 'flarum/common/utils/ItemList';
+import listItems from 'flarum/common/helpers/listItems';
+import IndexPage from 'flarum/forum/components/IndexPage';
+import Poll from './Poll';
+
+export default class PollsPage extends Page {
+  oninit(vnode) {
+    super.oninit(vnode);
+  }
+
+  oncreate(vnode) {
+    super.oncreate(vnode);
+  }
+
+  view() {
+    return (
+      <div className="IndexPage">
+        {IndexPage.prototype.hero()}
+        <div className="container">
+          <div className="sideNavContainer">
+            <nav className="IndexPage-nav sideNav">
+              <ul>{listItems(this.sidebarItems().toArray())}</ul>
+            </nav>
+            <div className="IndexPage-results sideNavOffset">
+              <Poll />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  sidebarItems() {
+    return IndexPage.prototype.sidebarItems();
+  }
+
+  navItems() {
+    return IndexPage.prototype.navItems();
+  }
+}

js/src/forum/extend.js

@@ -3,6 +3,7 @@ import Post from 'flarum/common/models/Post';
 import Forum from 'flarum/common/models/Forum';
 import Discussion from 'flarum/common/models/Discussion';
 import Poll from './models/Poll';
+import PollsPage from './components/PollsPage';
 import PollOption from './models/PollOption';
 import PollVote from './models/PollVote';
 
@@ -14,4 +15,7 @@ export default [
   new Extend.Model(Forum).attribute('canStartPolls'),
 
   new Extend.Model(Discussion).attribute('hasPoll').attribute('canStartPoll'),
+
+  // new Extend.Routes().add('polls', '/polls', <PollsPage />),
+  // new Extend.Routes().add('polls', '/polls'),
 ];

js/src/forum/index.js

@@ -2,17 +2,27 @@ import app from 'flarum/forum/app';
 
 import addDiscussionBadge from './addDiscussionBadge';
 import addComposerItems from './addComposerItems';
+import addPollsLink from './addPollsLink';
 import addPollsToPost from './addPollsToPost';
 import addPostControls from './addPostControls';
 
 export * from './components';
 export * from './models';
 
+import PollsPage from './components/PollsPage';
+
 app.initializers.add('fof/polls', () => {
   addDiscussionBadge();
   addComposerItems();
+  addPollsLink();
   addPollsToPost();
   addPostControls();
+
+  // TMP
+  app.routes.polls = {
+    path: '/polls',
+    component: PollsPage,
+  };
 });
 
 export { default as extend } from './extend';

resources/less/forum.less

@@ -99,7 +99,8 @@
   }
 
   .Checkbox.disabled {
-    &, [disabled] {
+    &,
+    [disabled] {
       cursor: not-allowed;
     }
 
@@ -121,7 +122,8 @@
     align-items: start;
 
     .PollAnswer when (@fof-polls-options-color-blend = true) {
-      &-checkbox, &-text {
+      &-checkbox,
+      &-text {
         & when (@config-dark-mode =true) {
           mix-blend-mode: difference;
         }
@@ -169,7 +171,7 @@
     }
 
     &-voters {
-      .Button--color-auto('button-primary');
+      .Button--color-auto("button-primary");
     }
 
     .Button {
@@ -184,7 +186,8 @@
 }
 
 .PollOption {
-  &, .PollBar {
+  &,
+  .PollBar {
     border-radius: 4px;
   }
 
@@ -207,7 +210,7 @@
     font-size: 85%;
     font-weight: 600;
     display: inline-block;
-    padding: .1em .5em;
+    padding: 0.1em 0.5em;
     border-radius: 4px;
     background: transparent;
     color: var(--muted-color);
@@ -275,7 +278,7 @@
       );
       background-size: var(--poll-option-width) 100%;
       background-repeat: no-repeat;
-      content: '';
+      content: "";
     }
 
     .PollAnswer {
@@ -394,3 +397,74 @@
     background-size: var(--poll-option-width) 100%;
   }
 }
+
+.IndexPage-results.sideNavOffset {
+  display: flex;
+  flex-direction: column;
+}
+
+.IndexPage-toolbar {
+  order: 2;
+}
+
+.DiscussionList {
+  order: 3;
+}
+
+.Index-poll {
+  order: 1;
+  margin-bottom: 30px;
+}
+
+.aaa {
+  border-radius: 0.375rem;
+}
+
+.ba {
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+
+.bba {
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+.bbb {
+  display: flex;
+  position: relative;
+  padding: 1rem;
+  border-color: #d1d5db;
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  margin-top: -1px;
+}
+
+.ccc {
+  margin-top: 0.125rem;
+  flex-shrink: 0;
+  border-color: #d1d5db;
+  width: 1rem;
+  height: 1rem;
+  color: #4f46e5;
+  cursor: pointer;
+}
+
+.ddd {
+  display: flex;
+  margin-left: 0.75rem;
+  flex-direction: column;
+}
+
+.fff {
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+}
+
+.ggg {
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}