徐烜 / bsth-ebus-h5_editor · Commits

Commit a0109f59c93786ddbc1b3e2b83eefb70bd88b8b0

Authored by ly525
1 parent c6976609

update style code structure

Inline Side-by-side
Showing 10 changed files with 124 additions and 135 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
  View file @a0109f5
... ... @@ -128,7 +128,6 @@ export default {
128 128 return (
129 129 <div
130 130 style={{ height: '100%', position: 'relative' }}
131   - class="canvas-editor-wrapper"
132 131 onClick={(e) => {
133 132 this.hideContextMenu()
134 133 this.handleClickCanvas(e)
... ...
front-end/h5/src/components/core/editor/index.js
  View file @a0109f5
... ... @@ -299,6 +299,7 @@ export default {
299 299 { this.isPreviewMode
300 300 ? <RenderPreviewCanvas elements={this.elements}/>
301 301 : <RenderEditCanvas
  302 + class="edit-mode"
302 303 elements={this.elements}
303 304 />
304 305 }
... ...
front-end/h5/src/components/core/styles/align-guides.scss 0 → 100644
  View file @a0109f5
  1 +/**
  2 + * #!zh: 元素对齐参考线
  3 + * #!en: align objects with guides
  4 + */
  5 +
  6 +// 垂直对齐参考线
  7 +.v-line {
  8 + position: absolute;
  9 + height: 100vh;
  10 + width: 1px;
  11 + top: 0;
  12 + background-color: #94f5ff;
  13 +}
  14 +
  15 +// 水平对齐参考线
  16 +.h-line {
  17 + position: absolute;
  18 + height: 1px;
  19 + width: 100vh;
  20 + left: 0;
  21 + background-color: #94f5ff;
  22 +}
0 23 \ No newline at end of file
... ...
front-end/h5/src/components/core/styles/canvas-wrapper.scss 0 → 100644
  View file @a0109f5
  1 +/**
  2 + * 编辑器中间的画布
  3 + */
  4 +
  5 +.canvas-wrapper {
  6 + border: 1px dashed #e7e7e7;
  7 +
  8 + .edit-mode {
  9 + // box-shadow: 0 0 0 1px #d9d9d9;
  10 + // inspired by https://github.com/Heboy/h5-maker/blob/38136192bab1427b9d5741a5dae0b5186d4b2ea0/src/scss/Page.scss#L8
  11 + // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADVJREFUeNpifPHixQEGGgMWEPH161cHWlrCxEAHMGrJqCWjloxaMmrJqCWjloxaMrgtAQgwAL+YBst5kqDgAAAAAElFTkSuQmCC);
  12 + // background-image: url(https://i.imgur.com/SuyR7Vq.png);
  13 + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAAAXNSR0IB2cksfwAAAAlQTFRF9fX18PDwAAAABQ8/pgAAAAN0Uk5T/yIA41y2EwAAABhJREFUeJxjYIAC0VAQcGCQWgUCDUONBgDH8Fwzu33LswAAAABJRU5ErkJggg==');
  14 + }
  15 +}
... ...
front-end/h5/src/components/core/styles/helpers.scss 0 → 100644
  View file @a0109f5
  1 +.transparent-bg {
  2 + background: transparent !important;
  3 +}
  4 +
  5 +.no-border {
  6 + border: none !important;
  7 +}
  8 +
  9 +.flex-center {
  10 + display: flex !important;
  11 + align-items: center;
  12 + justify-content: center;
  13 +}
  14 +
  15 +.flex-space-between {
  16 + display: flex !important;
  17 + justify-content: space-between;
  18 +}
  19 +
  20 +.cursor-pointer {
  21 + cursor: pointer !important;
  22 +}
0 23 \ No newline at end of file
... ...
front-end/h5/src/components/core/styles/index.scss
  View file @a0109f5
1   -@import url("./_spacing-helpers.scss");
2   -
3   -@mixin shortcut-button {
4   - border: 1px dashed #fff;
5   - height: 60px;
6   - display: flex;
7   - align-items: center;
8   - justify-content: center;
9   - cursor: pointer;
10   - transition: all .25s;
11   - background-color: #f5f8fb;
12   - margin-bottom: 15px;
13   - flex-direction: column;
14   - color: #393e46;
15   - width: 100%;
16   -
17   - &:disabled {
18   - cursor: not-allowed;
19   - }
20   - .shortcut-icon {
21   - padding: 4px;
22   - // display: block;
23   - // font-size: 16px;
24   - // margin-bottom: 10px;
25   - }
26   -}
  1 +@import url("./helpers.scss");
  2 +@import url("./spacing-helpers.scss");
  3 +@import url("./shape.scss");
  4 +@import url("./align-guides.scss");
  5 +@import url("./shortcut-btn.scss");
  6 +@import url("./page-manager.scss");
  7 +@import url("./canvas-wrapper.scss");
27 8  
28 9 #luban-editor-layout,
29 10 #luban-work-manager-layout {
... ... @@ -56,72 +37,12 @@
56 37 }
57 38 }
58 39  
59   - .shortcut-button {
60   - @include shortcut-button;
61   - }
62   -
63   -
64   - .canvas-wrapper {
65   - border: 1px dashed #e7e7e7;
66   - // padding: '12px';
67   - }
68   -
69   - .canvas-editor-wrapper {
70   - // box-shadow: 0 0 0 1px #d9d9d9;
71   - // inspired by https://github.com/Heboy/h5-maker/blob/38136192bab1427b9d5741a5dae0b5186d4b2ea0/src/scss/Page.scss#L8
72   - // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADVJREFUeNpifPHixQEGGgMWEPH161cHWlrCxEAHMGrJqCWjloxaMmrJqCWjloxaMrgtAQgwAL+YBst5kqDgAAAAAElFTkSuQmCC);
73   - // background-image: url(https://i.imgur.com/SuyR7Vq.png);
74   - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAAAXNSR0IB2cksfwAAAAlQTFRF9fX18PDwAAAABQ8/pgAAAAN0Uk5T/yIA41y2EwAAABhJREFUeJxjYIAC0VAQcGCQWgUCDUONBgDH8Fwzu33LswAAAABJRU5ErkJggg==');
75   - .element--editing {
76   - outline: 1px dashed #70c0ff !important;
77   - }
78   -
79   - // !#zh 控制缩放大小的圆点
80   - .shape__scale-point {
81   - position: absolute;
82   - background: #fff;
83   - border: 1px solid rgb(89, 199, 249);
84   - width: 6px;
85   - height: 6px;
86   - z-index: 1;
87   - border-radius: 50%;
88   - }
89   - // TODO #!zh: 写一个辅助线基类： base-line
90   - .v-line {
91   - position: absolute;
92   - height: 100vh;
93   - width: 1px;
94   - top: 0;
95   - background-color: #94f5ff;
96   - }
97   - .h-line {
98   - position: absolute;
99   - height: 1px;
100   - width: 100vh;
101   - left: 0;
102   - background-color: #94f5ff;
103   - }
104   - }
105   -
106 40 #props-edit-form {
107 41 .ant-form-item {
108 42 margin-bottom: 12px;
109 43 }
110 44 }
111 45  
112   - .page-manager-container {
113   - margin-top: 16px;
114   - .page-button {
115   - padding: 18px 8px;
116   - border-bottom: 1px solid #ebeef5;
117   - box-sizing: border-box;
118   - cursor: pointer;
119   - }
120   - .active-page {
121   - color: #2981fa;
122   - }
123   - }
124   -
125 46 .card-cover-wrapper {
126 47 position: relative;
127 48 height: 300px;
... ... @@ -131,30 +52,6 @@
131 52 }
132 53 }
133 54  
134   -.shortcut-button {
135   - @include shortcut-button;
136   -}
137   -
138   -.page-manager-panel {
139   - position: relative;
140   -
141   - &__item {
142   - display: flex;
143   - justify-content: space-between;
144   - padding: 12px 0;
145   - height: 60px;
146   - border-bottom: 1px solid #f0f4f5;
147   -
148   - &.active {
149   - color: #1593ff;
150   - }
151   - }
152   -
153   - .footer-actions {
154   - margin-top: 40px;
155   - }
156   -}
157   -
158 55 .ant-tabs-nav .ant-tabs-tab {
159 56 padding: 12px 0 !important;
160 57 }
... ... @@ -182,27 +79,3 @@
182 79 background-color: transparent;
183 80 text-decoration: none;
184 81 }
185   -
186   -
187   -.transparent-bg {
188   - background: transparent !important;
189   -}
190   -
191   -.no-border {
192   - border: none !important;
193   -}
194   -
195   -.flex-center {
196   - display: flex !important;
197   - align-items: center;
198   - justify-content: center;
199   -}
200   -
201   -.flex-space-between {
202   - display: flex !important;
203   - justify-content: space-between;
204   -}
205   -
206   -.cursor-pointer {
207   - cursor: pointer !important;
208   -}
209 82 \ No newline at end of file
... ...
front-end/h5/src/components/core/styles/page-manager.scss 0 → 100644
  View file @a0109f5
  1 +.page-manager-panel {
  2 + position: relative;
  3 +
  4 + &__item {
  5 + display: flex;
  6 + justify-content: space-between;
  7 + padding: 12px 0;
  8 + height: 60px;
  9 + border-bottom: 1px solid #f0f4f5;
  10 +
  11 + &.active {
  12 + color: #1593ff;
  13 + }
  14 + }
  15 +
  16 + .footer-actions {
  17 + margin-top: 40px;
  18 + }
  19 +}
0 20 \ No newline at end of file
... ...
front-end/h5/src/components/core/styles/shape.scss 0 → 100644
  View file @a0109f5
  1 +// !#zh 控制缩放大小的圆点
  2 +.shape__scale-point {
  3 + position: absolute;
  4 + background: #fff;
  5 + border: 1px solid rgb(89, 199, 249);
  6 + width: 6px;
  7 + height: 6px;
  8 + z-index: 1;
  9 + border-radius: 50%;
  10 +}
  11 +
  12 +.shape__wrapper-active {
  13 + // #bcbcbc
  14 + outline: 1px dashed #70c0ff !important;
  15 +}
0 16 \ No newline at end of file
... ...
front-end/h5/src/components/core/styles/shortcut-btn.scss 0 → 100644
  View file @a0109f5
  1 +.shortcut-button {
  2 + display: flex !important;
  3 + flex-direction: column;
  4 + align-items: center;
  5 + justify-content: center;
  6 + height: 60px !important;
  7 + width: 100%;
  8 + margin-bottom: 15px;
  9 +
  10 + border: 1px dashed #fff !important;
  11 + background-color: #f5f8fb !important;
  12 + color: #393e46 !important;
  13 +
  14 + transition: all .25s;
  15 + cursor: pointer;
  16 +
  17 + &:disabled {
  18 + cursor: not-allowed;
  19 + }
  20 + .shortcut-icon {
  21 + padding: 4px;
  22 + }
  23 +}
... ...
front-end/h5/src/components/core/styles/_spacing-helpers.scss renamed to front-end/h5/src/components/core/styles/spacing-helpers.scss
  View file @a0109f5