Skip to content
This repository was archived by the owner on Apr 3, 2022. It is now read-only.

Commit 898bfef

Browse files
megawebmastermegawebmaster
committed
Add required styles to match bootstrap
1 parent c9a47e7 commit 898bfef

File tree

5 files changed

+102
-33
lines changed

5 files changed

+102
-33
lines changed

‎Gulpfile.coffee

+9-1
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,15 @@ concat = require('gulp-concat')
55
uglify = require('gulp-uglify')
66
del = require('del')
77
html2js = require('gulp-html2js')
8+
sass = require('gulp-sass')
89
ngAnnotate = require('gulp-ng-annotate')
910

11+
gulp.task 'styles', ->
12+
gulp.src 'sass/**/*.scss'
13+
.pipe sass({errLogToConsole: true})
14+
.pipe concat('styles.css')
15+
.pipe gulp.dest('dist')
16+
1017
gulp.task 'lint', ->
1118
gulp.src 'src/**/*.coffee'
1219
.pipe coffeelint('coffeelint.json')
@@ -47,6 +54,7 @@ gulp.task 'clean', ->
4754

4855
gulp.task 'watch', ['scripts.normal', 'templates'], ->
4956
gulp.watch 'src/**/*.coffee', ['scripts.normal']
57+
gulp.watch 'sass/**/*.scss', ['styles']
5058
gulp.watch 'templates/*.html', ['templates']
5159

52-
gulp.task 'default', ['clean', 'scripts', 'templates']
60+
gulp.task 'default', ['clean', 'scripts', 'styles', 'templates']

‎bower.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "analytical-object-wysiwyg",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"authors": [
55
"Amadeusz Starzykiewicz <[email protected]>"
66
],
@@ -38,11 +38,15 @@
3838
],
3939
"dependencies": {
4040
"quill": "megawebmaster/quill#dist",
41-
"jquery": "2.1.4"
41+
"jquery": "2.1.4",
42+
"boostrap-sass": "3.3.5"
4243
},
4344
"overrides": {
4445
"quill": {
45-
"main": ["dist/quill.js", "dist/quill.base.css"]
46+
"main": [
47+
"dist/quill.js",
48+
"dist/quill.base.css"
49+
]
4650
}
4751
},
4852
"resolve": {

‎package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "quill-object-format",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"description": "Configurable format for Quill. Adds ability to format text as \"object\" where you define what an object is.",
55
"license": "MIT",
66
"repository": {},
@@ -12,8 +12,9 @@
1212
"gulp-coffee": "2.3.1",
1313
"gulp-coffeelint": "0.4.0",
1414
"gulp-concat": "2.5.2",
15-
"gulp-html2js": "^0.2.0",
16-
"gulp-ng-annotate": "^1.0.0",
15+
"gulp-html2js": "0.2.0",
16+
"gulp-sass": "2.0.3",
17+
"gulp-ng-annotate": "1.0.0",
1718
"gulp-uglify": "1.2.0"
1819
},
1920
"engines": {

‎sass/editor.scss

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@import '../bower_components/boostrap-sass/assets/stylesheets/bootstrap/variables';
2+
3+
.editor {
4+
margin-top: $padding-base-vertical;
5+
border: 1px solid $input-border;
6+
border-radius: $input-border-radius;
7+
8+
.toolbar {
9+
border-bottom: 1px solid $input-border;
10+
box-sizing: border-box;
11+
padding: $padding-base-vertical;
12+
}
13+
.ql-container {
14+
font-size: $font-size-base;
15+
line-height: $line-height-base;
16+
overflow: visible;
17+
}
18+
.ql-editor {
19+
@extend .body;
20+
21+
span.object {
22+
background-color: $badge-bg;
23+
}
24+
}
25+
.ql-format-group {
26+
margin-right: $padding-large-horizontal;
27+
}
28+
.ql-format-button {
29+
padding: 0 $padding-small-vertical;
30+
cursor: pointer;
31+
32+
&:hover, &.ql-active {
33+
color: $link-hover-color;
34+
}
35+
}
36+
.ql-tooltip {
37+
padding: $padding-base-vertical $padding-base-horizontal;
38+
border: 1px solid $panel-default-border;
39+
border-radius: $panel-border-radius;
40+
}
41+
}
42+
.body {
43+
div {
44+
margin-bottom: 10px;
45+
46+
&:last-child {
47+
margin-bottom: 0;
48+
}
49+
}
50+
ul, ol {
51+
margin-bottom: 10px;
52+
margin-top: 0;
53+
}
54+
}

‎templates/analyticalObjectWysiwygEditor.html

+28-26
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,32 @@
1-
<div class="toolbar-container toolbar" ng-show="toolbar">
2-
<span class="ql-format-group">
3-
<span title="Bold" class="ql-format-button ql-bold">
4-
<i class="fa fa-bold"></i>
1+
<div class="editor">
2+
<div class="toolbar-container toolbar" ng-show="toolbar">
3+
<span class="ql-format-group">
4+
<span title="Bold" class="ql-format-button ql-bold">
5+
<i class="fa fa-bold"></i>
6+
</span>
7+
<span title="Italic" class="ql-format-button ql-italic">
8+
<i class="fa fa-italic"></i>
9+
</span>
10+
<span title="Underline" class="ql-format-button ql-underline">
11+
<i class="fa fa-underline"></i>
12+
</span>
13+
<span title="Strikethrough" class="ql-format-button ql-strike">
14+
<i class="fa fa-strikethrough"></i>
15+
</span>
516
</span>
6-
<span title="Italic" class="ql-format-button ql-italic">
7-
<i class="fa fa-italic"></i>
17+
<span class="ql-format-group">
18+
<span title="Numbered list" class="ql-format-button ql-list">
19+
<i class="fa fa-list-ol"></i>
20+
</span>
21+
<span title="Bullet list" class="ql-format-button ql-bullet">
22+
<i class="fa fa-list-ul"></i>
23+
</span>
824
</span>
9-
<span title="Underline" class="ql-format-button ql-underline">
10-
<i class="fa fa-underline"></i>
25+
<span class="ql-format-group">
26+
<span title="Add object" class="ql-format-button ql-object">
27+
<i class="fa fa-plus"></i>
28+
</span>
1129
</span>
12-
<span title="Strikethrough" class="ql-format-button ql-strike">
13-
<i class="fa fa-strikethrough"></i>
14-
</span>
15-
</span>
16-
<span class="ql-format-group">
17-
<span title="Numbered list" class="ql-format-button ql-list">
18-
<i class="fa fa-list-ol"></i>
19-
</span>
20-
<span title="Bullet list" class="ql-format-button ql-bullet">
21-
<i class="fa fa-list-ul"></i>
22-
</span>
23-
</span>
24-
<span class="ql-format-group">
25-
<span title="Add object" class="ql-format-button ql-object">
26-
<i class="fa fa-plus"></i>
27-
</span>
28-
</span>
30+
</div>
31+
<div class="editor-container"></div>
2932
</div>
30-
<div class="editor-container"></div>

0 commit comments

Comments
 (0)