Skip to content

Commit 7323734

Browse files
lokesh-coderlokesh-coder
authored
chore: merge with master
2 parents 6120384 + 1185cde commit 7323734

24 files changed

+353
-202
lines changed

‎docs/app/app.component.html‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="container">
33
<div class="row">
44
<div class="col-md-8 mx-auto">
5-
<div class="brand d-flex flex-column justify-center align-items-center mt-5 mb-3">
5+
<div class="brand d-flex flex-column justify-center align-items-center mt-5">
66
<img src="./assets/toppy-logo.png" alt="Toppy" width="100" />
77
<p class="text-center mt-3">
88
Toppy is a tiny library to create overlays for Angular applications. Overlays are used in
@@ -11,40 +11,46 @@
1111
<span>popovers</span> etc
1212
</p>
1313
</div>
14-
<div class="badges d-flex align-items-center my-3 justify-content-center">
14+
<div class="badges d-flex align-items-center mb-3 justify-content-center">
1515
<!-- <div class="badge"><img src="https://badgen.net/badge/Angular/7.x/1b95e0" alt="" /></div> -->
1616
<div class="badge">
17-
<img
18-
src="https://img.shields.io/npm/v/toppy.svg?style=popout-square&colorA=00bcd4&colorB=7d61af&label=&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxwYXRoIGQ9Ik0wIDcuMzM0djhoNi42NjZ2MS4zMzJIMTJ2LTEuMzMyaDEydi04SDB6bTYuNjY2IDYuNjY0SDUuMzM0di00SDMuOTk5djRIMS4zMzVWOC42NjdoNS4zMzF2NS4zMzF6bTQgMHYxLjMzNkg4LjAwMVY4LjY2N2g1LjMzNHY1LjMzMmgtMi42Njl2LS4wMDF6bTEyLjAwMSAwaC0xLjMzdi00aC0xLjMzNnY0aC0xLjMzNXYtNGgtMS4zM3Y0aC0yLjY3MVY4LjY2N2g4LjAwMnY1LjMzMXoiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEwLjY2NSAxMEgxMnYyLjY2N2gtMS4zMzVWMTB6IiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg=="
19-
alt=""
20-
/>
17+
<a href="https://www.npmjs.com/package/toppy" target="_blank">
18+
<img
19+
src="https://img.shields.io/npm/v/toppy.svg?style=popout-square&colorA=585c6d&colorB=585c6d&label=&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxwYXRoIGQ9Ik0wIDcuMzM0djhoNi42NjZ2MS4zMzJIMTJ2LTEuMzMyaDEydi04SDB6bTYuNjY2IDYuNjY0SDUuMzM0di00SDMuOTk5djRIMS4zMzVWOC42NjdoNS4zMzF2NS4zMzF6bTQgMHYxLjMzNkg4LjAwMVY4LjY2N2g1LjMzNHY1LjMzMmgtMi42Njl2LS4wMDF6bTEyLjAwMSAwaC0xLjMzdi00aC0xLjMzNnY0aC0xLjMzNXYtNGgtMS4zM3Y0aC0yLjY3MVY4LjY2N2g4LjAwMnY1LjMzMXoiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEwLjY2NSAxMEgxMnYyLjY2N2gtMS4zMzVWMTB6IiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg=="
20+
alt=""
21+
/></a>
2122
</div>
2223
<div class="badge">
23-
<img
24-
src="https://img.shields.io/npm/dt/toppy.svg?style=flat-square&colorA=00bcd4&colorB=7d61af&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1kb3dubG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiPjwvcGF0aD48cG9seWxpbmUgcG9pbnRzPSI3IDEwIDEyIDE1IDE3IDEwIj48L3BvbHlsaW5lPjxsaW5lIHgxPSIxMiIgeTE9IjE1IiB4Mj0iMTIiIHkyPSIzIj48L2xpbmU+PC9zdmc+&label="
25-
alt=""
26-
/>
24+
<a href="https://www.npmtrends.com/toppy" target="_blank">
25+
<img
26+
src="https://img.shields.io/npm/dt/toppy.svg?style=flat&colorA=585c6d&colorB=585c6d&logo=data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1kb3dubG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiPjwvcGF0aD48cG9seWxpbmUgcG9pbnRzPSI3IDEwIDEyIDE1IDE3IDEwIj48L3BvbHlsaW5lPjxsaW5lIHgxPSIxMiIgeTE9IjE1IiB4Mj0iMTIiIHkyPSIzIj48L2xpbmU+PC9zdmc+&label="
27+
alt=""
28+
/>
29+
</a>
2730
</div>
2831
<div class="badge">
29-
<img
30-
src="https://img.shields.io/github/stars/lokesh-coder/toppy.svg?style=flat-square&colorA=00bcd4&colorB=7d61af&label=&logo=github&logoColor=fff"
31-
alt=""
32-
/>
32+
<a href="https://github.com/lokesh-coder/toppy" target="_blank">
33+
<img
34+
src="https://img.shields.io/github/stars/lokesh-coder/toppy.svg?style=flat&colorA=585c6d&colorB=585c6d&label=&logo=github&logoColor=fff"
35+
alt=""
36+
/>
37+
</a>
3338
</div>
3439
<div class="badge">
35-
<img
36-
src="https://img.shields.io/codecov/c/github/lokesh-coder/toppy/master.svg?style=flat-square&colorA=00bcd4&colorB=7d61af&label=&logo=codecov&logoColor=fff"
37-
alt=""
38-
/>
40+
<a href="https://codecov.io/gh/lokesh-coder/toppy" target="_blank">
41+
<img
42+
src="https://img.shields.io/codecov/c/github/lokesh-coder/toppy/master.svg?style=flat&colorA=585c6d&colorB=585c6d&label=&logo=codecov&logoColor=fff"
43+
alt=""
44+
/>
45+
</a>
3946
</div>
4047
<div class="badge">
4148
<img
42-
src="https://img.shields.io/badge/share-tweet-aaa.svg?style=flat-square&colorA=00bcd4&colorB=7d61af&label=&logo=twitter&logoColor=fff"
49+
src="https://img.shields.io/badge/share-tweet-aaa.svg?style=flat&colorA=585c6d&colorB=585c6d&label=&logo=twitter&logoColor=fff"
4350
(click)="tweet($event)"
4451
alt=""
4552
/>
4653
</div>
47-
4854
<!--
4955
<div class="badge">
5056
<select
@@ -105,18 +111,8 @@
105111
>
106112
</li>
107113
<li>
108-
<a (click)="scrollTo('contribution')" [ngClass]="{ active: currentSection === 'contribution' }"
109-
><span class="toppy-icon icon-users"></span> Contribution</a
110-
>
111-
</li>
112-
<li>
113-
<a (click)="scrollTo('credits')" [ngClass]="{ active: currentSection === 'credits' }"
114-
><span class="toppy-icon icon-hash"></span> Credits</a
115-
>
116-
</li>
117-
<li>
118-
<a (click)="scrollTo('issues')" [ngClass]="{ active: currentSection === 'issues' }"
119-
><span class="toppy-icon icon-help"></span> Issues</a
114+
<a (click)="scrollTo('more')" [ngClass]="{ active: currentSection === 'more' }"
115+
><span class="toppy-icon icon-hash"></span> More</a
120116
>
121117
</li>
122118
</ul>
@@ -129,3 +125,6 @@
129125
</div>
130126
</div>
131127
</div>
128+
<div class="footer">
129+
<div class="text-center"><img src="./assets/lo-logo.png" alt="Lokesh Logo" width="60" /></div>
130+
</div>

‎docs/app/app.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { HttpClient } from '@angular/common/http';
22
import { Component, ElementRef, ViewChild } from '@angular/core';
33
import { fromEvent } from 'rxjs';
4+
import { TOPPY_VERSION } from '../environments/version';
45
// import { Toppy } from 'toppy';
56
import { code } from './codes';
67

@@ -13,6 +14,7 @@ export class AppComponent {
1314
versions = [];
1415
title = 'toppy-app';
1516
selectedVersion = '';
17+
currentVersion = TOPPY_VERSION;
1618
@ViewChild('el', { read: ElementRef })
1719
el: ElementRef;
1820
ins;

‎docs/app/examples/relative-position-example/relative-position-example.component.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ export class RelativePositionExampleComponent implements OnInit {
3838
new RelativePosition({
3939
placement: this.selectedPlacement,
4040
src: this.targetEl.nativeElement,
41-
width: 'auto',
4241
autoUpdate: true
4342
})
4443
)

‎docs/app/utils/content/content.component.html‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ <h5 id="fullscreen-position"><a href="#fullscreen-position">Fullscreen position<
121121
<pre><code class="hljs language-typescript"><span class="hljs-keyword">new</span> FullscreenPosition();
122122
</code></pre>
123123
<h3 id="communication"><a href="#communication"><span class="toppy-icon icon-rss"></span> Communication</a></h3>
124-
<h4 id="component-data"><a href="#component-data">Component Data</a></h4>
124+
<h5 id="component-data"><a href="#component-data">Component Data</a></h5>
125125
<p>When you host a component, you can control the overlay through <code>ToppyOverlay</code> service. Using this service you can access all properties that is provided in content. Also the properties comes with <code>close</code>.</p>
126126
<pre><code class="hljs language-typescript"><span class="hljs-keyword">this</span>.overlay = <span class="hljs-keyword">this</span>._toppy
127127
.position(position)
@@ -142,7 +142,7 @@ <h4 id="component-data"><a href="#component-data">Component Data</a></h4>
142142
&#125;
143143
&#125;
144144
</code></pre>
145-
<h4 id="template-data"><a href="#template-data">Template Data</a></h4>
145+
<h5 id="template-data"><a href="#template-data">Template Data</a></h5>
146146
<p>This is very similar to above one. When you use template as a content, you can pass additional data to it.</p>
147147
<pre><code class="hljs language-typescript"><span class="hljs-keyword">this</span>.overlay = <span class="hljs-keyword">this</span>._toppy
148148
.position(position)
@@ -156,7 +156,7 @@ <h4 id="template-data"><a href="#template-data">Template Data</a></h4>
156156
<span class="hljs-tag">&#x3C;/<span class="hljs-name">ng-template</span>></span>
157157
</code></pre>
158158
<p>Method <code>close</code> is automatically binded.</p>
159-
<h4 id="plain-text"><a href="#plain-text">Plain text</a></h4>
159+
<h5 id="plain-text"><a href="#plain-text">Plain text</a></h5>
160160
<p>When you use Plain text as a content, optionally you can able to set a class name to that <code>div</code> block.</p>
161161
<pre><code class="hljs language-typescript"><span class="hljs-keyword">this</span>.overlay = <span class="hljs-keyword">this</span>._toppy
162162
.position(position)
@@ -362,11 +362,12 @@ <h3 id="api"><a href="#api"><span class="toppy-icon icon-file"></span> API</a></
362362
<pre><code class="hljs language-typescript">SlidePlacement.RIGHT;
363363
</code></pre>
364364
</div>
365-
<h3 id="contribution"><a href="#contribution"><span class="toppy-icon icon-users"></span> Contribution</a></h3>
366-
<p>Any kind of contributions ( Typo fix, documentation, code quality, performance, refactor, pipeline, etc., ) are welcome. :)</p>
367-
<h3 id="credits"><a href="#credits"><span class="toppy-icon icon-hash"></span> Credits</a></h3>
368-
<ul>
369-
<li>Icons from <a href="http://openmoji.org">openmoji</a></li>
370-
</ul>
371-
<h3 id="issues"><a href="#issues"><span class="toppy-icon icon-help"></span> Issues</a></h3>
372-
<p>Found a bug? Have some idea? Or do you have questions? File it <a href="https://github.com/lokesh-coder/toppy/issues">github issues</a></p>
365+
<h3 id="more"><a href="#more"><span class="toppy-icon icon-hash"></span> More</a></h3>
366+
<h5 id="contribution"><a href="#contribution">Contribution</a></h5>
367+
<p>Any kind of contributions ( Typo fix, documentation, code quality, performance, refactor, pipeline, etc., ) are welcome. 😊</p>
368+
<h5 id="credits"><a href="#credits">Credits</a></h5>
369+
<p>Icon imagess are from <a href="http://openmoji.org">openmoji</a></p>
370+
<h5 id="issues"><a href="#issues">Issues</a></h5>
371+
<p>Found a bug? Have some idea? Or do you have questions? File it in <a href="https://github.com/lokesh-coder/toppy/issues">github issues</a></p>
372+
<h5 id="license"><a href="#license">License</a></h5>
373+
<p>MIT</p><br>

‎docs/assets/lo-logo.png‎

1.12 KB
Loading

‎docs/markdown/main.md‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ new FullscreenPosition();
159159

160160
### [ ]{.toppy-icon .icon-rss} Communication
161161

162-
#### Component Data
162+
##### Component Data
163163

164164
When you host a component, you can control the overlay through `ToppyOverlay` service. Using this service you can access all properties that is provided in content. Also the properties comes with `close`.
165165

@@ -186,7 +186,7 @@ export class HelloComponent {
186186
}
187187
```
188188

189-
#### Template Data
189+
##### Template Data
190190

191191
This is very similar to above one. When you use template as a content, you can pass additional data to it.
192192

@@ -208,7 +208,7 @@ Then in your template you can refer the data like this,
208208

209209
Method `close` is automatically binded.
210210

211-
#### Plain text
211+
##### Plain text
212212

213213
When you use Plain text as a content, optionally you can able to set a class name to that `div` block.
214214

@@ -473,14 +473,22 @@ SlidePlacement.RIGHT;
473473

474474
</div>
475475

476-
### [ ]{.toppy-icon .icon-users} Contribution
476+
### [ ]{.toppy-icon .icon-hash} More
477477

478-
Any kind of contributions ( Typo fix, documentation, code quality, performance, refactor, pipeline, etc., ) are welcome. :)
478+
##### Contribution
479479

480-
### [ ]{.toppy-icon .icon-hash} Credits
480+
Any kind of contributions ( Typo fix, documentation, code quality, performance, refactor, pipeline, etc., ) are welcome. 😊
481481

482-
- Icons from [openmoji](http://openmoji.org)
482+
##### Credits
483483

484-
### [ ]{.toppy-icon .icon-help} Issues
484+
Icon imagess are from [openmoji](http://openmoji.org)
485485

486-
Found a bug? Have some idea? Or do you have questions? File it [github issues](https://github.com/lokesh-coder/toppy/issues)
486+
##### Issues
487+
488+
Found a bug? Have some idea? Or do you have questions? File it in [github issues](https://github.com/lokesh-coder/toppy/issues)
489+
490+
##### License
491+
492+
MIT
493+
494+
<br/>

‎docs/styles/_temp.scss‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,27 @@ td em {
9898
font-weight: 500;
9999
}
100100

101+
.version-btn {
102+
width: 60px;
103+
height: 21px;
104+
line-height: 1;
105+
background: #e99732;
106+
vertical-align: middle;
107+
display: flex;
108+
align-items: CENTER;
109+
justify-content: center;
110+
color: #fff;
111+
border-radius: 2px;
112+
font-weight: 500;
113+
cursor: pointer;
114+
text-decoration: none;
115+
&:hover {
116+
text-decoration: none;
117+
color: #7b501c;
118+
background: #ffb75f;
119+
}
120+
}
121+
101122
.hero {
102123
border-bottom: 2px solid #d1d0e0;
103124
}
@@ -239,7 +260,7 @@ ul.horizontal-list {
239260

240261
p > code {
241262
font-size: 11px;
242-
font-family: Roboto mono;
263+
font-family: 'Roboto mono';
243264
background: #3fc782;
244265
color: #ffffff;
245266
display: inline-block;
@@ -283,7 +304,6 @@ p > code {
283304
bottom: 0;
284305
/* background: red; */
285306
border: 0;
286-
border-top: 1px dashed #d2d5e6;
287307
}
288308
&:hover,
289309
&.active {
@@ -299,9 +319,22 @@ p > code {
299319
}
300320
}
301321

322+
ul li:not(:last-child) a:after {
323+
border-top: 1px dashed #d2d5e6;
324+
}
325+
302326
.sidebar-fixed .sidemenu {
303327
position: fixed;
304328
top: 0rem;
305329
width: 100%;
306330
max-width: 290px;
307331
}
332+
333+
.footer {
334+
padding: 4rem 0;
335+
opacity: 0.4;
336+
color: rgba(0, 0, 0, 0.5);
337+
span {
338+
color: #f44336;
339+
}
340+
}

‎projects/toppy/src/lib/models.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { TemplateRef } from '@angular/core';
22
import { ToppyPosition } from './position/position';
33

4-
export interface PositionCoOrds {
4+
export interface PositionMeta {
55
top?: number;
66
left?: number;
77
bottom?: number;
88
right?: number;
99
height?: number | string;
1010
width?: number | string;
1111
position?: string;
12+
extra?: string;
1213
}
1314

1415
enum p {

‎projects/toppy/src/lib/position/fullscreen-position.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import { PositionCoOrds } from '../models';
1+
import { PositionMeta } from '../models';
22
import { ToppyPosition } from './position';
33

44
export class FullscreenPosition extends ToppyPosition {
5-
constructor() {
6-
super();
7-
}
8-
getPositions(): PositionCoOrds {
5+
getPositions(): PositionMeta {
96
return { top: 0, left: 0, width: '100%', height: '100%', position: 'fixed' };
107
}
118
}

0 commit comments

Comments
 (0)