WIP: referrals console

src/app/common/components/infinite-scroll/horizontal-infinite-scroll.component.ts

@@ -7,6 +7,7 @@ import { Subscription } from "rxjs";
  template: `
  <div class="mdl-spinner mdl-js-spinner is-active" [mdl] [hidden]="!inProgress"></div>
  <div class="m-infinite-scroll-manual"
+ [class.m-infinite-scroll-manual__loadMore]="!iconOnly"
  [class.mdl-color--blue-grey-200]="!iconOnly"
  [class.mdl-color-text--blue-grey-500]="!iconOnly"
  [hidden]="inProgress || !moreData"
@@ -17,6 +18,7 @@ import { Subscription } from "rxjs";
  <i class="material-icons" *ngIf="iconOnly">keyboard_arrow_right</i>
  </div>
  <div class="m-infinite-scroll-manual"
+ [class.m-infinite-scroll-manual__noMore]="!iconOnly"
  [class.mdl-color--blue-grey-200]="!iconOnly"
  [class.mdl-color-text--blue-grey-500]="!iconOnly"
  [hidden]="moreData"

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

@@ -14,4 +14,27 @@ infinite-scroll{
  font-weight: 600;
  cursor:pointer;
  }
+
+ .m-infinite-scroll-manual__noMore{
+ cursor: default;
+ 
+ @include m-theme(){
+ color: themed($m-blue-grey-300) !important;
+ background-color: themed($m-blue-grey-50) !important;
+ }
+ }
+
+ .m-infinite-scroll-manual__loadMore{
+ &:hover {
+ @include m-theme(){
+ color: themed($m-blue-grey-700) !important;
+ background-color: themed($m-blue-grey-300) !important;
+ }
+ }
+ &:active {
+ @include m-theme(){
+ background-color: themed($m-blue-grey-200) !important;
+ }
+ }
+ }
 }

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

@@ -7,6 +7,7 @@ import { Subscription } from "rxjs";
  template: `
  <div class="mdl-spinner mdl-js-spinner is-active" [mdl] [hidden]="!inProgress"></div>
  <div class="m-infinite-scroll-manual"
+ [class.m-infinite-scroll-manual__loadMore]="!iconOnly"
  [class.mdl-color--blue-grey-200]="!iconOnly"
  [class.mdl-color-text--blue-grey-500]="!iconOnly"
  [hidden]="inProgress || !moreData"
@@ -17,6 +18,7 @@ import { Subscription } from "rxjs";
  <i class="material-icons" *ngIf="iconOnly">keyboard_arrow_down</i>
  </div>
  <div class="m-infinite-scroll-manual"
+ [class.m-infinite-scroll-manual__noMore]="!iconOnly"
  [class.mdl-color--blue-grey-200]="!iconOnly"
  [class.mdl-color-text--blue-grey-500]="!iconOnly"
  [hidden]="moreData"

src/app/common/layout/v2-topbar/v2-topbar.component.html

@@ -40,8 +40,9 @@
  i18n-title
  >
  <img [src]="minds.cdn_assets_url + 'assets/logos/bulb.svg'"
- (mouseenter)="mouseEnter()"
- (mouseleave)="mouseLeave()"
+ (touchstart)="touchStart()"
+ (mouseenter)="mouseEnter()"
+ (mouseleave)="mouseLeave()"
  />
  </a>
  <ng-container *ngIf="getCurrentUser()">

src/app/common/layout/v2-topbar/v2-topbar.component.ts

@@ -10,7 +10,6 @@ import { Session } from "../../../services/session";
 import { DynamicHostDirective } from "../../directives/dynamic-host.directive";
 import { NotificationsToasterComponent } from "../../../modules/notifications/toaster.component";
 import { ThemeService } from "../../../common/services/theme.service";
-import isMobileOrTablet from '../../../helpers/is-mobile';
 
 @Component({
  selector: 'm-v2-topbar',
@@ -20,6 +19,7 @@ import isMobileOrTablet from '../../../helpers/is-mobile';
 export class V2TopbarComponent implements OnInit {
  minds = window.Minds;
  timeout;
+ isTouchScreen = false;
 
  @ViewChild(DynamicHostDirective) notificationsToasterHost: DynamicHostDirective;
 
@@ -58,13 +58,17 @@ export class V2TopbarComponent implements OnInit {
  this.cd.detectChanges();
  }
 
+ touchStart() {
+ this.isTouchScreen = true;
+ }
+
  mouseEnter() {
- if (!isMobileOrTablet()) {
- if (this.session.isLoggedIn()) {
- this.timeout = setTimeout(() => {
+ if (this.session.isLoggedIn()) {
+ this.timeout = setTimeout(() => {
+ if(!this.isTouchScreen) {
  this.themeService.toggleUserThemePreference();
- }, 5000);
- }
+ }
+ }, 5000);
  }
  }
 

src/app/modules/channels/sidebar/sidebar.scss

@@ -41,10 +41,18 @@
  }
  }
 }
+.m-channel--action-buttons {
+ @media screen and (max-width: $min-desktop) and (min-width: $min-tablet){
+ m-messenger--channel-button {
+ span {
+ display:none;
+ }
+ }
+ }
 
-
-@media screen and (max-width: $max-mobile * 1.25) {
- m-messenger--channel-button {
- display: none;
+ @media screen and (max-width: $max-mobile * 1.25) {
+ m-messenger--channel-button {
+  display: none;
+ }
  }
 }

src/app/modules/messenger/channel-button/channel-button.component.scss

@@ -17,14 +17,14 @@ m-messenger--channel-button{
  }
 
  > i, &.material-icons {
- padding-right: $minds-padding;
  padding-bottom: 1px;
  vertical-align:middle;
+ margin-top: 2px;
  }
- @media screen and (max-width: $min-desktop) and (min-width: $min-tablet){
- span {
- display:none;
- }
+
+ > span {
+ padding-left: $minds-padding;
  }
+
  }
 }

src/app/modules/messenger/conversation/conversation.component.html

-<div class="m-messenger--conversation m-messenger--dockpane mdl-shadow--4dp" [class.m-messenger--dockpane-open]="conversation.open">
+<div class="m-messenger--conversation m-messenger--dockpane" [class.m-messenger--dockpane-open]="conversation.open">
  <div class="m-messenger--dockpane-tab"
  [class.mdl-color--amber]="conversation.unread"
- (click)="dockpanes.toggle(conversation); initialLoad()">
+ (click)="dockpanes.toggle(conversation); initialLoad(); temp()">
  <div class="m-messenger--dockpane-tab-title">
  <span *ngFor="let participant of conversation.participants">{{participant.username}}</span>
  </div>
  <div class="m-messenger--dockpane-tab-actions" (click)="$event.stopPropagation()">
  <i class="material-icons mdl-color-text--blue-grey-100" [hidden]="live">sync_problem</i>
  <i class="material-icons"
- (click)="ribbon.open = !ribbon.open"
- [ngClass]="{ 'm-status-active': ribbon.open }"
- >more_vert</i>
+  (click)="ribbonToggle()"
+  [ngClass]="{ 'm-status-active': ribbon.open }"
+  >more_vert</i>
  <i class="material-icons" (click)="dockpanes.close(conversation)">close</i>
  </div>
  </div>
 
- <div class="m-messenger--dockpane-container mdl-shadow--2dp">
- <div class="m-messenger--dockpane-tab-ribbon" #ribbon [hidden]="!ribbon.open">
- <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="deleteHistory(); ribbon.open = false" *ngIf="showMessages">
+ <div class="m-messenger--dockpane-container">
+ <div class="m-messenger--dockpane-tab-ribbon" #ribbon [hidden]="!ribbonOpened">
+ <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="deleteHistory(); ribbonOpened = false">
  <i class="material-icons mdl-color-text--blue-grey-100" title="Delete chat history" i18n-title="@@MESSENGER__CONVERSATION__DELETE_TOOLTIP">delete</i>
  <ng-container i18n="@@MESSENGER__CONVERSATION__DESTROY">Destroy</ng-container>
  </div>
- <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbon.open = false" *ngIf="!blocked">
+ <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbonOpened = false" *ngIf="!blocked">
  <i class="material-icons mdl-color-text--blue-grey-100" title="Block participants" i18n-title="@@MESSENGER__CONVERSATION__BLOCK_TOOLTIP">block</i>
  <ng-container i18n="@@MESSENGER__CONVERSATION__BLOCK">Block</ng-container>
  </div>
- <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbon.open = false" *ngIf="blocked">
+ <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbonOpened = false" *ngIf="blocked">
  <i class="material-icons mdl-color-text--blue-grey-100" title="Un-block chat" i18n-title="@@MESSENGER__CONVERSATION__UNBLOCK_TOOLTIP">restore</i>
  <ng-container i18n="@@MESSENGER__CONVERSATION__UNBLOCK">Un-block</ng-container>
  </div>

src/app/modules/messenger/conversation/conversation.component.scss

 @import 'defaults.scss';
 
 .m-messenger--conversation{
+ border-radius: 3px 3px 0 0;
+ @include m-theme(){
+ box-shadow: 0 2px 4px 0 rgba(themed($m-black), .15), 0 1px 0px -2px rgba(themed($m-black), .15), 0 1px 5px 0 rgba(themed($m-black), .15);
+ }
 
  .m-messenger--conversation-messages{
  max-height:240px;
@@ -83,6 +87,15 @@
  margin-bottom: $minds-padding * 2;
  line-height: 1.35;
  }
+
+ button:not([disabled]) {
+ &:hover {
+ @include m-theme(){
+ background-color: themed($m-blue-grey-700);
+ }
+ }
+
+ }
  }
  }
  .m-messenger--conversation-composer{

src/app/modules/messenger/conversation/conversation.component.ts

@@ -64,6 +64,8 @@ export class MessengerConversation {
  invitable: any[] | null = null;
  invited: boolean = false;
 
+ ribbonOpened: boolean = false;
+
  constructor(
  public session: Session,
  public client: Client,
@@ -360,8 +362,17 @@ export class MessengerConversation {
  has = true;
  }
  });
-
  return has;
  }
 
+ ribbonToggle() {
+ this.ribbonOpened = !this.ribbonOpened;
+ this.dockpanes.open(this.conversation);
+ }
+
+ //OJM TODO -- if toggle to close messages, also close the ribbon
+ // do the same for userlist
+ // otherwise if you click the icon when closed it opens the container 
+ // but ribbon is closed
+
 }

src/app/modules/messenger/dockpanes/dockpanes.component.scss

@@ -37,7 +37,6 @@
  @include m-theme(){
  background-color: themed($m-white);
  color: themed($m-grey-800);
- border: 1px solid themed($m-grey-50);
  }
 
  .m-messenger--dockpane-tab-title{
@@ -63,7 +62,6 @@
  }
 
  .m-messenger--dockpane-tab-actions{
- display: inline-block;
  text-align: right;
  vertical-align: middle;
  float: right;
@@ -75,10 +73,9 @@
  line-height: 12px;
  border-radius: 0 3px 0 0;
 
- &:hover,
- &.m-status-active{
+ &:hover{
  @include m-theme(){
- color: themed($m-blue-grey-700) !important;
+ color: themed($m-blue-grey-500) !important;
  }
  }
  }
@@ -121,6 +118,17 @@
  padding-bottom: 8px;
  cursor: pointer;
 
+ &:hover{
+ @include m-theme(){
+ color: themed($m-blue-grey-500) !important;
+ }
+ > i {
+ @include m-theme(){
+ color: themed($m-blue-grey-500) !important;
+ }
+ }
+ }
+
  > i{
  width: 100%;
  font-size: 16px;
@@ -128,12 +136,6 @@
  line-height: 12px;
  border-radius: 0 3px 0 0;
  cursor: pointer;
-
- &:hover{
- @include m-theme(){
- color: themed($m-blue-grey-700) !important;
- }
- }
  }
  }
  }

src/app/modules/messenger/encryption/encryption.component.html

@@ -19,7 +19,7 @@
 
 <div class="m-messenger--encryption-setup m-messenger--encryption-rekey" *ngIf="encryption.reKeying">
  <p class="mdl-color-text--grey-400 m-messenger-encryption-setup-note">
- <ng-container i18n="@@MESSENGER__ENCRYPTION__CHANGING_PWD_NOTE">Changing your encryption password will cause your previous messages to be unreadable.</ng-container>
+ <ng-container i18n="@@MESSENGER__ENCRYPTION__CHANGING_PWD_NOTE">Changing your encryption password will cause your previous messages to be unreadable. </ng-container>
  <a class="mdl-color-text--blue-grey-300" (click)="encryption.reKeying = false" i18n="@@MESSENGER__ENCRYPTION__CANCEL_ACTION">Cancel</a>
  </p>
  <p [hidden]="!error" class="m-messenger--error mdl-color-text--red">{{error}}</p>

src/app/modules/messenger/userlist/userlist.component.scss

@@ -3,6 +3,10 @@
 #{if(&, "&", "*")}.m-messenger--userlist{
 
  width:200px;
+ border-radius: 3px 3px 0 0;
+ @include m-theme(){
+ box-shadow: 0 2px 4px 0 rgba(themed($m-black), .15), 0 1px 0px -2px rgba(themed($m-black), .15), 0 1px 5px 0 rgba(themed($m-black), .15);
+ }
 
  .m-messenger--userlist-search{
  height: 30px;
@@ -42,6 +46,12 @@
  display: flex;
  align-items: center;
 
+ &:hover {
+ @include m-theme(){
+ background-color: rgba(themed($m-blue-grey-50), 0.5);
+ }
+ }
+
  img{
  width: 24px;
  margin: 8px;

src/app/modules/modals/modals.module.ts

@@ -15,7 +15,6 @@ import { SignupOnScrollModal } from './signup/signup-on-scroll';
 import { ConfirmPasswordModalComponent } from './confirm-password/modal.component';
 import { SignupModal } from './signup/signup';
 import { TOSUpdatedModal } from './tos-updated/tos.component';
-import { ReferralsModal } from './referrals/referrals.component';
 
 @NgModule({
  imports: [
@@ -24,7 +23,7 @@ import { ReferralsModal } from './referrals/referrals.component';
  RouterModule.forChild([]),
  FormsModule,
  ReactiveFormsModule,
- MindsFormsModule
+ MindsFormsModule,
  ],
  declarations: [
  ConfirmModal,
@@ -36,7 +35,6 @@ import { ReferralsModal } from './referrals/referrals.component';
  SignupModal,
  ConfirmPasswordModalComponent,
  TOSUpdatedModal,
- ReferralsModal
  ],
  entryComponents: [
  ConfirmPasswordModalComponent
@@ -50,7 +48,6 @@ import { ReferralsModal } from './referrals/referrals.component';
  SignupOnScrollModal,
  SignupModal,
  TOSUpdatedModal,
- ReferralsModal
  ]
 })
 export class ModalsModule {

src/app/modules/modals/referrals/referrals.component.html

-<div class="m-referrals__links">
- <p i18n="@@M_REFERRALS__LINKS_REGISTER_URL_DESC">Send this link to your friends to earn tokens for referrals</p>
-
- <!-- OJMQ: Is there a way to make {{dynamicText}} accessible for i18n? 
- (so I can redo these copyable links with ngfor so this isn't so clunky) -->
- <div class="m-referrals__linksCopyableLink m-border" [class.focused]="registerUrlFocused"
- (click)="$event.stopPropagation(); applyFocus(registerUrlEl, 'registerUrl')" 
- > 
- <div (click)="copyToClipboard(registerUrlEl, 'registerUrl')" class="m-referrals__linksCopyButton">
- <div i18n="@@M_REFERRALS__LINKS_COPY_ACTION" *ngIf="!registerUrlRecentlyCopied">Copy</div>
- <div i18n="@@M_REFERRALS__LINKS_COPY_STATE" *ngIf="registerUrlRecentlyCopied">Copied</div>
- </div>
- <input class ="m-referrals__linksCopyableLinkText" 
- [class.recentlyCopied]="registerUrlRecentlyCopied"
- readonly autofocus="false" tabindex="0"
- (focus)="registerUrlFocused"
- (focusout)="registerUrlFocused = false"
- value="{{registerUrl}}" #registerUrlEl>
- </div>
-
- <p i18n="@@M_REFERRALS__LINKS_REFERRER_PARAM_DESC">You can also get referrals by adding this code to the end of any Minds link you share</p>
- <div class="m-referrals__linksCopyableLink m-border" [class.focused]="referrerParamFocused"
- (click)="applyFocus(referrerParamEl, 'referrerParam')" 
- >
- <div (click)="copyToClipboard(referrerParamEl, 'referrerParam')" class="m-referrals__linksCopyButton">
- <div i18n="@@M_REFERRALS__LINKS_COPY_ACTION" *ngIf="!referrerParamRecentlyCopied">Copy</div>
- <div i18n="@@M_REFERRALS__LINKS_COPY_STATE" *ngIf="referrerParamRecentlyCopied">Copied</div>
- </div>
- <input class ="m-referrals__linksCopyableLinkText" 
- [class.recentlyCopied]="referrerParamRecentlyCopied"
- readonly 
- (focus)="referrerParamFocused"
- (focusout)="referrerParamFocused = false"
- value="{{referrerParam}}" #referrerParamEl>
- </div>
-</div>
-
-<div class="m-referrals__share">
- <div>
- <h4 i18n="@@M_REFERRALS__SHARE_HEADER">More ways to share</h4>
- <div class="m-referrals__shareButtons">
- <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_TWITTER" title="Twitter" class="m-referrals__shareButton m-referrals__shareButton--twitter"
- (click)="openWindow('https://twitter.com/intent/tweet?text=Join%20me%20on%20Minds%20%f0%9f%92%a1%20&tw_p=tweetbutton&url=' + encodedRegisterUrl)"
- >
- <svg viewBox="0 0 24 24">
- <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" fill-rule="evenodd"></path> 
- </svg>
- </button> 
-
- <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_FACEBOOK" title="Facebook" class="m-referrals__shareButton m-referrals__shareButton--facebook"
- (click)="openWindow('https://www.facebook.com/sharer/sharer.php?u=' + encodedRegisterUrl + '&display=popup&ref=plugin&src=share_button')"
- >
- <svg viewBox="0 0 32 32">
- <path d="m8 14.41v-4.17c0-.42.35-.81.77-.81h2.52v-2.08c0-4.84 2.48-7.31 7.42-7.35 1.65 0 3.22.21 4.69.64.46.14.63.42.6.88l-.56 4.06c-.04.18-.14.35-.32.53-.21.11-.42.18-.63.14-.88-.25-1.78-.35-2.8-.35-1.4 0-1.61.28-1.61 1.73v1.8h4.52c.42 0 .81.42.81.88l-.35 4.17c0 .42-.35.71-.77.71h-4.21v16c0 .42-.35.81-.77.81h-5.21c-.42 0-.8-.39-.8-.81v-16h-2.52a.78.78 0 0 1 -.78-.77" fill-rule="evenodd"></path>
- </svg>
- </button> 
-
- <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_MESSENGER" title="Messenger" class="m-referrals__shareButton m-referrals__shareButton--messenger"
- *ngIf="isMobileOrTablet()"
- (click)="openWindow('fb-messenger://share?link=' + encodedRegisterUrl + '&app_id=' + facebookAppId);"
- >
- <svg viewBox="0 0 32 32">
- <path d="m17.59 19.95-4.07-4.35-7.95 4.35 8.74-9.28 4.17 4.35 7.85-4.35zm-1.59-19.95c-8.84 0-16 6.63-16 14.82 0 4.66 2.33 8.82 5.96 11.54v5.64l5.45-2.99a17.24 17.24 0 0 0 4.59.62c8.84 0 16-6.63 16-14.82 0-8.18-7.16-14.81-16-14.80z" fill-rule="evenodd"></path>
- </svg>
- </button>
-
- <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_Whatsapp" title="Whatsapp" class="m-referrals__shareButton m-referrals__shareButton--whatsapp"
- (click)="openWindow('https://api.whatsapp.com/send?text=' + encodedRegisterMessage)" 
- >
- <svg viewBox="0 0 32 32">
- <path d="m23.37 21.18c-.31.87-1.8 1.66-2.52 1.77-.65.1-1.46.14-2.35-.15a21.13 21.13 0 0 1 -2.13-.78c-3.74-1.61-6.19-5.36-6.38-5.61s-1.52-2.01-1.52-3.84.97-2.73 1.31-3.1.75-.46 1-.46.5 0 .71.01c.23.01.54-.09.84.64.31.75 1.06 2.57 1.15 2.76.09.18.16.4.03.65-.12.25-.19.4-.37.62-.19.22-.39.48-.56.65-.19.19-.38.39-.16.76s.97 1.59 2.08 2.58c1.43 1.26 2.63 1.66 3 1.84.37.19.59.16.81-.09s.93-1.09 1.18-1.46.5-.31.84-.19 2.18 1.02 2.55 1.21.62.28.72.43c.09.16.09.9-.22 1.77m3.26-15.82a14.88 14.88 0 0 0 -10.57-4.36c-8.23 0-14.94 6.67-14.94 14.87a14.78 14.78 0 0 0 1.99 7.43l-2.12 7.7 7.92-2.07a14.98 14.98 0 0 0 7.14 1.81h.01c8.23 0 14.93-6.67 14.94-14.87a14.74 14.74 0 0 0 -4.37-10.53" fill-rule="evenodd"></path>
- </svg>
- </button> 
- 
- <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_SMS" title="SMS" class="m-referrals__shareButton m-referrals__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 i18n-title="@@M_REFERRALS__SHARE_BUTTON_EMAIL" title="Email" class="m-referrals__shareButton m-referrals__shareButton--email"
- (click)= "openEmail()"
- >
- <svg viewBox="0 0 32 32">
- <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>
-<div class="m-referrals__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>
- <div>
-</div>
\ No newline at end of file

src/app/modules/modals/referrals/referrals.component.ts

-import { Component, OnInit, OnDestroy, EventEmitter } from '@angular/core';
-import { Session } from '../../../services/session';
-import isMobileOrTablet from '../../../helpers/is-mobile-or-tablet';
-// import { OverlayModalService } from '../../../services/ux/overlay-modal';
-
+import { Component, EventEmitter } from '@angular/core';
+import { ReferralsLinksComponent } from '../../wallet/tokens/referrals/links/links.component';
 
 @Component({
  selector: 'm-modal-referrals',
  inputs: ['open'],
  outputs: ['closed'],
- templateUrl: 'referrals.component.html'
+ template: `
+ <m-modal class="m-modal-referrals" [open]="open" (closed)="close($event)">
+ <m-referrals--links [isModal]="true"></m-referrals--links>
+ </m-modal>
+ `
 })
 
-export class ReferralsModal implements OnInit, OnDestroy {
-
- //OJMTODO: configure modal stuff
- isModal: boolean = false;
- open: boolean = false;
- closed: EventEmitter<any> = new EventEmitter();
-
- referrerParam: string = '';
- registerUrl: string = '';
- encodedRegisterUrl: string = '';
- registerMessage: string = '';
- encodedRegisterMessage: string = '';
- emailAddress: string = '';
- registerUrlTimeout;
- referrerParamTimeout;
- facebookAppId = '184865748231073';
- smsProtocolParamPrefix = '&'; // Android by default, iOS is '?'
- registerUrlRecentlyCopied = false;
- referrerParamRecentlyCopied = false;
- registerUrlFocused = false;
- referrerParamFocused = false;
-
-
- constructor(
- public session: Session,
- // private overlayModal: OverlayModalService,
- ) {
- }
-
- ngOnInit() {
- // Create custom referral links for current user
- // in various formats to accommodate requirements for social shares
- this.referrerParam = '?referrer=' + this.session.getLoggedInUser().username;
- this.registerUrl = window.Minds.site_url + 'register' + this.referrerParam;
- this.encodedRegisterUrl = encodeURI(window.Minds.site_url) + encodeURIComponent('register' + this.referrerParam);
- this.encodedRegisterMessage = 'Join%20me%20on%20Minds%20%f0%9f%92%a1%20' + this.encodedRegisterUrl;
- }
-
- // OJMTODO: maybe use this for modal
- close(e?) {
- this.open = false;
- this.closed.next(true);
- }
-
- isMobileOrTablet() {
- return isMobileOrTablet();
- }
-
- // Used for social share popups
- openWindow(url: string) {
- window.open(url, '_blank', 'width=600, height=300, left=80, top=80');
- }
-
- openEmail() {
- window.location.href = 'mailto:?subject=Join%20me%20on%20Minds&body=Join me on Minds%0D%0A' + this.encodedRegisterUrl;
- }
-
- openSMS() {
- // No support for iOS 6 + 7
- const ua = navigator.userAgent.toLowerCase();
- if (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1 || ua.indexOf('ipod') > -1) {
- this.smsProtocolParamPrefix = '?'; // android '&' is default
- }
-
- window.location.href = 'sms:' + this.smsProtocolParamPrefix + 'body=Join me on Minds%20%f0%9f%92%a1%20' + this.encodedRegisterUrl;
- }
-
- // Receives the inputElement whose text you want to copy and linkType ('registerUrl' || 'referrerParam')
- copyToClipboard(inputElement, linkType) {
-
- inputElement.select();
- document.execCommand('copy');
+export class ReferralsModal {
 
- if ( linkType === 'registerUrl' ) {
- clearTimeout(this.registerUrlTimeout);
- this.registerUrlRecentlyCopied = true;
- this.registerUrlTimeout = setTimeout(() => {
- this.registerUrlRecentlyCopied = false;
- }, 2000);
- } else {
- clearTimeout(this.referrerParamTimeout);
- this.referrerParamRecentlyCopied = true;
- this.referrerParamTimeout = setTimeout(() => {
- this.referrerParamRecentlyCopied = false;;
- }, 2000);
- }
- }
+ open: boolean = false;
+ closed: EventEmitter<any> = new EventEmitter();
 
- // Make copyable link container appear 'focused' when you click on it
- // Receives the inputElement to be focused and linkType ('registerUrl' || 'referrerParam')
- applyFocus(inputElement, linkType) {
+ constructor() { }
 
- inputElement.focus();
- inputElement.select();
+ ngOnInit() {
 
- if ( linkType === 'registerUrl') {
- this.registerUrlFocused = true;
- } else {
- this.referrerParamFocused = true;
- }
- }
+ }
 
-  ngOnDestroy() {
-  clearTimeout(this.registerUrlTimeout);
-  clearTimeout(this.referrerParamTimeout);
-  }
-}
+ close(e?) {
+ this.open = false;
+ this.closed.next(true);
+ }
+}
\ No newline at end of file

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

@@ -85,15 +85,9 @@
  </a> -->
 
  <a class="m-page--sidebar--navigation--item"
- routerLink="/wallet/tokens/referrals"
+ (click)="openReferralsModal()" 
  >
- <!-- OJMTODO: figure out how to make modal work instead -->
- <!-- (click)="referrals.open = true" --> 
- <!-- <m-modal [open]="open" (closed)="close($event)"> -->
- <!-- <m-modal>
- <m-modal-referrals #referrals [open]="referrals.open" (closed)="referrals.open = false"></m-modal-referrals>
- </m-modal> -->
-
+ <!-- <m-referrals--modal #referrals></m-referrals--modal> -->
  <i class="material-icons">assignment</i>
  <span i18n="@@M__ACTION__REFERRAL_LINK">Referrals</span>
  </a>
@@ -107,7 +101,5 @@
  {{ account_time_created * 1000 | date: 'medium' }}
  </p>
  </div>
-
  </div>
-
 </div>

src/app/modules/settings/settings.component.ts

@@ -9,6 +9,7 @@ import { Session } from '../../services/session';
 
 import { HashtagsSelectorModalComponent } from '../../modules/hashtags/hashtag-selector-modal/hashtags-selector.component';
 import { OverlayModalService } from '../../services/ux/overlay-modal';
+import { ReferralsLinksComponent } from '../wallet/tokens/referrals/links/links.component';
 
 @Component({
  selector: 'm-settings',
@@ -70,4 +71,10 @@ export class SettingsComponent {
  }).present();
  }
 
+ openReferralsModal() {
+ this.overlayModal.create(ReferralsLinksComponent, {}, {
+ class: 'm-overlay-modal--referrals-links m-overlay-modal--medium'
+ }).present();
+ }
+
 }

src/app/modules/settings/settings.module.ts

@@ -9,6 +9,7 @@ import { CommonModule } from '../../common/common.module';
 import { LegacyModule } from '../legacy/legacy.module';
 import { ReportModule } from '../report/report.module';
 import { PaymentsModule } from '../payments/payments.module';
+import { ReferralsModule } from '../wallet/tokens/referrals/referrals.module';
 
 import { SettingsComponent } from './settings.component';
 import { SettingsGeneralComponent } from './general/general.component';
@@ -58,6 +59,7 @@ const settingsRoutes : Routes = [
  ReportModule,
  PaymentsModule,
  WireModule,
+ ReferralsModule,
  ],
  declarations: [
  SettingsComponent,

src/app/modules/wallet/balances/tokens/balance.component.html

 <div class="m-wallet--balance m-border">
- <img [src]="minds.cdn_assets_url + 'assets/logos/bulb.svg'" class="m-wallet--balance--logo" />
-
  <ng-container *ngIf="!inProgress; else loading">
  <h2>{{ balance | token: 18 | number }}</h2>
  </ng-container>

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

 <div class="m-referrals-dashboard">
- <div class="m-referrals-dashboard__supportingText">
- <h3 i18n="@@M_REFERRALS_DASHBOARD__TITLE">My Referrals</h3>
+ <div class="m-referrals-dashboard__supportingText">
+ <h3 i18n="@@M_REFERRALS_DASHBOARD__TITLE">My Referrals</h3>
+ </div>
+ <div class="m-referrals-dashboard__flexTable">
+ <div class="m-referrals-dashboard__row m-referrals-dashboard__headerRow">
+ <div class="m-referrals-dashboard__cell m-referrals-dashboard__userCol">
+ <span i18n="@@M_REFERRALS_DASHBOARD__HEADER_USER">User</span>
+ </div>
+ <div class="m-referrals-dashboard__cell m-referrals-dashboard__statusCol m-referrals-dashboard__statusHeader">
+ <span i18n="@@M_REFERRALS_DASHBOARD__HEADER_STATUS">Status</span>
+ <m-tooltip icon="help" i18n="@@M_REFERRALS_DASHBOARD__STATUS_TOOLTIP">
+ Referrals are pending until they've set up their wallet
+ </m-tooltip>
+ </div>
+ <div class="m-referrals-dashboard__cell m-referrals-dashboard__registerCol">
+ <span i18n="@@M_REFERRALS_DASHBOARD__HEADER_MINDS_SIGNUP">Minds Signup</span>
+ <m-tooltip icon="help" i18n="@@M_REFERRALS_DASHBOARD__MINDS_SIGNUP_TOOLTIP">
+ The day the referral created an account with Minds
+ </m-tooltip>
+ </div>
+ <div class="m-referrals-dashboard__cell m-referrals-dashboard__joinCol">
+ <span i18n="@@M_REFERRALS_DASHBOARD__HEADER_WALLET_SIGNUP">Wallet Signup</span>
+ <m-tooltip icon="help" i18n="@@M_REFERRALS_DASHBOARD__WALLET_SIGNUP_TOOLTIP">
+ The day the referral sets up their wallet (and you are rewarded with tokens). Send pending referrals
+ a message to let them know they ought to sign up for the rewards program.
+ </m-tooltip>
+ </div>
  </div>
 
- <table *ngIf="!inProgress" class="mdl-data-table mdl-js-data-table" [mdl]>
- 
- <thead>
- <tr class="m-referrals-dashboard__headers">
- <th class="mdl-data-table__cell--non-numeric m-data-title m-referrals-dashboard__headerUser" i18n="@@M_REFERRALS_DASHBOARD__USER">User</th>
- <th class="mdl-data-table__cell--non-numeric m-data-title m-referrals-dashboard__headerStatus">
- <span i18n="@@M_REFERRALS_DASHBOARD__STATUS">Status</span>
- <m-tooltip icon="help" i18n="@@M_REFERRALS_DASHBOARD__STATUS_TOOLTIP">
- Referrals are pending until they've set up their wallet
- </m-tooltip>
- </th>
- <th class="mdl-data-table__cell--non-numeric m-data-title m-referrals-dashboard__headerMindsSignup">
- <span i18n="@@M_REFERRALS_DASHBOARD__MINDS_SIGNUP_DATE">Minds Signup</span>
- <m-tooltip icon="help" i18n="@@M_REFERRALS_DASHBOARD__MINDS_SIGNUP_DATE_TOOLTIP">
- The day the referral created an account with Minds
- </m-tooltip>
- </th>
- <th class="mdl-data-table__cell--non-numeric m-data-title m-referrals-dashboard__headerWalletSignup">
- <span i18n="@@M_REFERRALS_DASHBOARD__WALLET_SIGNUP_DATE">Wallet Signup</span>
- <m-tooltip icon="help" i18n="@@M_REFERRALS_DASHBOARD__WALLET_SIGNUP_DATE_TOOLTIP">
- The day the referral sets up their wallet (and you are rewarded with tokens) 
- </m-tooltip>
- </th>
- </tr>
- </thead>
- 
- <tbody class="m-referrals-dashboard__referralsList" #referralsList>
- <ng-container *ngFor="let referral of referrals">
- <tr class="m-referrals-dashboard__row">
- <td class="mdl-data-table__cell--non-numeric m-referrals-dashboard__cellUser">
- <div class="m-referrals-dashboard__cellUserAvatar" [hovercard]="referral.prospect.guid">
- <a [routerLink]="['/',referral.prospect.username]">
- <img class="mdl-shadow--2dp" 
- src="/icon/{{referral.prospect.guid}}/small/{{referral.prospect.icontime}}"
- />
- </a>
- </div>
- <div class="m-referrals-dashboard__cellUserUsername">
- <a [routerLink]="['/',referral.prospect.username]">
- <div title="{{referral.prospect.username}}">{{referral.prospect.username}}</div>
- <m-channel--badges class="m-channel--badges-activity" 
- [user]="referral.prospect" 
- badges="[ 'admin', 'verified' ]"
- ></m-channel--badges>
- </a>
- </div>
- </td>
- <td class="mdl-data-table__cell--non-numeric m-referrals-dashboard__cellState">
- <i *ngIf="referral.state === 'pending'" class="material-icons m-referrals-dashboard__cellStateIconPending">schedule</i>
- <i *ngIf="referral.state === 'complete'" class="material-icons m-referrals-dashboard__cellStateIconComplete">check_circle_outline</i>
- <span>{{ referral.state | titlecase }}</span>
- </td>
- <td class="mdl-data-table__cell--non-numeric m-referrals-dashboard__cellMindsSignup">{{ referral.register_timestamp | date }}</td>
- <td class="mdl-data-table__cell--non-numeric" *ngIf="referral.state === 'complete'; else poke">
- <span>{{ referral.join_timestamp | date:'mediumDate' }}</span>
- </td>
- </tr>
- <ng-template #poke>
- <td class="mdl-data-table__cell--non-numeric m-referrals-dashboard__cellSendMessage"
- (click)="sendMessage()"
- >
- <m-messenger--channel-button [user]="referral.prospect"></m-messenger--channel-button>
- <m-tooltip icon="help" i18n="@@M_REFERRALS_DASHBOARD__MESSAGE_TOOLTIP">Send a message to {{referral.prospect.username}} to let them know that they ought to sign up for the rewards program 
- </m-tooltip>
- </td>
- </ng-template>
- </ng-container>
- </tbody>
+ <ng-container *ngFor="let referral of referrals">
+ <div class="m-referrals-dashboard__row m-referrals-dashboard__dataRow">
+ <div class="m-referrals-dashboard__cell m-referrals-dashboard__userCol">
+ <a [routerLink]="['/',referral.prospect.username]" class="m-referrals-dashboard__userAvatarWrapper">
+ <img class="m-referrals-dashboard__userAvatar mdl-shadow--2dp" [hovercard]="referral.prospect.guid"
+ src="/icon/{{referral.prospect.guid}}/small/{{referral.prospect.icontime}}">
+ </a>
+ <a [routerLink]="['/',referral.prospect.username]" class="m-referrals-dashboard__userNameWrapper">
+ <span class="m-referrals-dashboard__userName">{{referral.prospect.username}}</span>
+ <m-channel--badges class="m-channel--badges-activity" [user]="referral.prospect"
+ badges="[ 'admin', 'verified' ]"></m-channel--badges>
+ </a>
+ </div>
+ <div class="m-referrals-dashboard__cell m-referrals-dashboard__statusCol">
+ <span>{{ referral.state | titlecase }}</span>
+ </div>
+ <div class="m-referrals-dashboard__cell m-referrals-dashboard__registerCol">
+ <span>{{ referral.register_timestamp | date }}</span>
+ </div>
+ <div class="m-referrals-dashboard__cell m-referrals-dashboard__joinCol">
+ <span *ngIf="referral.state === 'complete'; else poke"
+ class="m-referrals-dashboard__joinDate">{{ referral.join_timestamp | date:'mediumDate' }}</span>
+ </div>
+ <ng-template #poke>
+ <div class="m-referrals-dashboard__joinMessageButton">
+ <m-messenger--channel-button [user]="referral.prospect"></m-messenger--channel-button>
+ </div>
+ </ng-template>
+ </div>
+ </ng-container>
 
- <tbody *ngIf="!referrals || referrals.length === 0" class="m-referrals-dashboard__notice">
- <tr class="m-referrals-dashboard__row">
- <td colspan="5"> 
- <span i18n="@@M_REFERRALS_DASHBOARD__NO_REFERRALS_NOTICE">You don't have any referrals yet.</span>
- </td>
- </tr>
- </tbody>
- <tbody *ngIf="!noReferrals">
- <tr class="m-referrals-dashboard__row">
- <td colspan="5" > 
- <infinite-scroll
- distance="25%"
- (load)="load()"
- [moreData]="moreData"
- [inProgress]="inProgress"
- >
- </infinite-scroll>
- </td>
- </tr>
- </tbody>
- </table>
-</div>
+ <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 class="m-referrals-dashboard__cell">
+ <infinite-scroll distance="25%" (load)="load()" [moreData]="moreData" [inProgress]="inProgress">
+ </infinite-scroll>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file

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

-$min-table: 680px;
-
 .m-referrals-dashboard {
+ @include m-theme() {
+ color: themed($m-grey-800);
+ }
 
-  .m-referrals-dashboard__supportingText {
-  padding: $minds-padding * 2;
-  padding-bottom: 0;
+ .m-referrals-dashboard__supportingText {
+ padding: $minds-padding * 2;
+ padding-bottom: 0;
 
- h3 {
- margin-bottom: 0;
+ h3 {
+ margin-bottom: 0;
+ }
+ }
+
+ .m-referrals-dashboard__flexTable {
+ width: 100%;
+ padding-bottom: $minds-padding * 2;
+ }
+
+ m-tooltip i {
+ font-size: 12px;
+ margin-left: 1px;
+ @include m-theme() {
+ color: themed($m-grey-500);
+ }
+ }
+ 
+ .m-referrals-dashboard__row {
+ display: flex;
+ justify-content: space-between;
+
+ &.m-referrals-dashboard__headerRow {
+ align-items: center;
+ font-weight: bold;
+ font-size: 12px;
+ span {
+ @include m-theme() {
+ color: themed($m-grey-500) !important;
  }
+ }
+ }
+ &.m-referrals-dashboard__dataRow {
+ font-size: 13px;
+ @include m-theme() {
+ border-top: 1px solid themed($m-grey-50);
+ }
  }
+ }
 
- table {
- width: 100%;
- border: none !important;
- table-layout: fixed;
- white-space: nowrap;
- border-bottom-left-radius: 6px;
- border-bottom-right-radius: 6px;
- overflow: scroll;
- 
- .m-referrals-dashboard__headers {
- // white-space: normal;
- line-height: 14px;
- 
- .m-referrals-dashboard__headerUser {
- width: 35%;
- }
- .m-referrals-dashboard__headerStatus {
- width: 20%;
- }
- .m-referrals-dashboard__headerMindsSignup {
- width: 20%;
- }
- .m-referrals-dashboard__headerWalletSignup {
- width: 25%;
- }
- }
+ .m-referrals-dashboard__cell {
+ display: flex;
+ padding: 8px 8px 8px 0;
+ align-items: center;
+ overflow: hidden;
+ white-space: nowrap;
+ height: 32px;
 
- // .m-referrals-dashboard__headerMindsSignup,
- // .m-referrals-dashboard__cellMindsSignup {
- // @media screen and (max-width: $min-table) {
- // display: none;
- // }
- // }
 
+ }
+ .m-referrals-dashboard__userCol {
+ min-width: 130px; 
+ flex: 6 2 0;
+ padding-left: $minds-padding * 2;
 
+ .m-referrals-dashboard__userNameWrapper, .m-referrals-dashboard__userNameWrapper * {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
 
- tbody td {
- border-bottom: none !important;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ .m-referrals-dashboard__userAvatar {
+ border-radius: 50%;
+ margin-right: 8px;
+ width: 24px;
+ }
 
- tbody.m-referrals-dashboard__referralsList {
-
- tr {
- min-height: 56px;
- 
- &:hover {
- @include m-theme(){
- background-color: rgba(themed($m-grey-50), 0.4);
- }
- }
- }
- 
- 
-
- .m-referrals-dashboard__cellUser {
- display:flex;
- align-items: center;
- border-bottom: none;
- 
- .m-referrals-dashboard__cellUserAvatar {
- a {
- img {
- max-height: 24px;
- border-radius: 50%;
- margin-right: 8px;
- }
- }
- }
- 
- .m-referrals-dashboard__cellUserUsername {
- a {
- text-decoration: none;
-
- > div { 
- display: inline-block;
- vertical-align: middle;
- letter-spacing: .25px;
- @include m-theme(){
- color: rgba(themed($m-black), 0.87);
- }
- 
- &:hover {
- text-decoration: underline;
- }
- }
- }
- }
- }
-
- .m-referrals-dashboard__cellState {
- i.m-referrals-dashboard__cellStateIconPending {
- @include m-theme(){
- color: themed($m-grey-400);
- }
- }
- i.m-referrals-dashboard__cellStateIconComplete {
- @include m-theme(){
- color: themed($m-green);
- }
- }
- @media screen and (min-width: $min-table) {
- i {
- display: none;
- }
- }
- @media screen and (max-width: $min-table) {
- span {
- display: none;
- }
- }
- }
- 
- .m-referrals-dashboard__cellSendMessage {
- span {
- cursor: pointer;
- @include m-theme(){
- color: themed($m-blue);
- }
- 
- &:hover {
- text-decoration: underline;
- }
- }
- }
+ a {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
 
+ span {
+ letter-spacing: 0.25px;
+ &:hover {
+ text-decoration: underline;
  }
+ }
+ }
+ }
+ .m-referrals-dashboard__statusCol {
+ min-width: 60px;
+ flex: 3 5 0;
+ }
+ .m-referrals-dashboard__registerCol {
+ min-width: 50px;
+ flex: 3 4 0;
+ }
+ .m-referrals-dashboard__joinCol {
+ min-width: 80px;
+ flex: 4 2 0;
+ padding-right: $minds-padding * 2;
+
+ .m-tooltip--bubble {
+ right: 0;
+ }
 
- tbody tr:hover {
- @include m-theme(){
- background-color: themed($m-white); 
- }
- }
+ .m-referrals-dashboard__joinMessageButton {
+ display: flex; 
 
- tbody.m-referrals-dashboard__notice td {
- text-align: center;
- @include m-theme(){
- color: themed($m-grey-500);
- }
+ button {
+ border-radius: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 8px;
+ width: 100%;
+ max-width: 200px;
+ min-width: inherit;
+ margin-right: 1px;
+ font-size: 12px;
+ @include m-theme(){
+ border-color: themed($m-blue);
+ color: themed($m-blue);
  }
 
- tbody:not(.m-referrals-dashboard__referralsList) td {
- @include m-theme(){
- border-top-color: themed($m-grey-50);
- }
- }
- 
- m-tooltip {
- vertical-align: middle;
- 
- i {
- font-size: 12px;
- margin-left: 1px;
- @include m-theme(){
- color: themed($m-grey-500);
- }
- }
- .m-tooltip--bubble {
- font-style: normal;
- }
+ span {
+ padding-left: 0;
  }
+ }
  }
- m-messenger--channel-button {
- button {
- // padding-right: $minds-padding;
- min-width: 56px;
- margin-right: 1px;
-
- > i, &.material-icons {
- padding-right: 0;
- }
-
- span {
- padding-left: $minds-padding;
- }
- // @media screen and (max-width: $min-table) {
- // span {
- // display: none;
- // }
- // }
- }
- 
+ }
+
+ .m-referrals-dashboard__footer {
+ justify-content: center;
+ margin-top: $minds-padding;
+ 
+ &.m-referrals-dashboard__notice {
+ @include m-theme() {
+ color: themed($m-grey-500);
+ }
+ }
+ }
+
+ @media screen and (max-width: 910px) {
+ .m-referrals-dashboard__row.m-referrals-dashboard__headerRow {
+ span {
+ white-space: normal !important;
+ max-width: 40px;
+ }
+ .m-referrals-dashboard__registerCol,
+ .m-referrals-dashboard__joinCol {
+ align-items: flex-start !important;
+ }
+ }
+ .m-referrals-dashboard__cell.m-referrals-dashboard__joinCol {
+ flex: 2 3 0;
+ 
+ .m-referrals-dashboard__joinMessageButton button span {
+ display: none;
+ }
+ } 
+ }
+ @media screen and (max-width: 800px) {
+ .m-referrals-dashboard__cell.m-referrals-dashboard__registerCol {
+ display: none;
+ }
+ .m-referrals-dashboard__userCol {
+ min-width: 100px;
+ }
+ .m-referrals-dashboard__statusCol {
+ min-width: 60px;
+ }
+ .m-referrals-dashboard__joinCol {
+ max-width: 75px;
  }
-}
\ No newline at end of file
+ }
+} 

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

@@ -13,7 +13,7 @@ export class ReferralsDashboardComponent implements OnInit {
  offset: string = '';
  moreData: boolean = true;
  inProgress: boolean = false;
- noReferrals: boolean;
+ showNotice: boolean = false;
 
  constructor(public client: Client) {
  }
@@ -36,12 +36,11 @@ export class ReferralsDashboardComponent implements OnInit {
 
  this.client.get('api/v2/referrals', {offset: this.offset})
  .then((response: any) => {
+
  if (!response.referrals || response.referrals.length === 0 ) {
  this.inProgress = false;
  this.moreData = false;
- if (refresh) {
- this.noReferrals = true;
- }
+ this.showNotice = true;
  return;
  }
 
@@ -52,7 +51,6 @@ export class ReferralsDashboardComponent implements OnInit {
  }
 
  this.referrals.push(...response.referrals);
-
  this.inProgress = false;
  })
  .catch(e => {
@@ -61,4 +59,3 @@ export class ReferralsDashboardComponent implements OnInit {
  });
  }
 }
-

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

+<div class="m-referrals-links">
+ <div class="m-referrals-links__copyableLinks">
+ <h3 *ngIf="isModal" i18n="@@M_REFERRALS__LINKS_MODAL_HEADER" style="margin-bottom:16px">Earn tokens for referring your friends</h3>
+ <p *ngIf="!isModal" i18n="@@M_REFERRALS__LINKS_REGISTER_URL_DESC">Send this link to your friends to earn tokens for referrals</p>
+
+ <div class="m-referrals-links__copyableLink m-border" [class.focused]="registerUrlFocused"
+ (click)="applyFocus(registerUrlEl, 'registerUrl')" 
+ > 
+ <div (click)="copyToClipboard(registerUrlEl, 'registerUrl')" class="m-referrals-links__copyableLinkButton">
+ <div i18n="@@M_REFERRALS__LINKS_COPY_ACTION" *ngIf="!registerUrlRecentlyCopied">Copy</div>
+ <div i18n="@@M_REFERRALS__LINKS_COPY_STATE" *ngIf="registerUrlRecentlyCopied">Copied</div>
+ </div>
+ <input class="m-referrals-links__copyableLinkText" 
+ [class.recentlyCopied]="registerUrlRecentlyCopied"
+ readonly autofocus="false" tabindex="0"
+ (focus)="registerUrlFocused"
+ (focusout)="registerUrlFocused = false"
+ value="{{registerUrl}}" #registerUrlEl>
+ </div>
+ 
+ <p i18n="@@M_REFERRALS__LINKS_REFERRER_PARAM_DESC">You can also get referrals by adding this code to the end of any Minds link you share</p>
+ <div class="m-referrals-links__copyableLink m-border" [class.focused]="referrerParamFocused"
+ (click)="applyFocus(referrerParamEl, 'referrerParam')" 
+ >
+ <div (click)="copyToClipboard(referrerParamEl, 'referrerParam')" class="m-referrals-links__copyableLinkButton">
+ <div i18n="@@M_REFERRALS__LINKS_COPY_ACTION" *ngIf="!referrerParamRecentlyCopied">Copy</div>
+ <div i18n="@@M_REFERRALS__LINKS_COPY_STATE" *ngIf="referrerParamRecentlyCopied">Copied</div>
+ </div>
+ <input class="m-referrals-links__copyableLinkText" 
+ [class.recentlyCopied]="referrerParamRecentlyCopied"
+ readonly 
+ (focus)="referrerParamFocused"
+ (focusout)="referrerParamFocused = false"
+ value="{{referrerParam}}" #referrerParamEl>
+ </div>
+ </div>
+
+ <div class="m-referrals-links__share">
+ <h4 i18n="@@M_REFERRALS__SHARE_HEADER">More ways to share</h4>
+ <div class="m-referrals-links__shareButtons">
+ <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_TWITTER" title="Twitter" class="m-referrals-links__shareButton m-referrals-links__shareButton--twitter"
+ (click)="openWindow('https://twitter.com/intent/tweet?text=Join%20me%20on%20Minds%20%f0%9f%92%a1%20&tw_p=tweetbutton&url=' + encodedRegisterUrl)"
+ >
+ <svg viewBox="0 0 24 24">
+ <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" fill-rule="evenodd"></path> 
+ </svg>
+ </button> 
+ 
+ <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_FACEBOOK" title="Facebook" class="m-referrals-links__shareButton m-referrals-links__shareButton--facebook"
+ (click)="openWindow('https://www.facebook.com/sharer/sharer.php?u=' + encodedRegisterUrl + '&display=popup&ref=plugin&src=share_button')"
+ >
+ <svg viewBox="0 0 32 32">
+ <path d="m8 14.41v-4.17c0-.42.35-.81.77-.81h2.52v-2.08c0-4.84 2.48-7.31 7.42-7.35 1.65 0 3.22.21 4.69.64.46.14.63.42.6.88l-.56 4.06c-.04.18-.14.35-.32.53-.21.11-.42.18-.63.14-.88-.25-1.78-.35-2.8-.35-1.4 0-1.61.28-1.61 1.73v1.8h4.52c.42 0 .81.42.81.88l-.35 4.17c0 .42-.35.71-.77.71h-4.21v16c0 .42-.35.81-.77.81h-5.21c-.42 0-.8-.39-.8-.81v-16h-2.52a.78.78 0 0 1 -.78-.77" fill-rule="evenodd"></path>
+ </svg>
+ </button> 
+ 
+ <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_MESSENGER" title="Messenger" class="m-referrals-links__shareButton m-referrals-links__shareButton--messenger"
+ *ngIf="isMobileOrTablet()"
+ (click)="openWindow('fb-messenger://share?link=' + encodedRegisterUrl + '&app_id=' + encodedFacebookAppId);"
+ >
+ <svg viewBox="0 0 32 32">
+ <path d="m17.59 19.95-4.07-4.35-7.95 4.35 8.74-9.28 4.17 4.35 7.85-4.35zm-1.59-19.95c-8.84 0-16 6.63-16 14.82 0 4.66 2.33 8.82 5.96 11.54v5.64l5.45-2.99a17.24 17.24 0 0 0 4.59.62c8.84 0 16-6.63 16-14.82 0-8.18-7.16-14.81-16-14.80z" fill-rule="evenodd"></path>
+ </svg>
+ </button>
+ 
+ <button i18n-title="@@M_REFERRALS__SHARE_BUTTON_Whatsapp" title="Whatsapp" class="m-referrals-links__shareButton m-referrals-links__shareButton--whatsapp"
+ (click)="openWindow('https://api.whatsapp.com/send?text=' + encodedRegisterMessage)" 
+ >
+ <svg viewBox="0 0 32 32">
+ <path d="m23.37 21.18c-.31.87-1.8 1.66-2.52 1.77-.65.1-1.46.14-2.35-.15a21.13 21.13 0 0 1 -2.13-.78c-3.74-1.61-6.19-5.36-6.38-5.61s-1.52-2.01-1.52-3.84.97-2.73 1.31-3.1.75-.46 1-.46.5 0 .71.01c.23.01.54-.09.84.64.31.75 1.06 2.57 1.15 2.76.09.18.16.4.03.65-.12.25-.19.4-.37.62-.19.22-.39.48-.56.65-.19.19-.38.39-.16.76s.97 1.59 2.08 2.58c1.43 1.26 2.63 1.66 3 1.84.37.19.59.16.81-.09s.93-1.09 1.18-1.46.5-.31.84-.19 2.18 1.02 2.55 1.21.62.28.72.43c.09.16.09.9-.22 1.77m3.26-15.82a14.88 14.88 0 0 0 -10.57-4.36c-8.23 0-14.94 6.67-14.94 14.87a14.78 14.78 0 0 0 1.99 7.43l-2.12 7.7 7.92-2.07a14.98 14.98 0 0 0 7.14 1.81h.01c8.23 0 14.93-6.67 14.94-14.87a14.74 14.74 0 0 0 -4.37-10.53" fill-rule="evenodd"></path>
+ </svg>
+ </button> 
+ 
+ <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 i18n-title="@@M_REFERRALS__SHARE_BUTTON_EMAIL" title="Email" class="m-referrals-links__shareButton m-referrals-links__shareButton--email"
+ (click)= "openEmail()"
+ >
+ <svg viewBox="0 0 32 32">
+ <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="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>
+ </div>
+ </div>
+</div>
\ No newline at end of file

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

-m-modal-referrals {
+.m-overlay-modal--referrals-links .m-referrals-links,
+.m-referrals-links {
+ @include m-theme(){
+ color: themed($m-grey-800);
+ }
+ 
  h4 {
  font-size: 18px;
  font-weight: 600;
@@ -6,7 +11,7 @@ m-modal-referrals {
  margin: 16px 0 0 0;
  }
 
- .m-referrals__links {
+ .m-referrals-links__copyableLinks {
  h3 {
  font-size: 28px;
  font-weight: 600;
@@ -20,10 +25,11 @@ m-modal-referrals {
  margin: 0 0 8px 0;
  }
 
- .m-referrals__linksCopyableLink {
+ .m-referrals-links__copyableLink {
  padding: $minds-padding;
  max-width: 450px;
  margin-bottom: $minds-padding * 3;
+ border-radius: 18px;
 
  &.focused {
  @include m-theme(){
@@ -31,13 +37,14 @@ m-modal-referrals {
  }
  }
 
- .m-referrals__linksCopyableLinkText {
+ .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;
@@ -57,7 +64,7 @@ m-modal-referrals {
  }
  }
 
- .m-referrals__linksCopyButton {
+ .m-referrals-links__copyableLinkButton {
  cursor: pointer;
  float: right;
  border: none;
@@ -70,19 +77,13 @@ m-modal-referrals {
  text-decoration: underline;
  } 
  }
-
- .m-referrals__linksShareButton {
- @include m-theme(){
- background-color: themed($m-blue);
- }
- }
  }
  }
 
- .m-referrals__share {
+ .m-referrals-links__share {
  margin-top: 24px;
 
- .m-referrals__shareButtons {
+ .m-referrals-links__shareButtons {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
@@ -111,33 +112,37 @@ m-modal-referrals {
  }
  }
 
- .m-referrals__shareButton--twitter {
+ .m-referrals-links__shareButton--twitter {
  background-color: #03b3ee;
  }
 
- .m-referrals__shareButton--messenger {
+ .m-referrals-links__shareButton--messenger {
  background-color: #0084ff;
  }
 
- .m-referrals__shareButton--facebook {
+ .m-referrals-links__shareButton--facebook {
  background-color: #3b5998;
  }
 
- .m-referrals__shareButton--whatsapp {
+ .m-referrals-links__shareButton--whatsapp {
  background-color: #25D366;
  }
 
- .m-referrals__shareButton--sms,
- .m-referrals__shareButton--email {
+ .m-referrals-links__shareButton--sms,
+ .m-referrals-links__shareButton--email {
  @include m-theme(){
  background-color: themed($m-blue-grey-500);
  }
  }
  }
- .m-referrals__modalLinks {
+ .m-referrals-links__modalLinks {
  margin-bottom: $minds-padding * 2;
+ h4 {
+ margin-bottom: $minds-padding;
+ }
  a {
- padding-right: $minds-padding * 2;
+ margin-right: $minds-padding * 2;
  }
+
  }
-} 
+}
\ 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 isMobileOrTablet from '../../../../../helpers/is-mobile-or-tablet';
+
+
+@Component({
+ selector: 'm-referrals--links',
+ templateUrl: 'links.component.html',
+})
+
+export class ReferralsLinksComponent implements OnInit, OnDestroy {
+
+ isModal = true;
+ referrerParam = '';
+ registerUrl = '';
+ encodedRegisterUrl = '';
+ registerMessage = '';
+ encodedRegisterMessage = '';
+ emailAddress = '';
+
+ encodedFacebookAppId = '';
+ smsProtocolParamPrefix = '&'; // Android by default, iOS is '?'
+
+ registerUrlTimeout;
+ referrerParamTimeout;
+ registerUrlRecentlyCopied = false;
+ referrerParamRecentlyCopied = false;
+ registerUrlFocused = false;
+ referrerParamFocused = false;
+
+ constructor(
+ public session: Session,
+ ) {
+ }
+
+ ngOnInit() {
+ // Check if this component is being displayed somewhere other than the referrals page
+ if (window.location.pathname === '/wallet/tokens/referrals') {
+ this.isModal = false;
+ }
+
+ // Create custom referral links for current user
+ this.referrerParam = '?referrer=' + this.session.getLoggedInUser().username;
+ this.registerUrl = window.Minds.site_url + 'register' + this.referrerParam;
+ this.encodedRegisterUrl = encodeURI(window.Minds.site_url) + encodeURIComponent('register' + this.referrerParam);
+ this.encodedRegisterMessage = 'Join%20me%20on%20Minds%20%f0%9f%92%a1%20' + this.encodedRegisterUrl;
+ this.encodedFacebookAppId = encodeURIComponent('184865748231073');
+ }
+
+ isMobileOrTablet() {
+ return isMobileOrTablet();
+ }
+
+ openWindow(url: string) {
+ window.open(url, '_blank', 'width=600, height=300, left=80, top=80');
+ }
+
+ openEmail() {
+ window.location.href = 'mailto:?subject=Join%20me%20on%20Minds&body=Join me on Minds%0D%0A' + this.encodedRegisterUrl;
+ }
+
+ openSMS() {
+ // No support for iOS 6 + 7
+ const ua = navigator.userAgent.toLowerCase();
+ if (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1 || ua.indexOf('ipod') > -1) {
+ this.smsProtocolParamPrefix = '?'; // android '&' is default
+ }
+
+ window.location.href = 'sms:' + this.smsProtocolParamPrefix + 'body=Join me on Minds%20%f0%9f%92%a1%20' + this.encodedRegisterUrl;
+ }
+
+ // Receives the inputElement whose text you want to copy and linkType ('registerUrl' || 'referrerParam')
+ copyToClipboard(inputElement, linkType) {
+
+ inputElement.select();
+ document.execCommand('copy');
+
+ if (linkType === 'registerUrl') {
+ clearTimeout(this.registerUrlTimeout);
+ this.registerUrlRecentlyCopied = true;
+ this.registerUrlTimeout = setTimeout(() => {
+ this.registerUrlRecentlyCopied = false;
+ }, 2000);
+ } else {
+ clearTimeout(this.referrerParamTimeout);
+ this.referrerParamRecentlyCopied = true;
+ this.referrerParamTimeout = setTimeout(() => {
+ this.referrerParamRecentlyCopied = false; ;
+ }, 2000);
+ }
+ }
+
+ // Makes copyable link container appear 'focused' when you click on it
+ // Receives the inputElement to be focused and linkType ('registerUrl' || 'referrerParam')
+ applyFocus(inputElement, linkType) {
+
+ inputElement.focus();
+ inputElement.select();
+
+ if (linkType === 'registerUrl') {
+ this.registerUrlFocused = true;
+ } else {
+ this.referrerParamFocused = true;
+ }
+ }
+
+ ngOnDestroy() {
+ clearTimeout(this.registerUrlTimeout);
+ clearTimeout(this.referrerParamTimeout);
+ }
+}

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

 <section class="m-border">
- <h2 i18n="@@M_REFERRALS__PAGE_HEADER">Referrals</h2>
- <m-modal-referrals></m-modal-referrals>
- <!-- <m-modal-referrals #referrals [open]="referrals.open" (closed)="referrals.open = false"></m-modal-referrals> -->
+ <h2 i18n="@@M_REFERRALS__PAGE_HEADER">Referrals</h2>
+ <m-referrals--links></m-referrals--links>
 </section>
 <section class="m-border">
-  <h3 i18n="@@M_REFERRALS__BLURB_HEADER">How does it work?</h3>
-  <p class="m-referrals__blurb" i18n="@@M_REFERRALS__BLURB_HEADER"> If your friend signs up for Minds within 24 hours of clicking the link you shared with them, they’ll be added to your pending referrals. 
-  Once they sign up for the rewards program by setting up their Minds wallet, you’ll get +10 added to your contribution score!
-  (Hint: check out <a [routerLink]="['/wallet/tokens/101']">Token 101</a> to learn how contribution scores are converted into tokens.)
-  </p> 
+ <h3 i18n="@@M_REFERRALS__BLURB_HEADER">How does it work?</h3>
+ <p class="m-referrals__blurb" i18n="@@M_REFERRALS__BLURB_HEADER"> If your friend signs up for Minds within 24 hours of clicking the link you shared with them, they’ll be added to your pending referrals. 
+ Once they sign up for the rewards program by setting up their Minds wallet, the referral is complete and you’ll get +10 added to your contribution score!
+ (Hint: check out <a [routerLink]="['/wallet/tokens/101']">Token 101</a> to learn how contribution scores are converted into tokens.)
+ </p> 
 </section>
-<section class="m-border">
-  <m-referrals--dashboard></m-referrals--dashboard>
+<section class="m-border" style="min-width: 300px">
+ <m-referrals--dashboard></m-referrals--dashboard>
 </section>
\ No newline at end of file

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

@@ -20,8 +20,8 @@ m-referrals {
  font-weight: 600;
  margin-top: $minds-padding * 2;
  @include m-theme(){
-  color: themed($m-grey-800);
-  }
+ color: themed($m-grey-800);
+ }
  }
 
  h3 {
@@ -33,6 +33,12 @@ m-referrals {
  }
  }
 
+ p {
+ @include m-theme(){
+ color: themed($m-grey-800);
+ }
+ }
+
  .m-referrals__blurb {
  padding-top: $minds-padding;
  }

src/app/modules/wallet/tokens/referrals/referrals.module.ts

 import { NgModule } from '@angular/core';
 
 import { ReferralsComponent } from './referrals.component';
-import { ModalsModule } from '../../../modals/modals.module';
 import { MessengerModule } from '../../../messenger/messenger.module';
 import { ReferralsDashboardComponent } from './dashboard/dashboard.component';
+import { ReferralsLinksComponent } from './links/links.component';
 import { CommonModule as NgCommonModule } from '@angular/common';
 import { CommonModule } from '../../../../common/common.module';
 import { RouterModule } from '@angular/router';
@@ -13,20 +13,22 @@ import { RouterModule } from '@angular/router';
  NgCommonModule,
  RouterModule,
  CommonModule,
- ModalsModule,
  MessengerModule
  ],
  declarations: [
  ReferralsComponent,
  ReferralsDashboardComponent,
+ ReferralsLinksComponent,
  ],
  exports: [
  ReferralsComponent,
  ReferralsDashboardComponent,
+ ReferralsLinksComponent,
  ],
  entryComponents: [
  ReferralsComponent,
  ReferralsDashboardComponent,
+ ReferralsLinksComponent,
  ],
 })
 export class ReferralsModule {