diff --git a/package-lock.json b/package-lock.json index b703a5e..7027070 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5749,6 +5749,11 @@ "sort-keys": "^1.0.0" } }, + "normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", diff --git a/package.json b/package.json index 3367043..739e670 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "webpack-dev-server": "^3.11.0" }, "dependencies": { - "@babel/polyfill": "^7.10.4" + "@babel/polyfill": "^7.10.4", + "normalize.css": "^8.0.1" } } diff --git a/src/assets/dashboard.html b/src/assets/dashboard.html new file mode 100644 index 0000000..c4f8e3f --- /dev/null +++ b/src/assets/dashboard.html @@ -0,0 +1,54 @@ + + + + + + + + + Pure JavaScript Excel + + +
+
+
+

Excel Dashboard

+
+ +
+
+ + Новая
+ Таблица + +
+
+ +
+
+ Название + Дата открытия +
+ + +
+
+
+ + diff --git a/src/assets/excel.html b/src/assets/excel.html new file mode 100644 index 0000000..4f30260 --- /dev/null +++ b/src/assets/excel.html @@ -0,0 +1,126 @@ + + + + + + + + + Pure JavaScript Excel + + +
+
+
+ + +
+
+ delete +
+ +
+ exit_to_app +
+
+
+ +
+
+ format_align_left +
+ +
+ format_align_center +
+ +
+ format_align_right +
+ +
+ format_bold +
+ +
+ format_italic +
+ +
+ format_underlined +
+
+ +
+
fx
+
+
+ +
+
+
+ +
+
A
+
B
+
C
+
A
+
B
+
C
+
A
+
B
+
C
+
A
+
B
+
C
+
A
+
B
+
C
+
A
+
B
+
C
+
A
+
B
+
C
+
A
+
B
+
C
+
A
+
B
+
C
+
A
+
B
+
C
+
+
+ +
+
1
+ +
+
A1
+
B2
+
C3
+
+
+ +
+
2
+ +
+
A1
+
B2
+
C3
+
+
+
+
+
+ + diff --git a/src/index.html b/src/index.html index d5a9aff..b2ff2be 100644 --- a/src/index.html +++ b/src/index.html @@ -2,11 +2,21 @@ - + + + Pure JavaScript Excel -
+
+ +
diff --git a/src/scss/_mexins.scss b/src/scss/_mexins.scss new file mode 100644 index 0000000..cee1c03 --- /dev/null +++ b/src/scss/_mexins.scss @@ -0,0 +1,30 @@ +@mixin button($color: green) { + height: 24px; + min-width: 24px; + padding: 3px; + text-align: center; + position: relative; + display: inline-block; + color: rgba(0, 0, 0, .7); + + & i { + font-size: 18px; + } + + &:active, &.active { + color: $color; + } + + &:hover { + background: #eee; + cursor: pointer; + } + } + + + @mixin clear-list() { + list-style: none; + margin: 0; + padding: 0; + } + \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..44b04cc --- /dev/null +++ b/src/scss/_variables.scss @@ -0,0 +1,8 @@ +$header-height: 34px; +$toolbar-height: 40px; +$formula-height: 24px; +$info-cell-width: 40px; +$cell-width: 120px; +$row-height: 24px; +$db-header-height: 64px; +$border-color: #c0c0c0; diff --git a/src/scss/dashboard.scss b/src/scss/dashboard.scss new file mode 100644 index 0000000..28e37f0 --- /dev/null +++ b/src/scss/dashboard.scss @@ -0,0 +1,94 @@ +@import "variables"; +@import "mixins"; + +.db { + + &__header { + position: fixed; + left: 0; + right: 0; + top: 0; + height: $db-header-height; + display: flex; + align-items: center; + justify-content: center; + background: #fff; + box-shadow: 0 2px 5px 2px rgba(60, 64, 67, 0.15); + z-index: 1000; + } + + &__new { + margin-top: $db-header-height; + padding: 1.5rem; + background: #dadce0; + } + + &__create { + width: 160px; + height: 160px; + background: #fff; + border-radius: 4px; + border: 1px solid #dadce0; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.5rem; + text-decoration: none; + color: #000; + text-align: center; + + &:hover { + cursor: pointer; + color: green; + border-color: green; + } + } + + &__view { + max-width: 1000px; + margin: 0 auto; + } + + &__table { + padding: 1rem; + } + + &__list-header { + display: flex; + justify-content: space-between; + color: #202124; + font-weight: 500; + font-size: 16px; + margin-bottom: 10px; + padding: 0 12px; + } + + &__list { + @include clear-list; + } + + &__record { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 14px 12px 16px; + margin-bottom: 10px; + + &:hover { + background: #e6f4ea; + border-radius: 25px; + } + + a { + text-decoration: none; + cursor: pointer; + color: #202124; + font-size: 14px; + + &:hover { + text-decoration: underline; + } + } + } + +} diff --git a/src/scss/formula.scss b/src/scss/formula.scss new file mode 100644 index 0000000..0a3cdb3 --- /dev/null +++ b/src/scss/formula.scss @@ -0,0 +1,31 @@ +@import "variables"; +@import "mixins"; + + +.excel__formula { + position: absolute; + left: 0; + right: 0; + top: $header-height + $toolbar-height; + height: $formula-height; + display: flex; + align-items: center; + border-bottom: 1px solid $border-color; + + .info { + font-size: 18px; + font-style: italic; + text-align: center; + border-right: 1px solid $border-color; + min-width: $info-cell-width; + } + + .input { + padding: 4px; + font-size: 12px; + outline: none; + width: 100%; + height: 100%; + color: #000; + } +} diff --git a/src/scss/header.scss b/src/scss/header.scss new file mode 100644 index 0000000..572d683 --- /dev/null +++ b/src/scss/header.scss @@ -0,0 +1,39 @@ +@import "variables"; +@import "mixins"; + +.excel__header { + position: absolute; + top: 0; + right: 0; + left: 0; + height: $header-height; + padding: 8px 4px 0; + display: flex; + justify-content: space-between; + + & .input { + margin: 0; + padding: 2px 7px; + min-width: 1px; + color: #000; + border: 1px solid transparent; + border-radius: 2px; + height: 20px; + font-size: 18px; + line-height: 22px; + outline: none; + + &:hover { + border: 1px solid $border-color; + } + + &:focus { + border: 2px solid #1a73e8; + } + } + + .button { + @include button(red); + } + +} diff --git a/src/scss/index.scss b/src/scss/index.scss index e69de29..8637f18 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -0,0 +1,29 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); +@import "~normalize.css"; + +@import "header"; +@import "toolbar"; +@import "formula"; +@import "table"; +@import "dashboard"; + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Roboto', sans-serif; + font-size: 12px; +} + +.excel { + position: relative; + color: #888; + height: 100%; + max-width: 100%; + font-size: .8rem; +} + + diff --git a/src/scss/table.scss b/src/scss/table.scss new file mode 100644 index 0000000..586bde1 --- /dev/null +++ b/src/scss/table.scss @@ -0,0 +1,67 @@ +@import "variables"; +@import "mixins"; + +.excel__table { + position: absolute; + left: 0; + right: 0; + top: $header-height + $toolbar-height + $formula-height; + overflow-x: auto; + padding-bottom: 2px; + + .row { + display: flex; + flex-direction: row; + min-height: 20px; + height: $row-height; + } + + .row-info { + display: flex; + justify-content: center; + align-items: center; + min-width: $info-cell-width; + height: 100%; + border: 1px solid $border-color; + background: #f8f9fa; + border-top: none; + } + + .row-data { + display: flex; + } + + .column { + display: flex; + justify-content: center; + align-items: center; + background: #f8f9fa; + min-width: 40px; + width: $cell-width; + border: 1px solid $border-color; + border-top: 0; + border-left: 0; + height: 100%; + } + + .cell { + min-width: 40px; + padding: 5px; + width: $cell-width; + height: 100%; + border: 1px solid #e2e3e3; + border-top: 0; + border-left: 0; + color: #111; + white-space: nowrap; + outline: none; + + + &.selected { + border: none; + outline: 2px solid #3c74ff; + z-index: 2; + } + } + +} diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss new file mode 100644 index 0000000..8e9c8d2 --- /dev/null +++ b/src/scss/toolbar.scss @@ -0,0 +1,18 @@ +@import "variables"; +@import "mixins"; + +.excel__toolbar { + position: absolute; + left: 0; + right: 0; + top: $header-height; + height: $toolbar-height; + border-top: 1px solid $border-color; + border-bottom: 1px solid $border-color; + padding: 7px 10px; + display: flex; + + .button { + @include button(green); + } +}