Merge pull request #559 from MurhafSousli/dev

Utilise CSS variable and simplify themes structure

Author: MurhafSousli

CHANGELOG.MD

@@ -1,5 +1,33 @@
 # Changelog
 
+## 9.0.0
+
+### Breaking changes
+
+- refactor(button, buttons, popup): The input `[size]` has been removed from all share components and global options, you can change the size of a button using the CSS variable `--sb-font-size`, in [843940e](https://github.com/MurhafSousli/ngx-sharebuttons/pull/559/commits/843940ec5e115a55092f8233cd74d8f3cc96fdc0).
+- refactor(button, buttons, popup): light and dark themes files has been merged into a single file, example:
+
+#### Example:
+
+**before:**
+
+```scss
+// To import 'material-light-theme', the light theme from the following path:
+@import "~ngx-sharebuttons/themes/material/material-light-theme";
+// To import 'material-dark-theme', the dark theme from the following path:
+@import "~ngx-sharebuttons/themes/material/material-dark-theme";
+```
+
+**after:**
+
+```scss
+// Light or dark theme is imported from the same file
+@import "~ngx-sharebuttons/themes/material";
+```
+
+- feat(button, buttons, popup): Add CSS variables, closes [#549](https://github.com/MurhafSousli/ngx-sharebuttons/issues/549) in [5c575d3](https://github.com/MurhafSousli/ngx-sharebuttons/pull/559/commits/5c575d3207a3aaed384ecd5f62520dc08b266f34).
+- fix(popup): Fix text styles in pop up button component, closes [#516](https://github.com/MurhafSousli/ngx-sharebuttons/issues/516) in [c6bbf53](https://github.com/MurhafSousli/ngx-sharebuttons/pull/559/commits/c6bbf53a4831f8303ba7baac5affd1512d948352).
+
 ## 8.1.0
 
 - Upgrade to Angular 12

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016-2020 Murhaf Sousli
+Copyright (c) 2016-2021 Murhaf Sousli
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

projects/ngx-sharebuttons-demo/src/app/pages/button-c/button-c.component.ts

@@ -21,7 +21,7 @@ export class ButtonCComponent implements OnInit {
     name: '<share-button>',
     npm: `npm i ngx-sharebuttons
 npm i @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons`,
-    styles: `@import '~ngx-sharebuttons/button/themes/default/default-theme';`,
+    styles: `@import '~ngx-sharebuttons/button/themes/default';`,
     examples: `<share-button button="facebook" text="Share" [showText]="true"></share-button>
 <share-button button="twitter" text="Tweet" [showText]="true"></share-button>
 <share-button button="pinterest" text="pin"></share-button>`,

projects/ngx-sharebuttons-demo/src/app/pages/buttons-c/buttons-c.component.scss

@@ -1,23 +0,0 @@
-
-//.share-container {
-//  display: flex;
-//  align-items: center;
-//  margin: 1rem 0;
-//  .share-count {
-//    display: flex;
-//    flex-direction: column;
-//    align-items: center;
-//    padding-right: 1rem;
-//    margin-right: 1rem;
-//    border-right: 2px solid $output-color;
-//    h3 {
-//      display: flex;
-//      flex-direction: column-reverse;
-//      font-size: 2.5rem;
-//      margin: 0;
-//    }
-//    b {
-//      font-size: .7rem;
-//    }
-//  }
-//}

projects/ngx-sharebuttons-demo/src/app/pages/buttons-c/buttons-c.component.ts

@@ -17,7 +17,7 @@ export class ButtonsCComponent implements OnInit {
   code = {
     name: '<share-buttons>',
     example: '<share-buttons show="11"></share-buttons>',
-    styles: `@import '~ngx-sharebuttons/themes/default/default-theme';`,
+    styles: `@import '~ngx-sharebuttons/themes/default';`,
     npm: `npm i ngx-sharebuttons @angular/cdk
 npm i @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons`,
     import: `import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';

projects/ngx-sharebuttons-demo/src/app/pages/popup-buttons/popup-buttons.component.html

@@ -60,7 +60,7 @@ <h4>NPM</h4>
 
       <mat-card>
         <mat-card-content>
-          <lab component="share-popup-button"></lab>
+          <lab component="popup-buttons"></lab>
         </mat-card-content>
       </mat-card>
     </section>

projects/ngx-sharebuttons-demo/src/app/pages/popup-buttons/popup-buttons.component.ts

@@ -19,7 +19,7 @@ export class PopupButtonsComponent implements OnInit {
     name: '<share-popup-button>, <button shareButtonsPopup>',
     example: '<share-popup-button>Share</share-popup-button>',
     styles: `@import '~@angular/cdk/overlay-prebuilt.css'; /** Add this only for non-material project */
-@import '~ngx-sharebuttons/themes/default/default-theme';`,
+@import '~ngx-sharebuttons/themes/default';`,
     npm: `npm i ngx-sharebuttons @angular/cdk
 npm i @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons`,
     import: `import { ShareButtonsPopupModule } from 'ngx-sharebuttons/popup';

projects/ngx-sharebuttons-demo/src/app/pages/styling/styling.component.html

@@ -5,6 +5,16 @@ <h1>Styling Guide</h1>
 
   <div class="page-content container">
 
+    <section>
+      <section-title>Styling using CSS variables</section-title>
+
+      <p>Here are a list of the CSS variables you can use to change main styles:</p>
+
+      <hl-code [code]="cssVariables" [height]="400"></hl-code>
+
+      <p>If you still need to change other CSS rules, see the classes in the next section.</p>
+    </section>
+
     <section>
       <section-title>Create custom theme</section-title>
       <p>There are several classes to help you adjust your custom styles</p>

projects/ngx-sharebuttons-demo/src/app/pages/styling/styling.component.ts

@@ -16,8 +16,6 @@ export class StylingComponent implements OnInit {
   stylingCode = `.sb-moon-theme {
   // share button wrapper
   .sb-wrapper {
-    // You can get default button color using the CSS variable
-    background-color: var(--button-color);
     // Content wrapper
     .sb-content {
       // Icon wrapper
@@ -29,7 +27,7 @@ export class StylingComponent implements OnInit {
     }
 
     // For conditional styles
-    // E.g. Apply when icon, text are shown
+    // E.g. Apply only when icon, text are shown
     &.sb-show-icon.sb-show-text {
        // Icon wrapper
       .sb-icon {
@@ -41,6 +39,22 @@ export class StylingComponent implements OnInit {
   }
 }`;
 
+  cssVariables = `--sb-margin
+--sb-min-width
+--sb-height
+--sb-color
+--sb-background
+--sb-font-size
+--sb-icon-size
+--sb-padding
+--sb-text-padding
+--sb-border
+--sb-border-radius
+--sb-line-height
+--sb-text-shadow
+--sb-font-weight
+--sb-overflow`;
+
   constructor(private titleService: Title) {
   }
 

projects/ngx-sharebuttons-demo/src/app/pages/themes/themes.component.html

@@ -4,7 +4,6 @@ <h1>Themes</h1>
   </header>
 
   <div class="page-content container">
-
     <section>
       <section-title> Icons only </section-title>
       <share-buttons [theme]="theme" show="5" size="-1"></share-buttons>
@@ -15,18 +14,7 @@ <h1>Themes</h1>
       <share-buttons [theme]="theme" showText="true" show="5" size="-1"></share-buttons>
     </section>
 
-    <section>
-      <section-title> Icons + names + counts </section-title>
-      <share-buttons [theme]="theme" url="http://twitter.com/" showText="true" showCount="true" show="5" size="-1"></share-buttons>
-    </section>
-
-    <section>
-      <section-title> Icons + counts </section-title>
-      <share-buttons [theme]="theme" url="http://twitter.com/" showCount="true" show="5" size="-1"></share-buttons>
-    </section>
-
     <theme-switcher (themeChange)="theme = $event"></theme-switcher>
-
   </div>
 
   <footer></footer>