Merge remote-tracking branch 'origin/gg/form-ui' into sh/form-ui

FriendsOfFlarum · Feb 19, 2024 · ab91275 · ab91275
2 parents f0b9f88 + f5c34f3
commit ab91275
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 38 deletions.
diff --git a/js/src/forum/components/ComposePollHero.tsx b/js/src/forum/components/ComposePollHero.tsx
@@ -19,7 +19,7 @@ export default class ComposePollHero extends Component {
             <div className="IndexPageHero-controls">
               <LinkButton
                 icon="far fa-edit"
-                className="Button Button--primary IndexPage-newDiscussion GoodiesManagerLink"
+                className="Button Button--secondary IndexPage-newDiscussion GoodiesManagerLink"
                 itemClassName="App-primaryControl"
                 href={app.route('fof_polls_list')}
               >
@@ -28,7 +28,7 @@ export default class ComposePollHero extends Component {
               {poll.exists && (
                 <LinkButton
                   icon="far fa-arrow-up-right-from-square"
-                  className="Button Button--primary IndexPage-newDiscussion GoodiePreviewLink"
+                  className="Button Button--secondary IndexPage-newDiscussion GoodiePreviewLink"
                   itemClassName="App-primaryControl"
                   href={app.route('fof_polls_list', { id: poll.id() })}
                   external={true}

diff --git a/js/src/forum/components/Poll.tsx b/js/src/forum/components/Poll.tsx
@@ -83,7 +83,7 @@ export default class Poll extends Component<PollAttrs, PollState> {
       !!controls.length && (
         <Dropdown
           icon="fas fa-ellipsis-v"
-          className="UserCard-controls App-primaryControl PollListItem-controls"
+          className="PollListItem-controls"
           menuClassName="Dropdown-menu--right"
           buttonClassName="Button Button--icon Button--flat"
           accessibleToggleLabel={t('fof-polls.forum.poll_controls.toggle_dropdown_accessible_label')}

diff --git a/js/src/forum/components/Poll/PollList.js b/js/src/forum/components/Poll/PollList.js
@@ -42,8 +42,8 @@ export default class PollList extends Component {
     const pageSize = state.pageSize;
 
     return (
-      <div className={classList('PollList UserDirectoryList', { 'PollList--searchResults': state.isSearchResults() })}>
-        <ul aria-busy={isLoading} className="PollList-polls UserDirectoryList-users">
+      <div className={classList('PollList', { 'PollList--searchResults': state.isSearchResults() })}>
+        <ul aria-busy={isLoading} className="PollList-polls">
           {state.getPages().map((pg) => {
             return pg.items.map((poll) => (
               <li key={poll.id()} data-id={poll.id()}>

diff --git a/js/src/forum/components/Poll/PollListItem.tsx b/js/src/forum/components/Poll/PollListItem.tsx
@@ -54,7 +54,7 @@ export default class PollListItem<CustomAttrs extends IPollListItemAttrs = IPoll
 
   elementAttrs() {
     return {
-      className: classList('PollListItem User', {
+      className: classList('PollListItem', {
         active: this.active(),
         'PollListItem--hidden': this.attrs.poll.isHidden(),
         Slidable: 'ontouchstart' in window,
@@ -82,7 +82,7 @@ export default class PollListItem<CustomAttrs extends IPollListItemAttrs = IPoll
       !!controls.length && (
         <Dropdown
           icon="fas fa-ellipsis-v"
-          className="UserCard-controls App-primaryControl PollListItem-controls"
+          className="UserCard-controls PollListItem-controls"
           menuClassName="Dropdown-menu--right"
           buttonClassName="Button Button--icon Button--flat"
           accessibleToggleLabel={t('fof-polls.forum.poll_controls.toggle_dropdown_accessible_label')}

diff --git a/js/src/forum/components/Poll/PollResult.tsx b/js/src/forum/components/Poll/PollResult.tsx
@@ -10,12 +10,12 @@ export default class PollResults extends Component {
       <label className="PollResult">
         <PollOptionInput id={1} isResult={true} name="privacy-setting" value="Private to Project Members Nice" />
         <span className="PollResult-information">
-          <div className="PollResults-row">
+          <div className="PollResult-row">
             <PollOptionLabel text="Poll Option Label" />
             <PollResultsNumber number={64} />
           </div>
 
-          <input type="range" min="0" max="100" value="64" step="1" className="PollResult-input" />
+          <progress type="range" min="0" max="100" value="64" className="PollResult-bar" />
         </span>
       </label>
     );

diff --git a/js/src/forum/components/PollForm.js b/js/src/forum/components/PollForm.js
@@ -81,7 +81,7 @@ export default class PollForm extends Component {
           <span>{app.translator.trans('fof-polls.forum.modal.options_label')}</span>
 
           {Button.component({
-            className: 'Button PollModal--button small',
+            className: 'Button PollModal--button Button--icon small',
             icon: 'fas fa-plus',
             onclick: this.addOption.bind(this),
           })}
@@ -107,7 +107,7 @@ export default class PollForm extends Component {
             max={this.formatDate('2038')}
           />
           {Button.component({
-            className: 'Button PollModal--button',
+            className: 'Button PollModal--button Button--icon',
             icon: 'fas fa-times',
             onclick: this.endDate.bind(this, null),
           })}
@@ -230,7 +230,7 @@ export default class PollForm extends Component {
         {i >= 2
           ? Button.component({
               type: 'button',
-              className: 'Button Button--warning PollModal--button',
+              className: 'Button PollModal--button Button--icon',
               icon: 'fas fa-minus',
               onclick: i >= 2 ? this.removeOption.bind(this, i) : '',
             })

diff --git a/js/src/forum/components/PollsPage.tsx b/js/src/forum/components/PollsPage.tsx
@@ -100,7 +100,7 @@ export default class PollsPage extends Page<IPageAttrs, PollListState> {
       'newGlobalPoll',
       <Button
         icon="fas fa-edit"
-        className="Button Button--primary IndexPage-newDiscussion"
+        className="Button Button--primary App-primaryControl PollsPage-newPoll"
         itemClassName="App-primaryControl"
         onclick={() => {
           this.newPollAction();

diff --git a/js/src/forum/extend.js b/js/src/forum/extend.js
diff --git a/js/src/forum/index.ts b/js/src/forum/index.ts
@@ -9,8 +9,6 @@ import addNavItem from './addNavItem';
 export * from './components';
 export * from './models';
 
-import PollsPage from './components/PollsPage';
-
 app.initializers.add('fof/polls', () => {
   addDiscussionBadge();
   addComposerItems();

diff --git a/js/src/forum/utils/PollControls.tsx b/js/src/forum/utils/PollControls.tsx
@@ -36,7 +36,7 @@ export default {
   },
 
   /**
-   * Get controls for direkt modifcation actions on polls (e.g. vote, view voters).
+   * Get controls for direct modifcation actions on polls (e.g. vote, view voters).
    */
   pollControls(poll: Poll, context: Component): ItemList<Mithril.Children> {
     const items = new ItemList<Mithril.Children>();

diff --git a/resources/less/forum.less b/resources/less/forum.less
@@ -478,7 +478,7 @@
   flex-direction: column;
 }
 
-.PollResults-row {
+.PollResult-row {
   display: flex;
   flex-grow: 1;
   justify-content: space-between;
@@ -510,3 +510,13 @@
   border-color: var(--poll-option-active-color);
   background: var(--control-bg-shaded);
 }
+
+.PollList .PollList-polls {
+  list-style: none;
+  padding: 0;
+  clear: both;
+}
+
+.PollListItem-controls {
+  float: right;
+}
diff --git a/resources/locale/en.yml b/resources/locale/en.yml
@@ -28,6 +28,13 @@ fof-polls:
       start_poll_button: Start Global Poll
       cannot_start_poll_button: Cannot Start Poll
 
+    poll_controls:
+      edit_label: Edit
+      delete_label: Delete
+
+    poll_form:
+      delete: Delete Poll
+
     polls_list:
       empty_text: It looks as though there are no community wide polls here.
       load_more_button: Load More
@@ -39,6 +46,7 @@ fof-polls:
 
     compose:
       add_title: Add a Poll
+      edit_title: Edit Poll
       polls_manager: Polls Manager
       polls_preview: View Poll