(wip): Referrals console - added temporary SMS protocol testing buttons

src/app/common/components/infinite-scroll/infinite-scroll.scss

@@ -16,7 +16,7 @@ infinite-scroll{
  }
 
  .m-infinite-scroll-manual__noMore{
- cursor: default;
+ cursor: text;
  
  @include m-theme(){
  color: themed($m-blue-grey-300) !important;

src/app/modules/settings/emails/emails.component.html

@@ -22,7 +22,7 @@
 </div>
 
 <div class="m-settings--section m-settings--emails--when-campaign m-border" *ngIf="!loading">
- <h4 i18n="@@SETTINGS__EMAIL__EMAIL_ADDRESS_TITLE">E-Mail address</h4>
+ <h4 i18n="@@SETTINGS__EMAIL__EMAIL_ADDRESS_TITLE">Email address</h4>
 
  <ul class="m-settings--emails-campaigns">
  <li class="m-settings--emails-campaigns--campaign">

src/app/modules/wallet/tokens/referrals/dashboard/dashboard.component.html

@@ -62,7 +62,7 @@
  <div *ngIf="showNotice" class="m-referrals-dashboard__row m-referrals-dashboard__footer m-referrals-dashboard__notice">
  <div class="m-referrals-dashboard__cell" i18n="@@M_REFERRALS_DASHBOARD__NOTICE">You don't have any referrals yet.</div>
  </div>
- <div class="m-referrals-dashboard__row m-referrals-dashboard__footer">
+ <div *ngIf="!fewerResultsThanLimit" class="m-referrals-dashboard__row m-referrals-dashboard__footer">
  <div class="m-referrals-dashboard__cell">
  <infinite-scroll distance="25%" (load)="load()" [moreData]="moreData" [inProgress]="inProgress">
  </infinite-scroll>

src/app/modules/wallet/tokens/referrals/dashboard/dashboard.component.scss

@@ -14,7 +14,6 @@
 
  .m-referrals-dashboard__flexTable {
  width: 100%;
- padding-bottom: $minds-padding * 2;
  }
 
  m-tooltip i {
@@ -123,6 +122,15 @@
  color: themed($m-blue);
  }
 
+ &:focus {
+ outline: 0;
+ }
+ &:active {
+ @include m-theme() {
+ border-color: themed($m-blue-light);
+ color: themed($m-blue-light);
+ }
+ }
  span {
  padding-left: 0;
  }
@@ -133,6 +141,7 @@
  .m-referrals-dashboard__footer {
  justify-content: center;
  margin-top: $minds-padding;
+ padding-bottom: $minds-padding * 2;
  
  &.m-referrals-dashboard__notice {
  @include m-theme() {

src/app/modules/wallet/tokens/referrals/dashboard/dashboard.component.ts

@@ -14,6 +14,8 @@ export class ReferralsDashboardComponent implements OnInit {
  moreData: boolean = true;
  inProgress: boolean = false;
  showNotice: boolean = false;
+ limit = 24;
+ fewerResultsThanLimit: boolean = false;
 
  constructor(public client: Client) {
  }
@@ -44,6 +46,10 @@ export class ReferralsDashboardComponent implements OnInit {
  return;
  }
 
+ if (refresh && response.referrals.length < this.limit) {
+ this.fewerResultsThanLimit = true;
+ }
+
  if (response['load-next']) {
  this.offset = response['load-next'];
  } else {

src/app/modules/wallet/tokens/referrals/links/links.component.html

@@ -71,14 +71,14 @@
  </svg>
  </button> 
  
- <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_SMS" title="SMS" class="m-referrals-links__shareButton m-referrals-links__shareButton--sms"
+ <!-- <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_SMS" title="SMS" class="m-referrals-links__shareButton m-referrals-links__shareButton--sms"
  *ngIf="isMobileOrTablet()"
  (click)="openSMS()"
  >
  <svg viewBox="0 0 32 32">
  <path d="m23.5 16.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m-7.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m-7.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m7.5-14.5c-8.82 0-16 5.94-16 13.32 0 2.9 1.12 5.64 3.14 7.92l-.43 6.23a.5.5 0 0 0 .69.5l6.08-2.51c1.99.78 4.21 1.19 6.52 1.19 8.82 0 16-5.94 16-13.32s-7.18-13.33-16-13.32" fill-rule="evenodd"></path>
  </svg>
- </button>
+ </button> -->
  
  <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_EMAIL" title="Email" class="m-referrals-links__shareButton m-referrals-links__shareButton--email"
  (click)= "openEmail()"
@@ -87,13 +87,39 @@
  <path d="m17.42 18.99c.14-.12.86-.76 2.08-1.86l10.43 8.66h-27.76l10.35-8.67c1.24 1.1 1.98 1.74 2.12 1.85.83.65 1.93.63 2.78.02m11.89-10.67-4.83 4.34c-1.51 1.35-2.8 2.51-3.86 3.46l10.35 8.6c.01.01.01.02.02.03v-17.81c0-.04-.02-.07-.02-.11a3.73 3.73 0 0 0 -.08.07zm-25.19-.7a5347.74 5347.74 0 0 0 4.69 4.19c3.94 3.52 6.51 5.79 6.75 5.97a.76.76 0 0 0 .92.03c.21-.18 2.82-2.52 7.01-6.28l4.82-4.33 1.35-1.21h-27.37l.29.26zm3.66 5.28a4436.65 4436.65 0 0 1 -4.66-4.16c-.56-.5-1.07-.96-1.53-1.37l-.57-.51c0 .03-.01.05-.01.07v17.89l10.38-8.7c-1-.89-2.2-1.95-3.61-3.20" fill-rule="evenodd"></path>
  </svg>
  </button> 
- </div> 
+ </div> 
+ <div class="smsTests"><h4>SMS PROTOCOL TESTS</h4>
+ <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_SMS" title="SMS" class="m-referrals-links__shareButton m-referrals-links__shareButton--sms"
+ (click)="openWindow('sms:&body=Join me on Minds%20%f0%9f%92%a1%20' + this.encodedRegisterUrl)"
+ >
+ 1[&]
+ </button>
+ 
+ <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_SMS" title="SMS" class="m-referrals-links__shareButton m-referrals-links__shareButton--sms"
+ (click)="openWindow('sms:?body=Join me on Minds%20%f0%9f%92%a1%20' + this.encodedRegisterUrl)"
+ >
+ 2[?]
+ </button>
+ 
+ <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_SMS" title="SMS" class="m-referrals-links__shareButton m-referrals-links__shareButton--sms"
+ (click)="openWindow('sms:?&body=Join me on Minds%20%f0%9f%92%a1%20' + this.encodedRegisterUrl)"
+ >
+ 3[?&]
+ </button>
+ 
+ <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_SMS" title="SMS" class="m-referrals-links__shareButton m-referrals-links__shareButton--sms"
+ (click)="openWindow('sms:;body=Join me on Minds%20%f0%9f%92%a1%20' + this.encodedRegisterUrl)"
+ >
+ 4[;]
+ </button>
+
+ </div> 
  </div>
  <div class="m-referrals-links__modalLinks" *ngIf="isModal">
  <div>
  <h4 i18n="@@M_REFERRALS__LEARN_MORE_HEADER">Learn more</h4>
- <a [routerLink]="['/wallet/tokens/referrals']">Referrals</a>
- <a [routerLink]="['/wallet/tokens/101']">Token 101</a>
+ <a [routerLink]="['/wallet/tokens/referrals']" (click)="closeModal()">Referrals Console</a>
+ <a [routerLink]="['/wallet/tokens/101']" (click)="closeModal()">Token 101</a>
  </div>
  </div>
 </div>
\ No newline at end of file

src/app/modules/wallet/tokens/referrals/links/links.component.scss

 .m-overlay-modal--referrals-links .m-referrals-links,
 .m-referrals-links {
- @include m-theme(){
+ @include m-theme() {
+ color: themed($m-grey-800);
+ }
+
+ h4 {
+ font-size: 18px;
+ font-weight: 600;
+ padding: 0;
+ margin: 16px 0 0 0;
+ }
+
+ .m-referrals-links__copyableLinks {
+ h3 {
+ font-size: 28px;
+ font-weight: 600;
+ margin: 0;
+ @include m-theme() {
  color: themed($m-grey-800);
+ }
  }
- 
- h4 {
- font-size: 18px;
- font-weight: 600;
- padding: 0;
- margin: 16px 0 0 0;
+
+ p {
+ margin: 0 0 8px 0;
  }
 
- .m-referrals-links__copyableLinks {
- h3 {
- font-size: 28px;
- font-weight: 600;
- margin: 0;
- @include m-theme(){
- color: themed($m-grey-800);
- }
+ .m-referrals-links__copyableLink {
+ padding: $minds-padding;
+ max-width: 450px;
+ margin-bottom: $minds-padding * 3;
+ border-radius: 18px;
+
+ &.focused {
+ @include m-theme() {
+ border-color: themed($m-blue);
  }
+ }
+
+ .m-referrals-links__copyableLinkText {
+ width: 100%;
+ max-width: calc(100% - 42px);
+ overflow: hidden;
+ white-space: nowrap;
+ font-size: 18px;
+ border: none;
+ text-align: left !important;
 
- p {
- margin: 0 0 8px 0;
+ @include m-theme() {
+ background-color: transparent;
+ color: rgba(themed($m-black), 0.87);
  }
 
- .m-referrals-links__copyableLink {
- padding: $minds-padding;
- max-width: 450px;
- margin-bottom: $minds-padding * 3;
- border-radius: 18px;
+ &::selection {
+ background-color: #b3d4fc;
+ }
 
- &.focused {
- @include m-theme(){
- border-color: themed($m-blue);
- }
- }
+ &.recentlyCopied {
+ max-width: calc(100% - 56px);
+ }
 
- .m-referrals-links__copyableLinkText {
- width: 100%;
- max-width: calc(100% - 42px);
- overflow: hidden;
- white-space: nowrap;
- font-size: 18px;
- border: none;
- text-align:left;
- 
- @include m-theme(){
- background-color: transparent;
- color: rgba(themed($m-black), 0.87);
- }
-
- &::selection {
- background-color: #b3d4fc;
- }
-
- &.recentlyCopied {
- max-width: calc(100% - 56px);
- }
-
- &:focus {
- outline: none;
- }
- }
+ &:focus {
+ outline: none;
+ }
+ }
+
+ .m-referrals-links__copyableLinkButton {
+ cursor: pointer;
+ float: right;
+ border: none;
+ margin: 1px 4px 0 0;
+ @include m-theme() {
+ color: themed($m-blue);
+ }
 
- .m-referrals-links__copyableLinkButton {
- cursor: pointer;
- float: right;
- border: none;
- margin: 1px 4px 0 0;
- @include m-theme(){
- color: themed($m-blue);
- }
-
- &:hover {
- text-decoration: underline;
- } 
- }
+ &:hover {
+ text-decoration: underline;
  }
+ }
  }
-
- .m-referrals-links__share {
- margin-top: 24px;
-
- .m-referrals-links__shareButtons {
- display: flex;
- justify-content: flex-start;
- flex-wrap: wrap;
-
- button {
- cursor: pointer;
- border-radius: 50%;
- height: 32px;
- width: 32px;
- border: none;
- margin: 12px 24px 12px 0;
-
- svg {
- path {
- @include m-theme() {
- fill: themed($m-white-always);
- }
- }
- }
-
- &:hover {
- @include m-theme() {
- box-shadow: inset 0 0 16px 16px rgba(themed($m-black-always), 0.2);
- }
- }
+ }
+
+ .m-referrals-links__share {
+ margin-top: 24px;
+
+ .m-referrals-links__shareButtons {
+ display: flex;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+
+ button {
+ cursor: pointer;
+ border-radius: 50%;
+ height: 32px;
+ width: 32px;
+ border: none;
+ margin: 12px 24px 12px 0;
+
+ svg {
+ path {
+ @include m-theme() {
+ fill: themed($m-white-always);
  }
+ }
  }
 
- .m-referrals-links__shareButton--twitter {
- background-color: #03b3ee;
+ &:hover {
+ @include m-theme() {
+ box-shadow: inset 0 0 16px 16px rgba(themed($m-black-always), 0.2);
+ }
  }
+ }
+ }
 
-  .m-referrals-links__shareButton--messenger  {
-  background-color: #0084ff;
-  }
+ .m-referrals-links__shareButton--twitter {
+ background-color: #03b3ee;
+ }
 
-  .m-referrals-links__shareButton--facebook {
-  background-color: #3b5998;
-  }
+ .m-referrals-links__shareButton--messenger {
+ background-color: #0084ff;
+ }
 
-  .m-referrals-links__shareButton--whatsapp {
-  background-color: #25D366;
-  }
+ .m-referrals-links__shareButton--facebook {
+ background-color: #3b5998;
+ }
 
- .m-referrals-links__shareButton--sms,
- .m-referrals-links__shareButton--email {
- @include m-theme(){
- background-color: themed($m-blue-grey-500);
- }
- }
+ .m-referrals-links__shareButton--whatsapp {
+ background-color: #25d366;
  }
- .m-referrals-links__modalLinks {
- margin-bottom: $minds-padding * 2;
- h4 {
- margin-bottom: $minds-padding;
- }
- a {
- margin-right: $minds-padding * 2;
- }
 
+ .m-referrals-links__shareButton--sms,
+ .m-referrals-links__shareButton--email {
+ @include m-theme() {
+ background-color: themed($m-blue-grey-500);
+ }
+ }
+ }
+ .m-referrals-links__modalLinks {
+ margin-bottom: $minds-padding * 2;
+ h4 {
+ margin-bottom: $minds-padding;
+ }
+ a {
+ font-size: 18px;
+ margin-right: $minds-padding * 2;
+ }
+ }
+ .smsTests {
+ margin-top: 24px;
+ button {
+ margin: 8px;
+ padding: 4px;
+ @include m-theme(){
+ color: themed($m-white);
+ }
  }
-}
\ No newline at end of file
+ }
+}

src/app/modules/wallet/tokens/referrals/links/links.component.ts

 import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import { Session } from '../../../../../services/session';
+import { OverlayModalService } from '../../../../../services/ux/overlay-modal';
 import isMobileOrTablet from '../../../../../helpers/is-mobile-or-tablet';
 
 
@@ -30,6 +31,7 @@ export class ReferralsLinksComponent implements OnInit, OnDestroy {
 
  constructor(
  public session: Session,
+ private overlayModal: OverlayModalService
  ) {
  }
 
@@ -108,4 +110,8 @@ export class ReferralsLinksComponent implements OnInit, OnDestroy {
  clearTimeout(this.registerUrlTimeout);
  clearTimeout(this.referrerParamTimeout);
  }
+
+ closeModal() {
+ this.overlayModal.dismiss();
+ }
 }