Skip to content

Commit

Permalink
refactor: remove bootstrap dependency
Browse files Browse the repository at this point in the history
  • Loading branch information
sibiraj-s committed Feb 21, 2018
1 parent d2184ec commit 8aa0ffd
Show file tree
Hide file tree
Showing 11 changed files with 304 additions and 17 deletions.
12 changes: 7 additions & 5 deletions docs/additional-documentation/prerequisites.html
Original file line number Diff line number Diff line change
Expand Up @@ -377,12 +377,14 @@ <h1 id="prerequisites">Prerequisites</h1>
<h2 id="peer-dependencies">Peer Dependencies</h2>
<p>You must install all the following <code>peerDependencies</code> in order for `ngx-editor to work</p>
<ul>
<li><a href="https://codemirror.net/">CodeMirror</a></li>
<li><a href="https://fontawesome.com/v4.7.0/">FontAwesome</a></li>
<li><a href="https://getbootstrap.com/">Bootstrap</a></li>
<li><a href="https://valor-software.com/ngx-bootstrap/">NgxBootstrap</a></li>
<li><a href="https://codemirror.net/">CodeMirror</a> - Code Edit/Preview</li>
<li><a href="https://fontawesome.com/v4.7.0/">FontAwesome</a> - Toolbar icons</li>
<li><a href="https://valor-software.com/ngx-bootstrap/">NgxBootstrap</a> - Popover</li>
</ul>
<h2 id="note">Note</h2>
<ul>
<li><code>CodeMirror</code> and <code>ngx-bootstrap</code> are mandatory peerDependency which needs to be installed and there is no need for them to be imported.</li>
</ul>
<p><code>Bootstrap</code> is a temporary dependency and it will be removed sooner.</p>
<h2 id="stylesheets">Stylesheets</h2>
<p>Import codemirror`s css into your project</p>
<pre class="line-numbers"><code class="language-bash">node_modules/codemirror/lib/codemirror.css</code></pre><h2 id="modules">Modules</h2>
Expand Down
4 changes: 2 additions & 2 deletions docs/js/search/search_index.js

Large diffs are not rendered by default.

11 changes: 6 additions & 5 deletions extras/docs/prerequisites.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@

You must install all the following `peerDependencies` in order for `ngx-editor to work

* [CodeMirror](https://codemirror.net/)
* [FontAwesome](https://fontawesome.com/v4.7.0/)
* [Bootstrap](https://getbootstrap.com/)
* [NgxBootstrap](https://valor-software.com/ngx-bootstrap/)
* [CodeMirror](https://codemirror.net/) - Code Edit/Preview
* [FontAwesome](https://fontawesome.com/v4.7.0/) - Toolbar icons
* [NgxBootstrap](https://valor-software.com/ngx-bootstrap/) - Popover

`Bootstrap` is a temporary dependency and it will be removed sooner.
## Note

* `CodeMirror` and `ngx-bootstrap` are mandatory peerDependency which needs to be installed and there is no need for them to be imported.

## Stylesheets

Expand Down
1 change: 1 addition & 0 deletions ng-package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"dest": "./build/",
"lib": {
"entryFile": "./src/public_api.ts",
"comments": "none",
"umdModuleIds": {
"codemirror": "codemirror",
"ngx-bootstrap": "ngx-bootstrap"
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-editor",
"version": "3.3.0-rc.6",
"version": "3.3.0-rc.7",
"description": "WYSIWYG Editor for Angular Applications",
"license": "MIT",
"scripts": {
Expand Down Expand Up @@ -41,7 +41,6 @@
"@angular/common": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"bootstrap": "^4.0.0",
"codemirror": "^5.34.0",
"font-awesome": "^4.7.0",
"ngx-bootstrap": "^2.0.2",
Expand Down Expand Up @@ -82,6 +81,7 @@
"karma-jasmine-html-reporter": "^0.2.2",
"ng-packagr": "^2.0.0",
"ngx-bootstrap": "^2.0.2",
"node-sass": "^4.7.2",
"protractor": "~5.1.2",
"rxjs": "^5.5.6",
"ts-node": "~4.1.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@import "./src/assets/styles/_popover";
@import "./src/assets/styles/_buttons";
@import "./src/assets/styles/_forms";

.ngx-toolbar {
background-color: #f5f5f5;
font-size: 0.8rem;
Expand Down Expand Up @@ -115,6 +119,7 @@

button {
background-color: transparent;
border-radius: 0;

&:hover {
cursor: pointer;
Expand Down
45 changes: 45 additions & 0 deletions src/assets/styles/_buttons.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
::ng-deep .btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

&.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}

&:active, &:focus {
outline: none;
box-shadow: none;
}

&.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;

&:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
}

&:not(:disabled):not(.disabled) {
cursor: pointer;
}
}
33 changes: 33 additions & 0 deletions src/assets/styles/_forms.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
::ng-deep form {
.form-group {
margin-bottom: 1rem;

input {
overflow: visible;
}

.form-control-sm {
width: 100%;
outline: none;
border: none;
border-bottom: solid 1px #bdbdbd;
border-radius: 0;
margin-bottom: 1px;
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
}
}

.form-check {
position: relative;
display: block;
padding-left: 1.25rem;

.form-check-input {
position: absolute;
margin-top: .3rem;
margin-left: -1.25rem;
}
}
}
195 changes: 195 additions & 0 deletions src/assets/styles/_popover.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
::ng-deep .popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: block;
max-width: 276px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;

.arrow {
position: absolute;
display: block;
width: 1rem;
height: 0.5rem;
margin: 0 0.3rem;

&::before,
&::after {
position: absolute;
display: block;
content: "";
border-color: transparent;
border-style: solid;
}
}

.popover-header {
padding: 0.5rem 0.75rem;
margin-bottom: 0;
font-size: 1rem;
color: inherit;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);

&:empty {
display: none;
}
}

.popover-body {
padding: 0.5rem 0.75rem;
color: #212529;
}

&.bs-popover-top {
margin-bottom: 0.5rem;

.arrow {
bottom: calc((0.5rem + 1px) * -1);
}

.arrow::before,
.arrow::after {
border-width: 0.5rem 0.5rem 0;
}

.arrow::before {
bottom: 0;
border-top-color: rgba(0, 0, 0, 0.25);
}

.arrow::after {
bottom: 1px;
border-top-color: #fff;
}
}

&.bs-popover-right {
margin-left: 0.5rem;

.arrow {
left: calc((0.5rem + 1px) * -1);
width: 0.5rem;
height: 1rem;
margin: 0.3rem 0;
}

.arrow::before,
.arrow::after {
border-width: 0.5rem 0.5rem 0.5rem 0;
}

.arrow::before {
left: 0;
border-right-color: rgba(0, 0, 0, 0.25);
}

.arrow::after {
left: 1px;
border-right-color: #fff;
}
}

&.bs-popover-bottom {
margin-top: 0.5rem;

.arrow {
top: calc((0.5rem + 1px) * -1);
}

.arrow::before,
.arrow::after {
border-width: 0 0.5rem 0.5rem 0.5rem;
}

.arrow::before {
top: 0;
border-bottom-color: rgba(0, 0, 0, 0.25);
}

.arrow::after {
top: 1px;
border-bottom-color: #fff;
}

// This will remove the popover-header's border just below the arrow
.popover-header::before {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 1rem;
margin-left: -0.5rem;
content: "";
border-bottom: 1px solid #f7f7f7;
}
}

&.bs-popover-left {
margin-right: 0.5rem;

.arrow {
right: calc((0.5rem + 1px) * -1);
width: 0.5rem;
height: 1rem;
margin: 0.3rem 0;
}

.arrow::before,
.arrow::after {
border-width: 0.5rem 0 0.5rem 0.5rem;
}

.arrow::before {
right: 0;
border-left-color: rgba(0, 0, 0, 0.25);
}

.arrow::after {
right: 1px;
border-left-color: #fff;
}
}

&.bs-popover-auto {
&[x-placement^="top"] {
@extend .bs-popover-top;
}

&[x-placement^="right"] {
@extend .bs-popover-right;
}

&[x-placement^="bottom"] {
@extend .bs-popover-bottom;
}

&[x-placement^="left"] {
@extend .bs-popover-left;
}
}
}


9 changes: 7 additions & 2 deletions src/styles.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
/* You can add global styles to this file, and also import other style files */

@import "../node_modules/bootstrap/scss/bootstrap"; // bootstrap
@import "../node_modules/font-awesome/css/font-awesome.css"; // font-awesome
@import "../node_modules/bootstrap/scss/_functions";
@import "../node_modules/bootstrap/scss/_variables";
@import "../node_modules/bootstrap/scss/_mixins";
@import "../node_modules/bootstrap/scss/_type";
@import "../node_modules/bootstrap/scss/_reboot";
@import "../node_modules/bootstrap/scss/_grid";
@import "../node_modules/font-awesome/css/font-awesome.css";
@import "../node_modules/codemirror/lib/codemirror.css";

0 comments on commit 8aa0ffd

Please sign in to comment.