徐烜 / 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,7 +128,6 @@ export default {
128 return ( 128 return (
129 <div 129 <div
130 style={{ height: '100%', position: 'relative' }} 130 style={{ height: '100%', position: 'relative' }}
131 - class="canvas-editor-wrapper"  
132 onClick={(e) => { 131 onClick={(e) => {
133 this.hideContextMenu() 132 this.hideContextMenu()
134 this.handleClickCanvas(e) 133 this.handleClickCanvas(e)
front-end/h5/src/components/core/editor/index.js
  View file @a0109f5
@@ -299,6 +299,7 @@ export default { @@ -299,6 +299,7 @@ export default {
299 { this.isPreviewMode 299 { this.isPreviewMode
300 ? <RenderPreviewCanvas elements={this.elements}/> 300 ? <RenderPreviewCanvas elements={this.elements}/>
301 : <RenderEditCanvas 301 : <RenderEditCanvas
  302 + class="edit-mode"
302 elements={this.elements} 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 \ No newline at end of file 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 \ No newline at end of file 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 #luban-editor-layout, 9 #luban-editor-layout,
29 #luban-work-manager-layout { 10 #luban-work-manager-layout {
@@ -56,72 +37,12 @@ @@ -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 #props-edit-form { 40 #props-edit-form {
107 .ant-form-item { 41 .ant-form-item {
108 margin-bottom: 12px; 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 .card-cover-wrapper { 46 .card-cover-wrapper {
126 position: relative; 47 position: relative;
127 height: 300px; 48 height: 300px;
@@ -131,30 +52,6 @@ @@ -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 .ant-tabs-nav .ant-tabs-tab { 55 .ant-tabs-nav .ant-tabs-tab {
159 padding: 12px 0 !important; 56 padding: 12px 0 !important;
160 } 57 }
@@ -182,27 +79,3 @@ @@ -182,27 +79,3 @@
182 background-color: transparent; 79 background-color: transparent;
183 text-decoration: none; 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 \ No newline at end of file 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 \ No newline at end of file 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 \ No newline at end of file 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