cypress/integration/blogs.spec.js

@@ -98,8 +98,19 @@ context('Blogs', () => {
     );
 
     if (nsfw) {
-      cy.get('.m-mature-info a').click();
-      cy.get('.m-mature-info a span').contains('Mature content');
+        // click on nsfw dropdown
+        cy.get(
+          'm-nsfw-selector .m-dropdown--label-container'
+        ).click();
+
+        // select Nudity
+        cy.get('m-nsfw-selector .m-dropdownList__item')
+          .contains('Nudity')
+          .click();
+
+        // click away
+        cy.get('m-nsfw-selector .minds-bg-overlay').click({force: true});
+
     }
 
     if (schedule) {

src/app/common/components/nsfw-selector/nsfw-selector.component.html

-<m-dropdown class="m-nsfwSelector__dropdown" [expanded]="expanded" #dropdown>
+<m-dropdown
+  class="m-nsfwSelector__dropdown"
+  [expanded]="expanded"
+  #dropdown
+  data-cy="data-minds-nsfw-selector"
+>
   <label
     class="m-nsfwSelector__label m-posterActionBar__IconAndLabel"
     [class.selected]="hasSelections()"

src/app/common/components/nsfw-selector/nsfw-selector.service.ts

@@ -44,6 +44,10 @@ export class NSFWSelectorCreatorService extends NSFWSelectorService {
 export class NSFWSelectorConsumerService extends NSFWSelectorService {
   cacheKey: string = 'consumer';
 }
+
+/**
+ * Editing service, overrides build to allow pre-setting of values.
+ */
 export class NSFWSelectorEditingService extends NSFWSelectorService {
   cacheKey: string = 'editing';
 

src/app/modules/blogs/edit/edit.html

@@ -154,23 +154,14 @@
         <option *ngFor="let a of access" [value]="a.value">{{a.text}}</option>
       </select>
     </div>
-    <div class="m-mature-info">
-      <a
-        class="mdl-color-text--blue-grey-300 m-capture-mature"
-        (click)="blog.mature = blog.mature ? 0 : 1; checkMonetized()"
-      >
-        <i
-          class="material-icons"
-          [ngClass]="{ 'mdl-color-text--red-500': blog.mature }"
-          title="Mature content"
-          i18n-title="@@M__COMMON__MATURE_CONTENT"
-          >explicit</i
-        >
-        <span [ngClass]="{ 'mdl-color-text--red-500': blog.mature }"
-          >{{ blog.mature ? 'Mature content' : 'Anyone' }}</span
-        >
-      </a>
-    </div>
+
+    <m-nsfw-selector
+      service="editing"
+      (selectedChange)="onNSFWSelections($event)"
+      [selected]="editing && blog.nsfw != [] ? blog.nsfw : []"
+    >
+    </m-nsfw-selector>
+
     <m-wire-threshold-input
       [(threshold)]="blog.wire_threshold"
       [(enabled)]="blog.paywall"

src/app/modules/blogs/edit/edit.spec.ts

@@ -245,6 +245,11 @@ describe('BlogEdit', () => {
           inputs: ['date', 'dateFormat'],
           outputs: ['dateChange'],
         }),
+        MockComponent({
+          selector: 'm-nsfw-selector',
+          outputs: ['selectedChanged'],
+          inputs: ['selected'],
+        }),
         MockDirective({
           selector: '[mIfFeature]',
           inputs: ['mIfFeature'],

src/app/modules/blogs/edit/edit.ts

@@ -33,6 +33,7 @@ export class BlogEdit {
     time_created: Math.floor(Date.now() / 1000),
     access_id: 2,
     tags: [],
+    nsfw: [],
     license: 'attribution-sharealike-cc',
     fileKey: 'header',
     mature: 0,
@@ -123,6 +124,7 @@ export class BlogEdit {
           license: '',
           fileKey: 'header',
           mature: 0,
+          nsfw: [],
           monetized: 0,
           published: 0,
           wire_threshold: null,
@@ -143,8 +145,10 @@ export class BlogEdit {
         this.existingBanner = false;
 
         if (this.guid !== 'new') {
+          this.editing = true;
           this.load();
         } else {
+          this.editing = false;
           const description: string = this.inMemoryStorageService.once(
             'newBlogContent'
           );
@@ -254,6 +258,7 @@ export class BlogEdit {
       const blog = Object.assign({}, this.blog);
 
       // only allowed props
+      blog.nsfw = this.blog.nsfw;
       blog.mature = blog.mature ? 1 : 0;
       blog.monetization = blog.monetization ? 1 : 0;
       blog.monetized = blog.monetized ? 1 : 0;
@@ -358,4 +363,12 @@ export class BlogEdit {
       this.blog.time_published > Math.floor(Date.now() / 1000)
     );
   }
+
+  /**
+   * Sets this blog NSFW
+   * @param { array } nsfw - Numerical indexes for reasons in an array e.g. [1, 2].
+   */
+  onNSFWSelections(nsfw) {
+    this.blog.nsfw = nsfw.map(reason => reason.value);
+  }
 }

src/app/modules/media/edit/edit.component.html

@@ -71,30 +71,11 @@
         <option *ngFor="let a of access" [value]="a.value">{{ a.text }}</option>
       </select>
     </div>
-    <div class="m-mature-info">
-      <a
-        class="mdl-color-text--blue-grey-300 m-capture-mature"
-        (click)="entity.mature = entity.mature ? 0 : 1"
-      >
-        <i
-          class="material-icons"
-          [ngClass]="{ 'mdl-color-text--red-500': entity.mature }"
-          title="Mature content"
-          i18n-title="@@M__COMMON__MATURE_CONTENT"
-          >explicit</i
-        >
-
-        <span [ngClass]="{ 'mdl-color-text--red-500': entity.mature }">
-          <ng-container *ngIf="entity.mature" i18n="@@M__COMMON__MATURE_CONTENT"
-            >Mature Content</ng-container
-          >
-          <ng-container
-            *ngIf="!entity.mature"
-            i18n="@@MINDS__MEDIA__ANYONE_LABEL"
-            >Anyone</ng-container
-          >
-        </span>
-      </a>
-    </div>
+    <m-nsfw-selector
+      service="editing"
+      (selectedChange)="onNSFWSelections($event)"
+      [selected]="entity.nsfw"
+    >
+    </m-nsfw-selector>
   </div>
 </form>

src/app/modules/media/edit/edit.component.ts

@@ -30,7 +30,7 @@ export class MediaEditComponent {
     description: '',
     subtype: '',
     license: 'all-rights-reserved',
-    mature: false,
+    nsfw: [],
   };
   inProgress: boolean;
   error: string;
@@ -82,6 +82,7 @@ export class MediaEditComponent {
           response.entity.mature =
             response.entity.flags && response.entity.flags.mature ? 1 : 0;
 
+          this.entity.nsfw = response.entity.nsfw;
           this.entity = response.entity;
         }
       });
@@ -106,4 +107,12 @@ export class MediaEditComponent {
     this.entity.file = file.source;
     this.entity.thumbnail = file.seconds;
   }
+
+  /**
+   * Sets this blog NSFW.
+   * @param { array } nsfw - Numerical indexes for reasons in an array e.g. [1, 2].
+   */
+  onNSFWSelections(nsfw) {
+    this.entity.nsfw = nsfw.map(reason => reason.value);
+  }
 }