Remove all Bootstrap version except 5 in import page and popup (#236)

Remove bootstrap < 5
DevExpress · Oct 25, 2024 · 8e2f775 · 8e2f775
1 parent a998144
commit 8e2f775
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 68 deletions.
diff --git a/src/app/import/import-bootstrap/import-bootstrap.component.css b/src/app/import/import-bootstrap/import-bootstrap.component.css
@@ -1,9 +1,3 @@
-.tabs {
-    margin: 40px auto 0;
-    border-color: #d4d8da;
-    border-bottom-color: transparent;
-}
-
 .file-uploader {
     margin: 20px auto 0;
 }
@@ -16,15 +10,6 @@
     width: 270px;
 }
 
-.tabpanel-item {
-    padding-top: 20px;
-}
-
-:host ::ng-deep .tabs.dx-tabpanel .dx-tab {
-    width: 280px;
-    height: 56px;
-}
-
 
 
 

diff --git a/src/app/import/import-bootstrap/import-bootstrap.component.html b/src/app/import/import-bootstrap/import-bootstrap.component.html
@@ -8,23 +8,15 @@
             Bootstrap Variables
         </div>
         <div class="text">
-            Upload a Bootstrap theme file to apply its colors to a base DevExtreme theme.
-            Choose the "variables.less" file for Bootstrap 3 and the "_variables.scss" file for Bootstrap 4/5.
+            Upload a Bootstrap 5 theme file to apply its colors to a base DevExtreme theme.
+            <br/>
+            Choose the "_variables.scss" file.
         </div>
-        <dx-tab-panel class="tabs" [width]="560" [height]="200" [dataSource]="tabPanelData" [loop]="false">
-            <div *dxTemplate="let data of 'title'">
-                <span>{{data.name}}</span>
-            </div>
-            <div *dxTemplate="let data of 'item'">
-                <div class="tabpanel-item">
-                    <app-bootstrap-uploader
-                    type="default"
-                    [accept]="data.acceptFormat"
-                    [buttonText]="data.uploadButtonText"
-                    [version]="data.version"
-                    ></app-bootstrap-uploader>
-                </div>
-            </div>
-        </dx-tab-panel>
+        <app-bootstrap-uploader
+            type="default"
+            [accept]="bootstrapVariantsData[selectedIndex].acceptFormat"
+            [buttonText]="bootstrapVariantsData[selectedIndex].uploadButtonText"
+            [version]="bootstrapVariantsData[selectedIndex].version"
+        ></app-bootstrap-uploader>
     </div>
 </div>
diff --git a/src/app/import/import-bootstrap/import-bootstrap.component.ts b/src/app/import/import-bootstrap/import-bootstrap.component.ts
@@ -4,22 +4,14 @@ import { Component } from '@angular/core';
     templateUrl: './import-bootstrap.component.html',
     styleUrls: ['./import-bootstrap.component.css']
 })
-
 export class ImportBootstrapComponent {
-    tabPanelData = [{
-        name: 'Bootstrap 5',
+    bootstrapVariantsData = [{
+        text: 'Bootstrap 5',
+        value: 0,
         version: 5,
         acceptFormat: '.scss',
         uploadButtonText: 'Upload SCSS Variables'
-    }, {
-        name: 'Bootstrap 4',
-        version: 4,
-        acceptFormat: '.scss',
-        uploadButtonText: 'Upload SCSS Variables'
-    }, {
-        name: 'Bootstrap 3',
-        version: 3,
-        acceptFormat: '.less',
-        uploadButtonText: 'Upload LESS Variables'
     }];
+
+    selectedIndex = 0;
 }
diff --git a/src/app/layouts/header/import-popup/import-popup.component.html b/src/app/layouts/header/import-popup/import-popup.component.html
@@ -32,19 +32,11 @@
         </dxi-item>
         <dxi-item title="Bootstrap Variables">
             <div class="text second-tab">
-                Upload a Bootstrap theme file to apply its colors to a base DevExtreme theme.
-                Choose the "variables.less" file for Bootstrap 3 and the "_variables.scss" file for Bootstrap 4.
+                Upload a Bootstrap 5 theme file to apply its colors to a base DevExtreme theme.
+                <br/>
+                Choose the "_variables.scss" file.
             </div>
 
-            <dx-radio-group
-                [dataSource]="radioGroupData"
-                displayExpr="text"
-                valueExpr="value"
-                layout="horizontal"
-                [(value)]="selectedIndex"
-                class="radio-group"
-            ></dx-radio-group>
-
             <app-bootstrap-uploader
                 [accept]="radioGroupData[selectedIndex].acceptFormat"
                 [buttonText]="radioGroupData[selectedIndex].uploadButtonText"

diff --git a/src/app/layouts/header/import-popup/import-popup.component.ts b/src/app/layouts/header/import-popup/import-popup.component.ts
@@ -20,18 +20,6 @@ export class ImportPopupComponent {
         version: 5,
         acceptFormat: '.scss',
         uploadButtonText: 'Upload SCSS Variables'
-    }, {
-        text: 'Bootstrap 4',
-        value: 1,
-        version: 4,
-        acceptFormat: '.scss',
-        uploadButtonText: 'Upload SCSS Variables'
-    }, {
-        text: 'Bootstrap 3',
-        value: 2,
-        version: 3,
-        acceptFormat: '.less',
-        uploadButtonText: 'Upload LESS Variables'
     }];
 
     selectedIndex = 0;