incorporate changes from https://github.com/chena11356/polis/tree/imp…

…lement-comment-prioritization-checkbox credit to https://github.com/chena11356 addresses #217
compdemocracy · May 12, 2023 · e1fcb8e · e1fcb8e
1 parent 15dcbf7
commit e1fcb8e
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 11 deletions.
diff --git a/client-admin/src/components/conversation-admin/conversation-config.js b/client-admin/src/components/conversation-admin/conversation-config.js
@@ -144,6 +144,10 @@ class ConversationConfig extends React.Component {
           Customize the user interface
         </Heading>
 
+        <CheckboxField field="priority_type" label="Weight">
+          [EXPERIMENTAL FEATURE] Participants can see the &quotThis comment is important&quot checkbox
+        </CheckboxField>
+
         <CheckboxField field="vis_type" label="Visualization" isIntegerBool>
           Participants can see the visualization
         </CheckboxField>

diff --git a/client-participation/js/main.js b/client-participation/js/main.js
@@ -48,6 +48,7 @@ var IconFaAngleRight = require("./templates/icon_fa_angle_right.handlebars");
 var IconFaAsterisk = require("./templates/icon_fa_asterisk.handlebars");
 var IconFaBan = require("./templates/icon_fa_ban.handlebars");
 var IconFaCircleCheckPartial = require("./templates/icon_fa_check_circle.handlebars");
+var IconFaCircleQuestion = require("./templates/icon_fa_question_circle.handlebars");
 var iconFaFacebookSquare16 = require("./templates/icon_fa_facebook_square_16.handlebars");
 var iconFaFacebookSquare25 = require("./templates/icon_fa_facebook_square_25.handlebars");
 var IconFaLightBulb = require("./templates/icon_fa_lightbulb_o.handlebars");
@@ -320,6 +321,7 @@ Handlebars.registerPartial("linkTos", LinkTosPartial);
 Handlebars.registerPartial("linkPrivacy", LinkPrivacyPartial);
 Handlebars.registerPartial("linkAddPolis", LinkAddPolisPartial);
 Handlebars.registerPartial("iconFaCircleCheck", IconFaCircleCheckPartial);
+Handlebars.registerPartial("iconFaCircleQuestion", IconFaCircleQuestion);
 Handlebars.registerPartial("iconFaBan", IconFaBan);
 Handlebars.registerPartial("iconFaLightBulb", IconFaLightBulb);
 Handlebars.registerPartial("iconFaAsterisk", IconFaAsterisk);

diff --git a/client-participation/js/strings/en_us.js b/client-participation/js/strings/en_us.js
@@ -7,6 +7,8 @@ s.disagree = "Disagree";
 s.pass = "Pass / Unsure";
 
 s.importantCheckbox = "This comment is important";
+s.importantCheckboxDesc =
+  "Check this box if you believe this comment is especially important or relevant to the conversation, whether you agree with it, disagree with it, or are unsure about it.";
 s.howImportantPrompt = "How important is this statement?";
 s.howImportantLow = "Low";
 s.howImportantMedium = "Medium";

diff --git a/client-participation/js/templates/icon_fa_question_circle.handlebars b/client-participation/js/templates/icon_fa_question_circle.handlebars
@@ -0,0 +1,10 @@
+{{! Copyright (C) 2012-present, The Authors. This program is free software: you can redistribute it and/or  modify it under the terms of the GNU Affero General Public License, version 3, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>. }}
+
+<svg
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+  height="17px"
+  width="17px"
+><path
+    d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM256 336c-18 0-32 14-32 32s13.1 32 32 32c17.1 0 32-14 32-32S273.1 336 256 336zM289.1 128h-51.1C199 128 168 159 168 198c0 13 11 24 24 24s24-11 24-24C216 186 225.1 176 237.1 176h51.1C301.1 176 312 186 312 198c0 8-4 14.1-11 18.1L244 251C236 256 232 264 232 272V288c0 13 11 24 24 24S280 301 280 288V286l45.1-28c21-13 34-36 34-60C360 159 329 128 289.1 128z"
+  ></path></svg>
diff --git a/client-participation/js/templates/vote-view.handlebars b/client-participation/js/templates/vote-view.handlebars
@@ -330,9 +330,23 @@
     <div style="text-align: center; margin-bottom: 20px">
       <label class="weight-label">
         <span class="weight-radio"></span>
-        <input type="checkbox" name="checkbox" id="weight_high">
+        <input type="checkbox" name="checkbox" id="weight_high" aria-describedby="importantCheckboxDesc">
         {{s.importantCheckbox}}
+        <span id="importantCheckboxDesc" class="is-visually-hidden">
+          {{s.importantCheckboxDesc}}
+        </span>
       </label>
+      <i class="svgIcon" style="
+        display: inline-block;
+        position: relative;
+        top: 2px;
+        width: 17px;
+        fill: #8a8a8a;
+        "
+        data-text="{{s.importantCheckboxDesc}}"
+        onclick="alert(this.dataset.text)"
+        aria-hidden="true"
+        >{{> iconFaCircleQuestion}}</i>
     </div>
     {{/if}}
 

diff --git a/client-participation/js/views/vote-view.js b/client-participation/js/views/vote-view.js
@@ -111,6 +111,7 @@ module.exports = Handlebones.ModelView.extend({
       }
 
     }
+    ctx.showImportantCheckbox = preload.conversation.priority_type; // TODO: set up feature flagging
     ctx.social = socialCtx;
     ctx.noModSet = !ctx.spamOn && !ctx.otOn && !ctx.importantOn;
     ctx.canSubscribe = !!preload.firstPtpt || this.votesByMe.size() > 0;
@@ -484,13 +485,13 @@ module.exports = Handlebones.ModelView.extend({
       });
       return false;
     };
-    this.getWeight = function() {
-      if ($("#weight_low").prop("checked")) {
-        return -1;
-      } else if ($("#weight_high").prop("checked")) {
-        return 1;
+
+    // note: instead of -1/1/0, weight is now the boolean high_priority
+    this.highPriority = function () {
+      if ($("#weight_high").prop("checked")) {
+        return true;
       }
-      return 0;
+      return false;
     };
     this.participantAgreed = function(e) {
       this.mostRecentVoteType = "agree";
@@ -502,7 +503,7 @@ module.exports = Handlebones.ModelView.extend({
       this.wipVote = {
         vote: -1,
         conversation_id: conversation_id,
-        weight: this.getWeight(),
+        high_priority: this.highPriority(),
         tid: tid
       };
       serverClient.addToVotesByMe(this.wipVote);
@@ -517,7 +518,7 @@ module.exports = Handlebones.ModelView.extend({
       this.wipVote = {
         vote: 1,
         conversation_id: conversation_id,
-        weight: this.getWeight(),
+        high_priority: this.highPriority(),
         tid: tid
       };
       serverClient.addToVotesByMe(this.wipVote);
@@ -532,7 +533,7 @@ module.exports = Handlebones.ModelView.extend({
       this.wipVote = {
         vote: 0,
         conversation_id: conversation_id,
-        weight: this.getWeight(),
+        high_priority: this.highPriority(), // TODO: specify in help text that this is for "important but unsure"
         tid: tid
       };
       serverClient.addToVotesByMe(this.wipVote);

diff --git a/server/app.ts b/server/app.ts
@@ -1004,6 +1004,7 @@ helpersInitialized.then(
       want("strict_moderation", getBool, assignToP),
       want("topic", getOptionalStringLimitLength(1000), assignToP),
       want("description", getOptionalStringLimitLength(50000), assignToP),
+      want("priority_type", getBool, assignToP),
       want("vis_type", getInt, assignToP),
       want("help_type", getInt, assignToP),
       want("write_type", getInt, assignToP),

diff --git a/server/postgres/migrations/000007_add_comment_priority.sql b/server/postgres/migrations/000007_add_comment_priority.sql
@@ -0,0 +1,7 @@
+ALTER TABLE conversations
+  ADD priority_type BOOLEAN NOT NULL
+    DEFAULT (false);
+
+ALTER TABLE votes 
+  ADD high_priority BOOLEAN NOT NULL 
+    DEFAULT (false);
diff --git a/server/src/d.ts b/server/src/d.ts
@@ -140,6 +140,7 @@ export type ConversationType = {
   help_bgcolor?: any;
   style_btn?: any;
   write_type?: any;
+  priority_type?: any;
   owner_sees_participation_stats?: any;
   link_url?: any;
   course_invite?: any;

diff --git a/server/src/db/sql.ts b/server/src/db/sql.ts
@@ -27,6 +27,7 @@ const sql_conversations: any = sql.define({
     "parent_url",
     "vis_type",
     "write_type",
+    "priority_type",
     "help_type",
     "socialbtn_type",
     "subscribe_type",
@@ -74,7 +75,7 @@ const sql_comments = sql.define({
 
 const sql_votes_latest_unique = sql.define({
   name: "votes_latest_unique",
-  columns: ["zid", "tid", "pid", "modified", "vote"],
+  columns: ["zid", "tid", "pid", "modified", "vote", "weight"],
 });
 
 const sql_participant_metadata_answers = sql.define({

diff --git a/server/src/server.ts b/server/src/server.ts
@@ -8546,6 +8546,7 @@ Email verified! You can close this tab or hit the back button.
         help_bgcolor: string;
         style_btn: any;
         write_type: any;
+        priority_type: any;
         owner_sees_participation_stats: any;
         launch_presentation_return_url_hex: any;
         link_url: any;
@@ -8637,6 +8638,9 @@ Email verified! You can close this tab or hit the back button.
         if (!_.isUndefined(req.p.write_type)) {
           fields.write_type = req.p.write_type;
         }
+        if (!_.isUndefined(req.p.priority_type)) {
+          fields.priority_type = req.p.priority_type;
+        }
         ifDefinedSet("auth_needed_to_vote", req.p, fields);
         ifDefinedSet("auth_needed_to_write", req.p, fields);
         ifDefinedSet("auth_opt_fb", req.p, fields);
@@ -13058,6 +13062,7 @@ Thanks for using Polis!
           parent_url: conv.parent_url,
           vis_type: conv.vis_type,
           write_type: conv.write_type,
+          priority_type: conv.priority_type,
           help_type: conv.help_type,
           socialbtn_type: conv.socialbtn_type,
           bgcolor: conv.bgcolor,