add: 修改样式

editor-app/css/style.css

@@ -253,9 +253,11 @@ div.canvas-wrapper {
 }
 
 div.propertySection {
+    display: flex;
+    align-items: center;
     height: 100%;
-    background-color: #e8edf1;
-    margin-bottom: 0px;
+    /* background-color: #e8edf1; */
+    margin-right: 20px;
 }
 
  /*滚动条样式*/
@@ -293,17 +295,18 @@ div.propertySection {
     font-size: 14px;
 }
 .pull-right-btn{
-    position: fixed;
+    /* position: fixed; */
     z-index: 999;
-    top: 400px;
-    right: 280px;
+    /* top: 418px; */
+    /* right: 300px; */
+    margin-right: 20px;
     cursor: pointer;
 }
 .pull-left-btn{
-    position: fixed;
+    /* position: fixed; */
     z-index: 999;
-    top: 400px;
-    right: 40px;
+    /* top: 400px; */
+    /* right: 40px; */
     cursor: pointer;
     display: none;
 }
@@ -311,7 +314,10 @@ div.propertySection {
     color: #1a1a1a;
     text-decoration: none;
 }
-
+.selected-item-section{
+    background: rgb(232, 237, 241);
+    width: 100%;
+}
 .selected-item-section > div > .pull-right {
     line-height: 50px;
     margin: 0px 10px;
@@ -335,7 +341,8 @@ div.propertySection {
 .selected-item-body {
     padding: 0;
     overflow: auto;
-    width: 260px;
+    /* width: 260px; */
+    width: 95%;
     /* height: 199px; */
     max-height: 730px;
 }
@@ -1230,6 +1237,7 @@ hot-table .column-header.label {
 }
 
 #contentCanvasWrapper {
+    width: 100%;
     /* padding-left: 300px; */
     transition: 0.3s padding-left;
     display: flex;

editor-app/editor-controller.js

@@ -133,6 +133,7 @@ angular.module('flowableModeler')
             this.style.display = "none"
 			paletteHelpWrapper.addClass('close');
 			contentCanvasWrapper.addClass('collapsedCanvasWrapper');
+			contentCanvasWrapper.addClass('col-xs-12');
             paletteSectionOpen.removeClass('hidden');
             paletteSectionOpen.css("display", "block")
 		});
@@ -141,6 +142,7 @@ angular.module('flowableModeler')
             this.style.display = "none"
 			paletteHelpWrapper.removeClass('close');
 			contentCanvasWrapper.removeClass('collapsedCanvasWrapper');
+            contentCanvasWrapper.addClass('col-xs-12');
             paletteSectionOpen.addClass('hidden');
             paletteSectionFooter.css("display", "block")
 		});

editor-app/editor.html

@@ -78,11 +78,11 @@
                   <i class="glyphicon glyphicon-chevron-left"></i>
               </div>
           </div>
-	      <div id="contentCanvasWrapper">
+	      <div id="contentCanvasWrapper row" style="width: 100%;">
                 <div id="paletteSectionOpen" class="hidden">
                     <i class="glyphicon glyphicon-chevron-right"></i>
                 </div>
-                <div id="canvasHelpWrapper" class="col-xs-12">
+                <div id="canvasHelpWrapper" class="col-xs-9">
                     <div class="canvas-wrapper" id="canvasSection"
                          ng-model="droppedElement"
                          data-drop="true"
@@ -121,8 +121,11 @@
                     </div>
                 </div>
                 <!-- <div id="propertiesHelpWrapper" class="col-xs-12 propertiesHelpWrapper"> -->
-                <div id="propertiesHelpWrapper" class="propertiesHelpWrapper">
+                <div id="propertiesHelpWrapper" class="propertiesHelpWrapper col-xs-3">
                     <div class="propertySection" id="propertySection" ng-class="{collapsed: propertyWindowState.collapsed}">
+                        <div class="pull-right-btn" ng-click="pullRight()">
+                            <i class="glyphicon glyphicon-chevron-right"></i>
+                        </div>
                         <div class="selected-item-section">
                             <div class="clearfix">
                                 <div class="pull-right" ng-if="selectedItem.auditData.createDate">
@@ -162,9 +165,6 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="pull-right-btn" ng-click="pullRight()">
-                            <i class="glyphicon glyphicon-chevron-right"></i>
-                        </div>
                     </div>
                     <div class="pull-left-btn" id="pull-left-btn" ng-click="pullLeft()">
                         <i class="glyphicon glyphicon-chevron-left"></i>

editor-app/stencil-controller.js

@@ -1717,11 +1717,22 @@ angular.module('flowableModeler')
         $scope.pullRight = function() {
             document.getElementById("propertySection").style.display = "none"
             document.getElementById("pull-left-btn").style.display = "block"
+            document.getElementById("pull-left-btn").style.zIndex = "999"
+            document.getElementById("pull-left-btn").style.position = "fixed"
+            document.getElementById("pull-left-btn").style.top = "418px"
+            document.getElementById("pull-left-btn").style.right = "40px"
         }
         $scope.pullLeft = function() {
             document.getElementById("propertySection").style.display = "block"
-            document.getElementById("pull-left-btn").style.display = "none"
             
+            document.getElementById("propertySection").style.display = "flex"
+            document.getElementById("propertySection").style.zIndex = "999"
+            // document.getElementById("pull-right-btn").style.position = "fixed"
+            // document.getElementById("pull-right-btn").style.top = "418px"
+            // document.getElementById("pull-right-btn").style.right = "40px"
+            document.getElementById("propertySection").style.alignItems = "center"
+            document.getElementById("propertySection").style.marginRight = "20px"
+            document.getElementById("pull-left-btn").style.display = "none"
         }
     }]);