updates to watermark

angular · Jan 1, 2019 · b3af138 · b3af138
1 parent 631f2fd
commit b3af138
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git a/src/apps/demo-app/src/app/app.component.html b/src/apps/demo-app/src/app/app.component.html
@@ -30,5 +30,8 @@ <h2>Layout Demos: </h2>
 
 <div class="demo-content">
   <router-outlet></router-outlet>
-  <watermark fxHide fxShow.print></watermark>
+  <watermark
+      title="@angular/layout"
+      message="HTML Layouts w/ Flex and Grid CSS"
+      fxHide fxShow.print></watermark>
 </div>
diff --git a/src/apps/demo-app/src/app/app.module.ts b/src/apps/demo-app/src/app/app.module.ts
@@ -27,7 +27,7 @@ const EXTRA_BREAKPOINT = [{
     DemoMaterialModule,
     FlexLayoutModule.withConfig({
       useColumnBasisZero: false,
-      printWithBreakpoints: ['md', 'lt-lg', 'lt-xl', 'gt-sm', 'gt-xs']
+      // printWithBreakpoints: ['md', 'lt-lg', 'lt-xl', 'gt-sm', 'gt-xs']
     }),
   ],
   providers: [{provide: BREAKPOINT, useValue: EXTRA_BREAKPOINT, multi: true}],

diff --git a/src/apps/demo-app/src/app/watermark.component.ts b/src/apps/demo-app/src/app/watermark.component.ts
@@ -19,24 +19,37 @@ export class WatermarkComponent {
   /* tslint:disable:max-line-length */
   get backgroundImage() {
     const rawSVG = `
-    <svg id="diagonalWatermark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-             width="100%" height="100%">
-          <style type="text/css">text { fill: gray; font-family: Avenir, Arial, Helvetica, sans-serif;
-            opacity: 0.25; }
+       <svg id="diagonalWatermark" 
+         width="100%" height="100%"
+         xmlns="http://www.w3.org/2000/svg" 
+         xmlns:xlink="http://www.w3.org/1999/xlink" >
+          <style type="text/css">
+            rect {
+            	color : red;
+            }
+            text { 
+              fill: currentColor;
+              font-family: Avenir, Arial, Helvetica, sans-serif;
+              opacity: 0.25; 
+            }
           </style>
           <defs>
-            <pattern id="titlePattern" patternUnits="userSpaceOnUse" width="400" height="200">
-              <text y="30" font-size="40" id="title">${this.title}</text>
+            <pattern id="titlePattern" patternUnits="userSpaceOnUse" width="350" height="150">
+              <text y="30" font-size="30" id="title">
+               ${this.title}
+              </text>
             </pattern>
             <pattern xlink:href="#titlePattern">
-              <text y="120" x="200" font-size="30" id="message">${this.message}</text>
+              <text y="60" x="0" font-size="16" id="message" width="350" height="150">
+                ${this.message}
+              </text>
             </pattern>
-            <pattern id="combo" xlink:href="#titlePattern" patternTransform="rotate(-45)">
+            <pattern id="combo" xlink:href="#titlePattern" patternTransform="rotate(-30)">
               <use xlink:href="#title"/>
               <use xlink:href="#message"/>
             </pattern>
           </defs>
-          <rect width="100%" height="100%" fill="url(#combo)"/>
+          	<rect width="100%" height="100%" fill="url(#combo)"/>
         </svg>
     `;
     const bkgrndImageUrl = `data:image/svg+xml;base64,${window.btoa(rawSVG)}`;