@textback/notification-widget 2.0.1-110396 → 2.0.1-13997

package/src/widget/components/tb-notification-button/skype.js

@@ -0,0 +1,47 @@
+import Button from './index.js';
+import icon from '../../icons/icon_skype.svg';
+import iconNew from '../../icons/icon_skype_new.svg';
+import iconCircle from '../../icons/icon_skype_circle.svg';
+
+import constants from '../../../sdk/utils/constants.js';
+
+class SkypeButton extends Button {
+    render() {
+        super.render();
+        
+        const link = this.element.querySelector('a');
+        link.addEventListener('click', (event) => {
+            event.preventDefault();
+            this.channelAPI.subscribe();
+        });
+    }
+    
+    get template() {
+        if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
+            return `
+                <a target="_blank" href="https://join.skype.com/bot/${this.config.id}?add">
+                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('skype')}</tb-notification-button__text>
+                </a>
+            `;
+        } else if (this.config.markUp.style !== 'square') {
+            return `
+                <a target="_blank" href="https://join.skype.com/bot/${this.config.id}?add">
+                    <tb-notification-button__icon>${(this.config.markUp.style === 'rounded' ? icon : iconCircle )}</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('skype')}</tb-notification-button__text>
+                </a>
+            `;
+        } else {
+            return `
+                <div class="tb-notification-button__inner">
+                    <tb-notification-button__icon>${iconNew}</tb-notification-button__icon> 
+                    <a target="_blank" href="https://join.skype.com/bot/${this.config.id}?add">
+                        <tb-notification-button__text>${this.text('sign-skype')}</tb-notification-button__text>
+                    </a>
+                </div>
+            `;
+        }
+    }
+};
+
+module.exports = SkypeButton;

package/src/widget/components/tb-notification-button/styles.scss

@@ -1,21 +1,9 @@
 $color-fb: #3b5998;
-$color-fb-gradient: #6077a6;
-
-$color-vk: #4a76a8;
-$color-vk-gradient: #0f65c6;
-
-$color-tg: #61A8DE;
-$color-tg-gradient:#408AC2;
-
+$color-vk: #45668e;
+$color-tg: #1E96C8;
 $color-skype: #00aff0;
-$color-skype-gradient:#00d0e7;
-
-$color-viber: #574e92;
-$color-viber-gradient:#655bab;
-
-$color-whatsapp: #25D366;
-$color-whatsappb: #25D366;
-$color-whatsapp-gradient:#2fc368;
+$color-viber: #59267c;
+$color-whatsapp: #189d0e;
 
 @mixin shadow-on-hover() {
   transition: box-shadow 0.4s;
@@ -25,14 +13,6 @@ $color-whatsapp-gradient:#2fc368;
   }
 }
 
-@mixin shadow-on-hover-gradient() {
-  transition: box-shadow 0.4s;
-
-  &:hover {
-    box-shadow:inset 0 0 3px 3px rgba(0, 0, 0, 0.4);
-  }
-}
-
 @mixin set-channel-button-brand-color($color) {
   .tb-notification-button__inner > a {
     background-color: $color;
@@ -43,9 +23,6 @@ $color-whatsapp-gradient:#2fc368;
   }
 }
 
-@mixin set-channel-button-brand-linear-gradient-color($color, $color-gradient) {
-  background: linear-gradient(309.02deg, $color -6.45%, $color-gradient 111.08%);
-}
 
 tb-notification-widget {
   #tb-notification-widget-inner.tb-notification-widget-inner {
@@ -75,7 +52,7 @@ tb-notification-widget {
       text-align: right;
     }
   }
-
+  
   /* new design */
 
   #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
@@ -86,7 +63,6 @@ tb-notification-widget {
       margin: 0px 0px 20px;
       padding: 0px;
       background-color: transparent;
-      height: 30px;
 
 
 
@@ -105,7 +81,7 @@ tb-notification-widget {
           @include shadow-on-hover();
         }
       }
-
+      
       &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
         display: none;
       }
@@ -116,7 +92,7 @@ tb-notification-widget {
           background-color: $color-viber;
         }
       }
-
+      
       &[channel="tg"] {
         @include set-channel-button-brand-color($color-tg);
       }
@@ -126,13 +102,7 @@ tb-notification-widget {
           background-color: $color-whatsapp;
         }
       }
-
-      &[channel="whatsappb"] {
-        .tb-notification-button__inner > a {
-          background-color: $color-whatsappb;
-        }
-      }
-
+      
       &[loading] {
         color: transparent;
         &:after {
@@ -166,7 +136,7 @@ tb-notification-widget {
           all: initial;
           display: block;
           box-sizing: content-box;
-          border-radius: 4px;
+          border-radius: 2px;
           cursor: pointer;
           color: #fff;
           position: relative;
@@ -208,7 +178,7 @@ tb-notification-widget {
 
   /* old design */
   #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-rounded {
-
+    
     /* inline */
     tb-notification-button {
       @include shadow-on-hover();
@@ -222,7 +192,7 @@ tb-notification-widget {
       display: inline-block;
       margin: 0 13px 45px 0;
       position: relative;
-
+      
       &[channel="skype"] {
         background-color: $color-skype;
       }
@@ -244,9 +214,6 @@ tb-notification-widget {
       &[channel="whatsapp"] {
         background-color: $color-whatsapp;
       }
-      &[channel="whatsappb"] {
-        background-color: $color-whatsappb;
-      }
       &[loading] {
         color: transparent;
         &:after {
@@ -346,158 +313,12 @@ tb-notification-widget {
     }
   }
 
-  /* old design */
-  #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient {
 
-    /* inline */
-    tb-notification-button {
-      @include shadow-on-hover-gradient();
-
-      box-sizing: content-box;
-      padding: 21px 36px;
-      border-radius: 5px;
-      cursor: pointer;
-      background-color: #2979FF;
-      color: #fff;
-      display: inline-block;
-      margin: 0 13px 45px 0;
-      position: relative;
-
-      &[channel="skype"] {
-        @include set-channel-button-brand-linear-gradient-color($color-skype, $color-skype-gradient);
-      }
-      &[channel="facebook"] {
-        @include set-channel-button-brand-linear-gradient-color($color-fb, $color-fb-gradient);
-      }
-      &[channel="vk"] {
-        @include set-channel-button-brand-linear-gradient-color($color-vk, $color-vk-gradient);
-        padding: 19px 36px;
-      }
-      &[authorized="true"] tb-notification-button__text[for="login"], &[authorized="false"] tb-notification-button__text[for="subscribe"] {
-        display: none;
-      }
-      &[channel="viber"] {
-        @include set-channel-button-brand-linear-gradient-color($color-viber, $color-viber-gradient);
-      }
-      &[channel="tg"] {
-        @include set-channel-button-brand-linear-gradient-color($color-tg, $color-tg-gradient);
-      }
-      &[channel="whatsapp"] {
-        @include set-channel-button-brand-linear-gradient-color($color-whatsapp, $color-whatsapp-gradient);
-      }
-      &[channel="whatsappb"] {
-        @include set-channel-button-brand-linear-gradient-color($color-whatsappb, $color-whatsapp-gradient);
-      }
-      &[loading] {
-        color: transparent;
-        &:after {
-          content: "";
-          border-radius: 100%;
-          border: 3px solid #fff;
-          border-bottom-color: transparent;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 16px;
-          height: 16px;
-          margin: -11px 0 0 -11px;
-          animation-name: spin;
-          animation-duration: 1000ms;
-          animation-iteration-count: infinite;
-        }
-      }
-      > a {
-        all: initial;
-        display: block;
-        text-decoration: none;
-        color: #fff;
-        font-family: inherit;
-        //font-size: 17px;
-        margin: -10px -20px;
-        //padding: 10px 20px;
-        text-decoration: none !important;
-
-        padding: 6px 30px 8px;
-        min-width: 110px;
-        text-align: center;
-        font-size: 15px;
-
-        &:hover {
-          color: #fff;
-        }
-      }
-
-      &[channel="viber"] tb-notification-button__icon {
-        > svg {
-          width: 110%;
-          height: 110%;
-        }
-      }
-    }
-
-    tb-notification-button__text {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    tb-notification-button__icon {
-      display: inline-block;
-      vertical-align: middle;
-      //width: 40px;
-      //height: 40px;
-      width: 30px;
-      height: 30px;
-      margin: -10px 0 -10px -15px;
-      > svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  &.tb-no-api-call #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-gradient tb-notification-button {
-    margin-bottom: 13px;
-  }
-
-  /* popup */
-  #tb-notification-widget-inner.tb-notification-widget-inner tb-notification-widget-overlay .tb-widget-buttons.tb-btn-style-gradient {
-    tb-notification-button {
-      display: inline-block;
-      width: 120px;
-      height: 24px;
-      padding: 0px;
-      margin: 0px 0px 18px 0px;
-
-      > a {
-        position: relative;
-        text-align: center;
-        font-size: 12px;
-        padding: 5px 20px;
-        margin: 0px;
-      }
-    }
-    tb-notification-button__icon {
-      display: block;
-      position: absolute;
-      left: 8px;
-      top: 2px;
-      width: 20px;
-      height: 20px;
-      margin: 0px;
-      padding: 0px;
-    }
-    tb-notification-button__text {
-      vertical-align: baseline;
-      width: 60px;
-      text-align: center;
-      color: #fff;
-    }
-  }
 
 
   /* circle icons design */
   #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-icons {
-
+    
     /* inline */
     tb-notification-button {
       display: inline-block;
@@ -535,29 +356,13 @@ tb-notification-widget {
 
         min-width: 80px;
         text-align: center;
-        font-size: 15px;
+        font-size: 13px;
         color: #333;
 
         &:hover {
           cursor: pointer;
         }
       }
-
-      &[channel="whatsappb"] tb-notification-button__icon, &[channel="whatsapp"] tb-notification-button__icon {
-        background: $color-whatsapp;
-      }
-
-      &[channel="viber"] tb-notification-button__icon {
-        background: $color-viber;
-      }
-
-      &[channel="tg"] tb-notification-button__icon {
-        background: $color-tg;
-      }
-
-      &[channel="facebook"] tb-notification-button__icon {
-        background: $color-fb;
-      }
     }
 
     tb-notification-button__text {
@@ -567,42 +372,19 @@ tb-notification-widget {
 
     tb-notification-button__icon {
       display: block;
-      position: relative;
       width: 50px;
       height: 50px;
-      margin: 0 auto;
-      transition: all .3s ease;
-      border-radius: 50%;
-      box-shadow: 0 6px 12px rgba(0,0,0,.25);
+      margin: 0px auto;
       > svg {
         width: 100%;
         height: 100%;
       }
-
-      &[channel="whatsappb"] svg {
-        display: block;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        margin: auto;
-        width: 50%;
-        height: 50%;
-      }
-
-      &:hover {
-        -webkit-transform: scale(1.3);
-        -ms-transform: scale(1.3);
-        transform: scale(1.3);
-      }
-     }
     }
   }
 
   /*styles for non mobile*/
   @media only screen and (min-device-width: 736px) {
-
+    
     /* new design */
 
     #tb-notification-widget-inner.tb-notification-widget-inner .tb-widget-buttons.tb-btn-style-square {
@@ -648,10 +430,4 @@ tb-notification-widget {
       }
     }
   }
-
-  // Dirty crutch. There is no other way now *'(
-  tb-notification-widget-popup.tb-popup-with-image .tb-widget-buttons > div:last-child {
-    tb-notification-button {
-      margin-bottom: 0 !important;
-    }
-  }
+}

package/src/widget/components/tb-notification-button/telegram.js

@@ -1,55 +1,48 @@
-import Button from './index.js';
-import icon from '../../icons/icon_tg.svg';
-import iconCircle from '../../icons/icon_tg_circle.svg';
-import constants from '../../../sdk/utils/constants.js';
-
-class TelegramButton extends Button {
-    render() {
-        super.render();
-
-        const link = this.element.querySelector('a');
-        link.addEventListener('click', (event) => {
-            event.preventDefault();
-            this.channelAPI.subscribe();
-        });
-    }
-
-    get template() {
-        if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
-            return `
-                <a target="_blank" href="https://telegram.me/${this.config.id}?start=${this.deepLink}">
-                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
-                    <tb-notification-button__text>${this.text('telegram')}</tb-notification-button__text>
-                </a>
-                <p class="tb-notification-button__tip">
-                    ${this.text('telegramTip')}
-                </p>
-            `;
-        } else if(this.config.markUp.style === 'gradient') {
-            return `
-                <a target="_blank" href="https://telegram.me/${this.config.id}?start=${this.deepLink}">
-                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
-                    <tb-notification-button__text>${this.text('telegram')}</tb-notification-button__text>
-                </a>
-            `;
-        } else if (this.config.markUp.style !== 'square') {
-            return `
-                <a target="_blank" href="https://telegram.me/${this.config.id}?start=${this.deepLink}">
-                    <tb-notification-button__icon>${ (this.config.markUp.style === 'rounded' ? icon : iconCircle) }</tb-notification-button__icon> 
-                    <tb-notification-button__text>${this.text('telegram')}</tb-notification-button__text>
-                </a>
-            `;
-        } else {
-            return `
-                <div class="tb-notification-button__inner">
-                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
-                    <a target="_blank" href="https://telegram.me/${this.config.id}?start=${this.deepLink}">
-                        <tb-notification-button__text>${this.text('telegramExtended')}</tb-notification-button__text>
-                    </a>
-                </div>
-            `;
-        }
-    }
-};
-
-module.exports = TelegramButton;
+import Button from './index.js';
+import icon from '../../icons/icon_tg.svg';
+import iconCircle from '../../icons/icon_tg_circle.svg';
+import constants from '../../../sdk/utils/constants.js';
+
+class TelegramButton extends Button {
+    render() {
+        super.render();
+
+        const link = this.element.querySelector('a');
+        link.addEventListener('click', (event) => {
+            event.preventDefault();
+            this.channelAPI.subscribe();
+        });
+    }
+
+    get template() {
+        if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
+            return `
+                <a target="_blank" href="https://telegram.me/${this.config.id}?start=${this.deepLink}">
+                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('telegram')}</tb-notification-button__text>
+                </a>
+                <p class="tb-notification-button__tip">
+                    ${this.text('telegram_tip')}
+                </p>
+            `;
+        } else if (this.config.markUp.style !== 'square') {
+            return `
+                <a target="_blank" href="https://telegram.me/${this.config.id}?start=${this.deepLink}">
+                    <tb-notification-button__icon>${ (this.config.markUp.style === 'rounded' ? icon : iconCircle) }</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('telegram')}</tb-notification-button__text>
+                </a>
+            `;
+        } else {
+            return `
+                <div class="tb-notification-button__inner">
+                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
+                    <a target="_blank" href="https://telegram.me/${this.config.id}?start=${this.deepLink}">
+                        <tb-notification-button__text>${this.text('sign-telegram')}</tb-notification-button__text>
+                    </a>
+                </div>
+            `;
+        }
+    }
+};
+
+module.exports = TelegramButton;

package/src/widget/components/tb-notification-button/viber.js

@@ -1,57 +1,50 @@
-import Button from './index.js';
-import icon from '../../icons/icon_viber.svg';
-import iconNew from '../../icons/icon_viber_new.svg';
-import iconCircle from '../../icons/icon_viber_circle.svg';
-import constants from '../../../sdk/utils/constants.js';
-
-class ViberButton extends Button {
-    render() {
-        super.render();
-        
-        const link = this.element.querySelector('a');
-        link.addEventListener('click', (event) => {
-            event.preventDefault();
-            this.channelAPI.subscribe();
-        });
-    }
-    
-    get template() {
-        if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
-            return `
-                <a target="_blank" href="viber://pa?chatURI=${this.config.id}&context=${this.deepLink}">
-                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
-                    <tb-notification-button__text>${this.text('viber')}</tb-notification-button__text>
-                </a>
-                <p class="tb-notification-button__tip">
-                    ${this.text('viberTip')}
-                </p>
-            `;
-        } else if(this.config.markUp.style === 'gradient') {
-            return `
-                <a target="_blank" href="viber://pa?chatURI=${this.config.id}&context=${this.deepLink}">
-                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
-                    <tb-notification-button__text>${this.text('viber')}</tb-notification-button__text>
-                </a>
-            `;
-        } else if (this.config.markUp.style !== 'square') {
-            return `
-                <a target="_blank" href="viber://pa?chatURI=${this.config.id}&context=${this.deepLink}">
-                    <tb-notification-button__icon>${( this.config.markUp.style === 'rounded' ? icon : iconCircle )}</tb-notification-button__icon> 
-                    <tb-notification-button__text>${this.text('viber')}</tb-notification-button__text>
-                </a>
-            `;
-        } else {
-            return `
-                <div class="tb-notification-button__inner">
-                    <tb-notification-button__icon>${iconNew}</tb-notification-button__icon> 
-                    <a target="_blank" href="viber://pa?chatURI=${this.config.id}&context=${this.deepLink}">
-                        <tb-notification-button__text>${this.text('viberExtended')}</tb-notification-button__text>
-                    </a>
-                </div>
-            `;
-        }
-        
-    }
-};
-
+import Button from './index.js';
+import icon from '../../icons/icon_viber.svg';
+import iconNew from '../../icons/icon_viber_new.svg';
+import iconCircle from '../../icons/icon_viber_circle.svg';
+import constants from '../../../sdk/utils/constants.js';
+
+class ViberButton extends Button {
+    render() {
+        super.render();
+        
+        const link = this.element.querySelector('a');
+        link.addEventListener('click', (event) => {
+            event.preventDefault();
+            this.channelAPI.subscribe();
+        });
+    }
+    
+    get template() {
+        if (this.config.type === constants.WIDGET_TYPE_API_CALL) {
+            return `
+                <a target="_blank" href="viber://pa?chatURI=${this.config.id}&context=${this.deepLink}">
+                    <tb-notification-button__icon>${icon}</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('viber')}</tb-notification-button__text>
+                </a>
+                <p class="tb-notification-button__tip">
+                    ${this.text('viber_tip')}
+                </p>
+            `;
+        } else if (this.config.markUp.style !== 'square') {
+            return `
+                <a target="_blank" href="viber://pa?chatURI=${this.config.id}&context=${this.deepLink}">
+                    <tb-notification-button__icon>${( this.config.markUp.style === 'rounded' ? icon : iconCircle )}</tb-notification-button__icon> 
+                    <tb-notification-button__text>${this.text('viber')}</tb-notification-button__text>
+                </a>
+            `;
+        } else {
+            return `
+                <div class="tb-notification-button__inner">
+                    <tb-notification-button__icon>${iconNew}</tb-notification-button__icon> 
+                    <a target="_blank" href="viber://pa?chatURI=${this.config.id}&context=${this.deepLink}">
+                        <tb-notification-button__text>${this.text('sign-viber')}</tb-notification-button__text>
+                    </a>
+                </div>
+            `;
+        }
+        
+    }
+};
+
 module.exports = ViberButton;