Code refactoring

ide-core/ui/layout.js

@@ -842,7 +842,7 @@ angular.module('layout', ['idePerspective', 'ideMessageHub'])
                     if (oldDirection)
                         $element.removeClass(oldDirection);
 
-                    $element.addClass(['split', newDirection || 'horizontal']);
+                    $element.addClass(['dg-split', newDirection || 'horizontal']);
                 });
 
                 $scope.$watchCollection('panes', function () {
@@ -933,6 +933,8 @@ angular.module('layout', ['idePerspective', 'ideMessageHub'])
                 snapOffset: '@'
             },
             link: function (scope, element, attrs, bgSplitCtrl) {
+                element.addClass('dg-split-pane');
+
                 let paneData = scope.paneData = {
                     element: element,
                     size: Number(scope.size),

ide-core/ui/templates/accordion.html

@@ -1 +1 @@
-<div class="accordion" ng-transclude></div>
+<div class="dg-accordion" ng-transclude></div>

ide-core/ui/templates/layout.html

@@ -1,7 +1,7 @@
 <div class="dg-perspective-view">
     <split direction="horizontal" ng-transclude>
-        <split-pane ng-if="explorerTabs.length > 0" size="20" min-size="0" snap-offset="100"
-            class="split-pane pane-left" ng-transclude>
+        <split-pane ng-if="explorerTabs.length > 0" size="20" min-size="0" snap-offset="100" class="pane-left"
+            ng-transclude>
             <explorer-toolbar name="{{ name }}"></explorer-toolbar>
             <accordion>
                 <accordion-pane ng-repeat="view in explorerTabs" view="view"></accordion-pane>
@@ -10,17 +10,17 @@
         <split-pane size="80" min-size="100" snap-offset="0" ng-transclude>
             <split direction="vertical" state="splitPanesState.main" ng-transclude>
                 <split-pane ng-if="!layoutSettings.hideEditorsPane" size="70" min-size="0" snap-offset="0"
-                    class="split-pane pane-center" ng-transclude>
+                    class="pane-center" ng-transclude>
 
                     <splitted-tabs direction="centerSplittedTabViews.direction" panes="centerSplittedTabViews.panes"
                         remove-tab="closeCenterTab(pane)" split-tabs="splitCenterTabs(direction, pane)" ng-transclude>
                     </splitted-tabs>
 
                 </split-pane>
-                <split-pane ng-if="bottomTabs.length > 0" size="30" min-size="0" snap-offset="100"
-                    class="split-pane pane-bottom" ng-transclude>
+                <split-pane ng-if="bottomTabs.length > 0" size="30" min-size="0" snap-offset="100" class="pane-bottom"
+                    ng-transclude>
                     <tabs selected-pane="selection.selectedBottomTab">
-                        <buttons ng-if="!layoutSettings.hideEditorsPane" class="split-pane-buttons">
+                        <buttons ng-if="!layoutSettings.hideEditorsPane" class="dg-split-pane-buttons">
                             <button class="fd-button fd-button--compact fd-button--transparent"
                                 ng-click="toggleEditorsPane()">
                                 <i

ide-core/ui/templates/splittedTabs.html

@@ -1,11 +1,11 @@
-<div class="splitted-tabs">
-    <split class="split" direction="{{direction}}" ng-transclude>
-        <split-pane ng-repeat="pane in panes" size="50" min-size="100" class="split-pane" ng-transclude>
+<div class="dg-splitted-tabs">
+    <split direction="{{direction}}" ng-transclude>
+        <split-pane ng-repeat="pane in panes" size="50" min-size="100" ng-transclude>
             <splitted-tabs ng-if="!!pane.panes" direction="pane.direction" panes="pane.panes"
                 remove-tab="onRemoveTab(pane)" split-tabs="onSplitTabs(direction, pane)" ng-transclude>
             </splitted-tabs>
             <tabs ng-if="!!pane.tabs" selected-pane="pane.selectedTab" remove-tab="onRemoveTab(pane)" closable="true">
-                <buttons ng-if="canSplit(pane)" class="split-pane-buttons">
+                <buttons ng-if="canSplit(pane)" class="dg-split-pane-buttons">
                     <button class="fd-button fd-button--compact fd-button--transparent"
                         ng-click="splitVertically(pane)">
                         <i class="sap-icon--screen-split-two" ng-style="{transform: 'rotate(90deg)'}"></i>

ide-core/ui/templates/tabs.html

@@ -1,6 +1,6 @@
-<div class="tabs-container">
-  <div class="tabs-list-container">
-    <ul class="fd-tabs fd-tabs-closable" role="tablist">
+<div class="dg-tabs">
+  <div class="dg-tabs-list">
+    <ul class="fd-tabs" role="tablist">
       <li ng-repeat="pane in panes" aria-selected="{{isPaneSelected(pane)}}" role="tab" class="fd-tabs__item"
         ng-class="{'dirty': pane.dirty}">
         <a class="fd-tabs__link" href="" ng-click="tabClick(pane, $event)" ng-dblclick="tabDblclick(pane)"
@@ -15,7 +15,7 @@
         </a>
       </li>
     </ul>
-    <div class="tabs-list-buttons" ng-transclude="buttons"></div>
+    <div class="dg-tabs-list-buttons" ng-transclude="buttons"></div>
   </div>
-  <div class="tabs-content" ng-transclude="panes"></div>
+  <div class="dg-tabs-content" ng-transclude="panes"></div>
 </div>

ide-core/ui/templates/toolbar.html

@@ -1,8 +1,8 @@
-<div class="fd-toolbar">
+<div class="dg-explorer-toolbar fd-toolbar">
   <span>{{ name }}</span>
   <span class="fd-toolbar__spacer"> </span>
   <div class="fd-popover">
-    <div id="backdrop" aria-hidden="{{hidden}}" class="backdrop" ng-click="hide()"></div>
+    <div aria-hidden="{{hidden}}" class="dg-backdrop" ng-click="hide()"></div>
     <div class="fd-popover__control">
       <button class="fd-button fd-button--compact fd-button--transparent" aria-haspopup="true"
         aria-expanded="{{!hidden}}" aria-label="More" ng-click="toggle()">