Added translation for custom group texts & layout improvemnets

rbjarnason · rbjarnason · commit 4873a17ceb8f · 2020-03-29T13:13:12.000Z
diff --git a/client_app/src/yp-domain/yp-domain.html b/client_app/src/yp-domain/yp-domain.html
@@ -343,7 +343,7 @@
         }
 
         if (!this.domain.only_admins_can_create_communities || this.checkDomainAccess(this.domain)) {
-          this.set('createFabIcon', 'group-work');
+          this.set('createFabIcon', 'add');
         }
 
         window.appGlobals.setupGoogleAnalytics(this.domain);
diff --git a/client_app/src/yp-group/yp-group.html b/client_app/src/yp-group/yp-group.html
@@ -75,8 +75,8 @@
         height: 72px;
         --paper-fab-iron-icon: {
           color: var(--icon-general-color, #FFF);
-          width: 72px;
-          height: 72px;
+          width: 50px;
+          height: 50px;
         }
       }
 
diff --git a/client_app/src/yp-magic-text/yp-magic-text.html b/client_app/src/yp-magic-text/yp-magic-text.html
@@ -226,6 +226,13 @@
             case 'communityContent':
               this.$.getTranslationAjax.url = "/api/communities/"+this.contentId+"/translatedText";
               break;
+            case 'alternativeTextForNewIdeaButton':
+            case 'alternativeTextForNewIdeaButtonClosed':
+            case 'alternativeTextForNewIdeaButtonHeader':
+            case 'alternativePointForHeader':
+            case 'alternativePointAgainstHeader':
+            case 'alternativePointForLabel':
+            case 'alternativePointAgainstLabel':
             case 'groupName':
             case 'groupContent':
               this.$.getTranslationAjax.url = "/api/groups/"+this.contentId+"/translatedText";
@@ -256,6 +263,7 @@
         } else {
           console.error("No content for magic text");
         }
+        this.dispatchEvent(new CustomEvent('new-translation', { bubbles: true, composed: true }));
         this._finalize();
       }
 
diff --git a/client_app/src/yp-page/yp-page.html b/client_app/src/yp-page/yp-page.html
@@ -63,8 +63,8 @@
         height: 72px;
         --paper-fab-iron-icon: {
           color: var(--icon-general-color, #FFF);
-          width: 72px;
-          height: 72px;
+          width: 60px;
+          height: 60px;
         }
       }
 
diff --git a/client_app/src/yp-post/yp-post-card-add.html b/client_app/src/yp-post/yp-post-card-add.html
@@ -143,15 +143,19 @@
               [[t('post.add_new')]]
             </template>
             <template is="dom-if" if="[[group.configuration.alternativeTextForNewIdeaButton]]">
-              [[group.configuration.alternativeTextForNewIdeaButton]]
+              <yp-magic-text content-id="[[group.id]]" extra-id="[[index]]" text-only content="[[group.configuration.alternativeTextForNewIdeaButton]]"
+                             content-language="[[group.language]]"
+                             class="ratingName" text-type="alternativeTextForNewIdeaButton"></yp-magic-text>
             </template>
           </div>
           <div class="flex addText closed" hidden$="[[!disabled]]">
             <template is="dom-if" if="[[!group.configuration.alternativeTextForNewIdeaButtonClosed]]">
               [[t('closedForNewPosts')]]
             </template>
             <template is="dom-if" if="[[group.configuration.alternativeTextForNewIdeaButtonClosed]]">
-              [[group.configuration.alternativeTextForNewIdeaButtonClosed]]
+              <yp-magic-text content-id="[[group.id]]" extra-id="[[index]]" text-only content="[[group.configuration.alternativeTextForNewIdeaButtonClosed]]"
+                             content-language="[[group.language]]"
+                             class="ratingName" text-type="alternativeTextForNewIdeaButtonClosed"></yp-magic-text>
             </template>
           </div>
         </div>
diff --git a/client_app/src/yp-post/yp-post-edit.html b/client_app/src/yp-post/yp-post-edit.html
@@ -383,6 +383,11 @@ <h3 class="accessHeader">[[t('post.cover.media')]]</h3>
         <input type="hidden" name="structuredAnswers" value="[[structuredAnswers]]">
       </div>
     </yp-edit-dialog>
+
+    <yp-magic-text id="alternativeTextForNewIdeaButtonHeaderId" hidden content-id="[[group.id]]" text-only content="[[group.configuration.alternativeTextForNewIdeaButtonHeader]]"
+                   content-language="[[group.language]]" on-new-translation="_alternativeTextForNewIdeaButtonHeaderTranslation"
+                   text-type="alternativeTextForNewIdeaButtonHeader"></yp-magic-text>
+
   </template>
 
 </dom-module>
@@ -944,12 +949,23 @@ <h3 class="accessHeader">[[t('post.cover.media')]]</h3>
       }.bind(this), 250);
     },
 
+    _alternativeTextForNewIdeaButtonHeaderTranslation: function () {
+      this.async(function () {
+        var label = this.$$("#alternativeTextForNewIdeaButtonHeaderId");
+        debugger;
+        if (label && label.finalContent) {
+          this.set('editHeaderText', label.finalContent);
+        }
+      });
+    },
+
     _setupTranslation: function () {
       this.async(function () {
         if (this.t) {
           if (this.newPost) {
             if (this.group && this.group.configuration && this.group.configuration.alternativeTextForNewIdeaButtonHeader) {
-              this.editHeaderText = this.group.configuration.alternativeTextForNewIdeaButtonHeader;
+              var label = this.$$("#alternativeTextForNewIdeaButtonHeaderId");
+              this.editHeaderText = (label && label.finalContent) ? label.finalContent : this.group.configuration.alternativeTextForNewIdeaButtonHeader;
             } else {
               this.editHeaderText = this.t('post.new');
             }
diff --git a/client_app/src/yp-post/yp-post-points.html b/client_app/src/yp-post/yp-post-points.html
@@ -295,7 +295,11 @@
 
             <template is="dom-if" if="[[post.Group.configuration.alternativePointForHeader]]">
               <div class="pointMainHeader layout horizontal center-center">
-                [[post.Group.configuration.alternativePointForHeader]]
+
+                <yp-magic-text content-id="[[post.Group.id]]" text-only content="[[post.Group.configuration.alternativePointForHeader]]"
+                               content-language="[[post.Group.language]]"
+                               class="ratingName" text-type="alternativePointForHeader"></yp-magic-text>
+
               </div>
             </template>
 
@@ -392,10 +396,23 @@
 
             <template is="dom-if" if="[[post.Group.configuration.alternativePointAgainstHeader]]">
               <div class="pointMainHeader layout horizontal center-center">
-                [[post.Group.configuration.alternativePointAgainstHeader]]
+                <yp-magic-text content-id="[[post.Group.id]]" text-only content="[[post.Group.configuration.alternativePointAgainstHeader]]"
+                               content-language="[[post.Group.language]]"
+                               class="ratingName" text-type="alternativePointAgainstHeader"></yp-magic-text>
               </div>
             </template>
 
+            <template is="dom-if" if="[[post.Group.configuration.alternativePointForLabel]]">
+                <yp-magic-text id="alternativePointForLabelId" hidden content-id="[[post.Group.id]]" text-only content="[[post.Group.configuration.alternativePointForLabel]]"
+                               content-language="[[post.Group.language]]" on-new-translation="_updatePointLabels"
+                               text-type="alternativePointForLabel"></yp-magic-text>
+            </template>
+
+            <template is="dom-if" if="[[post.Group.configuration.alternativePointAgainstLabel]]">
+              <yp-magic-text id="alternativePointAgainstLabelId" hidden content-id="[[post.Group.id]]" text-only content="[[post.Group.configuration.alternativePointAgainstLabel]]"
+                             content-language="[[post.Group.language]]" on-new-translation="_updatePointLabels"
+                             text-type="alternativePointAgainstLabel"></yp-magic-text>
+            </template>
 
             <paper-material id="pointDownMaterial" elevation="1" class="pointInputMaterial layout vertical"
                             animated hidden$="[[disableDebate]]">
@@ -1180,6 +1197,10 @@
               this.set('labelDown', this.t('point.against'));
             }
           }
+
+          this.async(function () {
+            this._updatePointLabels();
+          });
         },
 
         removeElementsByClass: function (rootElement, className) {
@@ -1189,6 +1210,19 @@
           }
         },
 
+        _updatePointLabels: function () {
+          this.async(function () {
+            var forLabel = this.$$("#alternativePointForLabelId");
+            var againstLabel = this.$$("#alternativePointAgainstLabelId");
+            if (forLabel && forLabel.finalContent) {
+              this.set('labelUp', forLabel.finalContent);
+            }
+            if (againstLabel && againstLabel.finalContent) {
+              this.set('labelDown', againstLabel.finalContent);
+            }
+          });
+        },
+
         _processStoredPoints: function () {
           console.info("_processStoredPoints");
           if (this.upPoints===null) {
diff --git a/client_app/src/yp-post/yp-post.html b/client_app/src/yp-post/yp-post.html
@@ -126,8 +126,8 @@
         height: 72px;
         --paper-fab-iron-icon: {
           color: var(--icon-general-color, #FFF);
-          width: 72px;
-          height: 72px;
+          width: 50px;
+          height: 50px;
         }
       }
 
diff --git a/server_api/active-citizen b/server_api/active-citizen
@@ -1 +1 @@
-Subproject commit d995b99b31eb4b60c83f3b23e55c7943c909edfc
+Subproject commit d80f185615339e889fbb23ada6f82d202c0fd664
diff --git a/server_api/controllers/groups.js b/server_api/controllers/groups.js
@@ -179,6 +179,7 @@ var updateGroupConfigParamters = function (req, group) {
 
   group.set('configuration.alternativePointForLabel', (req.body.alternativePointForLabel && req.body.alternativePointForLabel!="") ? req.body.alternativePointForLabel : null);
   group.set('configuration.alternativePointAgainstLabel', (req.body.alternativePointAgainstLabel && req.body.alternativePointAgainstLabel!="") ? req.body.alternativePointAgainstLabel : null);
+
   group.set('configuration.disableFacebookLoginForGroup', truthValueFromBody(req.body.disableFacebookLoginForGroup));
   group.set('configuration.disableNameAutoTranslation', truthValueFromBody(req.body.disableNameAutoTranslation));
   group.set('configuration.externalGoalTriggerUrl', (req.body.externalGoalTriggerUrl && req.body.externalGoalTriggerUrl!="") ? req.body.externalGoalTriggerUrl : null);
@@ -1075,13 +1076,23 @@ router.get('/:id', auth.can('view group'), function(req, res) {
   });
 });
 
+const allowedTextTypesForGroup = [
+  "alternativeTextForNewIdeaButton",
+  "alternativeTextForNewIdeaButtonClosed",
+  "alternativeTextForNewIdeaButtonHeader",
+  "alternativePointForHeader",
+  "alternativePointAgainstHeader",
+  "alternativePointForLabel",
+  "alternativePointAgainstLabel"
+];
+
 router.get('/:id/translatedText', auth.can('view group'), function(req, res) {
-  if (req.query.textType.indexOf("group") > -1) {
+  if (req.query.textType.indexOf("group") > -1 || allowedTextTypesForGroup.indexOf(req.query.textType) > -1) {
     models.Group.findOne({
       where: {
         id: req.params.id
       },
-      attributes: ['id','name','objectives']
+      attributes: ['id','name','objectives','configuration']
     }).then(function(group) {
       if (group) {
         models.AcTranslationCache.getTranslation(req, group, function (error, translation) {

Original file line number	Diff line number	Diff line change
`@@ -343,7 +343,7 @@`
`343`	`343`	`}`
`344`	`344`
`345`	`345`	`if (!this.domain.only_admins_can_create_communities \|\| this.checkDomainAccess(this.domain)) {`
`346`		`- this.set('createFabIcon', 'group-work');`
	`346`	`+ this.set('createFabIcon', 'add');`
`347`	`347`	`}`
`348`	`348`
`349`	`349`	`window.appGlobals.setupGoogleAnalytics(this.domain);`
Original file line number	Diff line number	Diff line change
`@@ -75,8 +75,8 @@`
`75`	`75`	`height: 72px;`
`76`	`76`	`--paper-fab-iron-icon: {`
`77`	`77`	`color: var(--icon-general-color, #FFF);`
`78`		`- width: 72px;`
`79`		`- height: 72px;`
	`78`	`+ width: 50px;`
	`79`	`+ height: 50px;`
`80`	`80`	`}`
`81`	`81`	`}`
`82`	`82`
Original file line number	Diff line number	Diff line change
`@@ -63,8 +63,8 @@`
`63`	`63`	`height: 72px;`
`64`	`64`	`--paper-fab-iron-icon: {`
`65`	`65`	`color: var(--icon-general-color, #FFF);`
`66`		`- width: 72px;`
`67`		`- height: 72px;`
	`66`	`+ width: 60px;`
	`67`	`+ height: 60px;`
`68`	`68`	`}`
`69`	`69`	`}`
`70`	`70`
Original file line number	Diff line number	Diff line change
`@@ -126,8 +126,8 @@`
`126`	`126`	`height: 72px;`
`127`	`127`	`--paper-fab-iron-icon: {`
`128`	`128`	`color: var(--icon-general-color, #FFF);`
`129`		`- width: 72px;`
`130`		`- height: 72px;`
	`129`	`+ width: 50px;`
	`130`	`+ height: 50px;`
`131`	`131`	`}`
`132`	`132`	`}`
`133`	`133`