diff --git a/package-lock.json b/package-lock.json index fcb062a..57bff87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "version": "1.0.0", "license": "ISC", + "dependencies": { + "normalize.css": "^8.0.1" + }, "devDependencies": { "@types/happypack": "^5.0.2", "@types/html-webpack-plugin": "^3.2.6", @@ -5086,6 +5089,11 @@ "node": ">=0.10.0" } }, + "node_modules/normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "node_modules/npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -11318,6 +11326,11 @@ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dev": true }, + "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": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", diff --git a/package.json b/package.json index 036a6de..3fd472d 100644 --- a/package.json +++ b/package.json @@ -49,5 +49,8 @@ "homepage": "https://bitbucket.org/ksv741/excel-course#readme", "description": "", "browserslist": "> 0.25%, not dead", - "module": "true" + "module": "true", + "dependencies": { + "normalize.css": "^8.0.1" + } } diff --git a/src/assets/dashboard.html b/src/assets/dashboard.html new file mode 100644 index 0000000..bc87524 --- /dev/null +++ b/src/assets/dashboard.html @@ -0,0 +1,46 @@ + + + + + + + + + + Excel course + + + +
+ +
+
+

Excel dashboard

+
+
+
+ Новая таблица +
+
+
+
+ Название + Дата открытия +
+ +
+
+ +
+ + + \ No newline at end of file diff --git a/src/assets/excel.html b/src/assets/excel.html new file mode 100644 index 0000000..0a2a7ce --- /dev/null +++ b/src/assets/excel.html @@ -0,0 +1,76 @@ + + + + + + + + + + Excel course + + + +
+
+
+ + + +
+
+ delete +
+
+ exit_to_app +
+
+ +
+
+
+ format_bold +
+
+ format_italic +
+
+ format_underline +
+
+ format_align_left +
+
+ format_align_center +
+
+ format_align_right +
+
+
+
fx
+
+
+
+
+
+
+
A
+
B
+
C
+
+
+
+
1
+
+
A1
+
B1
+
C1
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 5eec379..c070220 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,17 @@ + + Excel course + -
CONTAINER
-

hello!s

+
+ \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 4036d0c..8579212 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,15 +1 @@ -import './style.scss'; - -interface SomeObject { - name: string, - age: string -} - -const Ivan: SomeObject = { - name: 'Ivan', - age: '23', -}; - -// Ivan.name = someName; - -console.log('Ivan - huy', Ivan); +import './styles/index.scss'; diff --git a/src/style.scss b/src/style.scss deleted file mode 100644 index 57b784b..0000000 --- a/src/style.scss +++ /dev/null @@ -1,6 +0,0 @@ -body { - background-color: darkkhaki; - h1 { - color: darkslategrey; - } -} \ No newline at end of file diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 0000000..b5a8209 --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,28 @@ +@mixin button($color: green) { + height: 24px; + min-width: 24px; + padding: 3px; + text-align: center; + position: relative; + display: inline-block; + color: rgba(0, 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/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 0000000..213cf33 --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,8 @@ +$border-color: #c0c0c0; +$cell-width: 120px; +$db-header-height: 60px; +$formula-height: 24px; +$header-height: 34px; +$info-cell-width: 40px; +$row-height: 25px; +$toolbar-height: 40px; \ No newline at end of file diff --git a/src/styles/components/dashboard.scss b/src/styles/components/dashboard.scss new file mode 100644 index 0000000..4592e1e --- /dev/null +++ b/src/styles/components/dashboard.scss @@ -0,0 +1,92 @@ +@import "../_variables"; +@import "../_mixins"; + +.db { + &__header { + position: fixed; + top: 0; + left: 0; + right: 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; + align-items: center; + justify-content: 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; + cursor: pointer; + } + + a{ + text-decoration: none; + cursor: pointer; + color: #202121; + font-size: 14px; + + &:hover { + text-decoration: underline; + } + } + } +} \ No newline at end of file diff --git a/src/styles/components/formula.scss b/src/styles/components/formula.scss new file mode 100644 index 0000000..69a0787 --- /dev/null +++ b/src/styles/components/formula.scss @@ -0,0 +1,27 @@ +@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; + 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; + } +} \ No newline at end of file diff --git a/src/styles/components/header.scss b/src/styles/components/header.scss new file mode 100644 index 0000000..0f70740 --- /dev/null +++ b/src/styles/components/header.scss @@ -0,0 +1,40 @@ +@import "../_variables"; +@import "../_mixins"; + +.excel__header { + position: absolute; + top: 0; + left: 0; + right: 0; + height: $header-height; + padding: 8px 4px 0; + display: flex; + justify-content: space-between; + background-color: antiquewhite; + + & .input { + margin: 0; + padding: 5px 7px; + color: #000; + border: 1px solid transparent; + border-radius: 2px; + height: 20px; + font-size: 18px; + line-height: 22; + outline: none; + min-width: 1px; + + &:hover { + border: 1px solid $border-color; + } + + &:focus { + border: 2px solid #1a73e8; + } + + } + + .button { + @include button() + } +} \ No newline at end of file diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss new file mode 100644 index 0000000..080b626 --- /dev/null +++ b/src/styles/components/table.scss @@ -0,0 +1,56 @@ +@import "../_variables"; +@import "../_mixins"; + +.excel__table { + position: absolute; + left: 0; + right: 0; + top: $header-height + $toolbar-height + $formula-height; + overflow: auto; + .row{ + display: flex; + flex-direction: row; + min-height: $row-height; + } + .row-info { + display: flex; + justify-content: center; + align-items: center; + min-width: $info-cell-width; + border: 1px solid $border-color; + background: #f8f9fa; + // height: 100%; + border-top: 0; + border-left: 0; + } + .row-data { + display: flex; + } + .column { + display: flex; + align-items: center; + justify-content: center; + background: #f8f9fa; + min-width: 40px; + width: $cell-width; + border: 1px solid $border-color; + border-top: 0; + border-left: 0; + } + .cell { + min-width: 40px; + padding: 5px; + width: $cell-width; + height: 100%; + border: 1px solid #e1e2e3; + border-top: 0; + border-left: 0; + white-space: nowrap; + outline: none; + &.selected { + border: none; + outline: 2px solid #3c74ff; + z-index: 2; + } + } +} \ No newline at end of file diff --git a/src/styles/components/toolbar.scss b/src/styles/components/toolbar.scss new file mode 100644 index 0000000..f25b908 --- /dev/null +++ b/src/styles/components/toolbar.scss @@ -0,0 +1,18 @@ +@import "../_variables"; +@import "../_mixins"; + +.excel__toolbar{ + position: absolute; + height: $toolbar-height; + left: 0; + right: 0; + top: $header-height; + border-top: 1px solid $border-color; + border-bottom: 1px solid $border-color; + padding: 7px 10px; + display: flex; + + .button { + @include button(green) + } +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000..b65a60c --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,27 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); +@import "~normalize.css"; + +@import './components/header'; +@import './components/toolbar'; +@import './components/formula'; +@import './components/table'; +@import './components/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: 0.8rem; +} \ No newline at end of file diff --git a/webpack.config.ts b/webpack.config.ts index 7616986..a1ee3dc 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -81,7 +81,7 @@ const config = (env: Record, argv: Record): Configurat clean: true, }, resolve: { - extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], + extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.scss'], alias: { '@': path.resolve(__dirname, 'src'), '@core': path.resolve(__dirname, 'src', '@core'),