scottk/oopt-gnpy-web-gui
1
0
Fork 0
mirror of https://github.com/Telecominfraproject/oopt-gnpy-web-gui.git synced 2025-11-02 02:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

stepper and icons rearrange

Browse Source
This commit is contained in:
ramV2E17049
2022-01-27 19:18:18 +05:30
committed by sakv2e10204
parent 624b02fc1e
commit 3136728be5
2 changed files with 266 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
TelecomInfraProject/Pages/homepage.cshtml
View File

@@ -160,6 +160,156 @@
<!-- button section End -->
</nav>
<div class="row align-items-center bg-white">
<div class="row stepper-tab w-100">
<ul class="nav nav-pills w-100" id="pills-tab" role="tablist">
<li class="nav-item tab-view-885" role="presentation" onclick="stepColor(1)" id="step1" data-toggle="modal" data-target="#staticBackdrop4">
<a class="nav-link d-inline-flex" id="stepGP" data-toggle="pill" href="#global"
role="tab" aria-controls="pills-profile" aria-selected="false">
<span class="material-icons pr-2">
speed
</span>
Simulation parameters
</a>
</li>
<li class="nav-item tab-view-885" role="presentation" onclick="stepColor(2)" id="step2">
<a class="nav-link d-inline-flex" id="stepCreateTopology" data-toggle="pill" href="#edit-topology"
role="tab" aria-controls="pills-profile" aria-selected="false">
<span class="material-icons pr-2">
edit_note
</span>
Create/Edit topology
</a>
</li>
<li class="nav-item tab-view-885" role="presentation" onclick="stepColor(3)" id="step3">
<a class="nav-link d-inline-flex" id="stepAddService" data-toggle="pill" href="#add-service"
role="tab" aria-controls="pills-contact" aria-selected="false">
<span class="material-icons">
post_add
</span>
Add/edit services
</a>
</li>
<li class="nav-item tab-view-885" role="presentation" onclick="stepColor(4)" id="step4">
<a class="nav-link d-inline-flex" id="stepSaveNetwork" data-toggle="pill" href="#save-network"
role="tab" aria-controls="pills-contact" aria-selected="false">
<span class="material-icons pr-2">
save
</span>
Save network
</a>
</li>
</ul>
<div class="tab-content stp-tab" id="pills-tabContent">
<div class="tab-pane fade" id="edit-topology" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="group-node">
<div class="create-back" id="btnAddRoadm">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newroadm.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="ROADM" />
</div><span class="sidebar-text1">ROADM</span>
</div>
<div class="create-back" id="btnAddFused">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newattenuator.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Attenuator" />
</div><span class="sidebar-text1">Attenuator</span>
</div>
<div class="create-back" id="btnAddTransceiver">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newtransceiver.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Transceiver" />
</div><span class="sidebar-text1">Transceiver</span>
</div>
</div>
<div class="group-node mt-2">
<div class="create-back" id="btnAddILA">
<div class="card icon-group hover-show">
<img src="./Assets/img/ILA.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="ILA" />
</div><span class="sidebar-text1">ILA</span>
</div>
<div class="create-back" id="btnAddAmplifier" style="display:none">
<div class="card icon-group hover-show">
<img src="~/Assets/img/amptriangle.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Amplifier" style="padding: 1px;" />
</div><span class="sidebar-text1">Amplifier</span>
</div>
</div>
<div class="group-node mt-2">
<div class="create-back" id="btnAddDualFiber">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newdualfiber.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Dual fiber" style="padding: 1px;" />
</div><span class="sidebar-text1">Dual fiber</span>
</div>
<div class="create-back" id="btnAddSingleFiber" style="display:none">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newdualfiber.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Single fiber" style="padding: 1px;" />
</div><span class="sidebar-text1">Single fiber</span>
</div>
<div class="create-back" id="btnAddPatch">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newdualpatch.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Patch" style="padding: 1px;" />
</div><span class="sidebar-text1">Patch</span>
</div>
</div>
<span class="material-icons toggle-arrow" id="toggle-arrow-2">
chevron_left
</span>
</div>
<div class="tab-pane fade d-non" id="add-service" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="create-back" id="btnServiceActive">
<div class="card icon-group hover-show">
<img src="./Assets/img/service.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Service" />
<!-- <p class="m-0 btn-p">Add Service</p> -->
</div><span class="sidebar-text2">Service</span>
</div>
<span class="material-icons toggle-arrow" id="toggle-arrow-3">
chevron_left
</span>
</div>
<div class="tab-pane fade" id="save-network" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="create-back" id="btnSaveNetwork">
<img src="./Assets/img/save1.png" width="20px" height="20px" data-toggle="tooltip" data-placement="top"
title="Save network" />&nbsp;<span class="sidebar-text3">Save network</span>
</div>
<div class="create-back" data-toggle="modal" data-target="#staticBackdrop1">
<img src="./Assets/img/export1.png" width="20px" height="20px" data-toggle="tooltip" data-placement="top"
title="Export network" />&nbsp;<span class="sidebar-text3">Export network</span>
</div>
<!-- <button type="button" class="btn btn-secondary btn-lg create-back" disabled style="margin-top: -1px;cursor: not-allowed;"> </button> -->
<button type="button" class="btn btn-secondary btn-lg create-back1" disabled>
<img src="./Assets/img/analyze.svg" width="20px" height="20px" data-toggle="tooltip" data-placement="top"
title="Analyze network" style="background-color: white;border-radius: 50%;padding: 2px;" />&nbsp;<span class="sidebar-text3">Analyze network</span>
</button>
<span class="material-icons toggle-arrow" id="toggle-arrow-4">
chevron_left
</span>
</div>
</div>
</div>
</div>
<div class="modal fade" id="aboutLabel" data-backdrop="static" data-keyboard="false" tabindex="-1"
aria-labelledby="aboutpagemodal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
@@ -185,182 +335,54 @@
</div>
</div>
<div class="card network-area">
<div class="card network-area ">
<div class="inner-body inner-height">
<div class="work_area map-bg">
<div class="work_area map-bg pt-0">
<div class=" row bg-white border-bottom align-items-center" style="height:47px;">
<div class="row stepper-tab">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item tab-view-885" role="presentation" onclick="stepColor(1)" id="step1" data-toggle="modal" data-target="#staticBackdrop4">
<a class="nav-link d-inline-flex" id="stepGP" data-toggle="pill" href="#global"
role="tab" aria-controls="pills-profile" aria-selected="false">
<span class="material-icons pr-2">
speed
</span>
Simulation parameters
</a>
</li>
<li class="nav-item tab-view-885" role="presentation" onclick="stepColor(2)" id="step2">
<a class="nav-link d-inline-flex" id="stepCreateTopology" data-toggle="pill" href="#edit-topology"
role="tab" aria-controls="pills-profile" aria-selected="false">
<span class="material-icons pr-2">
edit_note
</span>
Create/Edit topology
</a>
</li>
<li class="nav-item tab-view-885" role="presentation" onclick="stepColor(3)" id="step3">
<a class="nav-link d-inline-flex" id="stepAddService" data-toggle="pill" href="#add-service"
role="tab" aria-controls="pills-contact" aria-selected="false">
<span class="material-icons">
post_add
</span>
Add/edit services
</a>
</li>
<li class="nav-item tab-view-885" role="presentation" onclick="stepColor(4)" id="step4">
<a class="nav-link d-inline-flex" id="stepSaveNetwork" data-toggle="pill" href="#save-network"
role="tab" aria-controls="pills-contact" aria-selected="false">
<span class="material-icons pr-2">
save
</span>
Save network
</a>
</li>
</ul>
<div class="col-lg-6">
<div class="tab-content stp-tab" id="pills-tabContent">
<div class="tab-pane fade" id="edit-topology" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="group-node">
<div class="create-back" id="btnAddRoadm">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newroadm.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="ROADM" />
</div><span class="sidebar-text1">ROADM</span>
</div>
<div class="create-back" id="btnAddFused">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newattenuator.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Attenuator" />
</div><span class="sidebar-text1">Attenuator</span>
</div>
<h4 class="mb-0"></h4>
<div class="create-back" id="btnAddTransceiver">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newtransceiver.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Transceiver" />
</div><span class="sidebar-text1">Transceiver</span>
</div>
</div>
<div class="group-node mt-2">
<div class="create-back" id="btnAddILA">
<div class="card icon-group hover-show">
<img src="./Assets/img/ILA.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="ILA" />
</div><span class="sidebar-text1">ILA</span>
</div>
<div class="create-back" id="btnAddAmplifier" style="display:none">
<div class="card icon-group hover-show">
<img src="~/Assets/img/amptriangle.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Amplifier" style="padding: 1px;" />
</div><span class="sidebar-text1">Amplifier</span>
</div>
</div>
<div class="group-node mt-2">
<div class="create-back" id="btnAddDualFiber">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newdualfiber.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Dual fiber" style="padding: 1px;" />
</div><span class="sidebar-text1">Dual fiber</span>
</div>
<div class="create-back" id="btnAddSingleFiber" style="display:none">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newdualfiber.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Single fiber" style="padding: 1px;" />
</div><span class="sidebar-text1">Single fiber</span>
</div>
<div class="create-back" id="btnAddPatch">
<div class="card icon-group hover-show">
<img src="~/Assets/img/newdualpatch.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Patch" style="padding: 1px;" />
</div><span class="sidebar-text1">Patch</span>
</div>
</div>
<span class="material-icons toggle-arrow" id="toggle-arrow-2">
chevron_left
</span>
</div>
<div class="tab-pane fade d-non" id="add-service" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="create-back" id="btnServiceActive">
<div class="card icon-group hover-show">
<img src="./Assets/img/service.svg"
class="mx-auto icon-name justify-content-center align-items-center w-100 h-100" data-toggle="tooltip" data-placement="top"
title="Service" />
<!-- <p class="m-0 btn-p">Add Service</p> -->
</div><span class="sidebar-text2">Service</span>
</div>
<span class="material-icons toggle-arrow" id="toggle-arrow-3">
chevron_left
</span>
</div>
<div class="tab-pane fade" id="save-network" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="create-back" id="btnSaveNetwork">
<img src="./Assets/img/save1.png" width="20px" height="20px" data-toggle="tooltip" data-placement="top"
title="Save network" />&nbsp;<span class="sidebar-text3">Save network</span>
</div>
<div class="create-back" data-toggle="modal" data-target="#staticBackdrop1">
<img src="./Assets/img/export1.png" width="20px" height="20px" data-toggle="tooltip" data-placement="top"
title="Export network" />&nbsp;<span class="sidebar-text3">Export network</span>
</div>
<!-- <button type="button" class="btn btn-secondary btn-lg create-back" disabled style="margin-top: -1px;cursor: not-allowed;"> </button> -->
<button type="button" class="btn btn-secondary btn-lg create-back1" disabled>
<img src="./Assets/img/analyze.svg" width="20px" height="20px" data-toggle="tooltip" data-placement="top"
title="Analyze network" style="background-color: white;border-radius: 50%;padding: 2px;" />&nbsp;<span class="sidebar-text3">Analyze network</span>
</button>
<span class="material-icons toggle-arrow" id="toggle-arrow-4">
chevron_left
</span>
</div>
</div>
</div>
<div class="float-right d-flex right-btn">
<i id="showHideEle" style="padding-top:15px;padding-right:6px;padding-left:6px;cursor:pointer;" data-toggle="tooltip" data-placement="top" title="Show/Hide Fiber/Service label" class="fa fa-eye-slash" aria-hidden="true"></i>
<a href="#" id="button_undo" data-toggle="tooltip" data-placement="top" title="Undo ( Ctrl+Z )">
<img src="~/Assets/img/undo.png" />
</a>
<a href="#" id="button_redo" data-toggle="tooltip" data-placement="top" title="Redo ( Ctrl+Y )">
<img src="~/Assets/img/redo.png" />
</a>
<a href="#" id="btncaptureimagenetwork" data-toggle="tooltip" data-placement="top" title="Camera">
<img src="./Assets/img/cam.png" />
</a>
<div class="col-lg-6">
<div class="float-right d-flex">
<i id="showHideEle" style="padding-top:15px;padding-right:6px;padding-left:6px;cursor:pointer;" data-toggle="tooltip" data-placement="top" title="Show/Hide Fiber/Service label" class="fa fa-eye-slash" aria-hidden="true"></i>
<a href="#" id="button_undo" data-toggle="tooltip" data-placement="top" title="Undo ( Ctrl+Z )">
<img src="~/Assets/img/undo.png" />
</a>
<a href="#" id="button_redo" data-toggle="tooltip" data-placement="top" title="Redo ( Ctrl+Y )">
<img src="~/Assets/img/redo.png" />
</a>
<a href="#" id="btncaptureimagenetwork" data-toggle="tooltip" data-placement="top" title="Camera">
<img src="./Assets/img/cam.png" />
</a>
<a href="#" id="btnSaveNetworkTop" data-toggle="tooltip" data-placement="top" title="Save">
<img src="./Assets/img/save.png" />
</a>
</div>
</div>
<a href="#" id="btnSaveNetworkTop" data-toggle="tooltip" data-placement="top" title="Save">
<img src="./Assets/img/save.png" />
</a>
</div>
<div class="float-right d-flex right-btn" style="padding-right:5px;padding-top:5px;">
<div class="float-right mt-2 collapseepandview">
<div class="flex-container">
<div id="collapseView" class="flex-item-left viewActive">Collapsed view</div>
<div id="expandView" class="flex-item-right">Expanded view</div>
</div>
</div>
<div id="mynetwork" style="height: calc(100vh - 158px);margin-top: 40px;">
<div id="mynetwork" style="height: calc(100vh - 160px);">
</div>
</div>

171
TelecomInfraProject/wwwroot/css/Style.css
View File

@@ -238,11 +238,11 @@ height: 100vh;
.network-area {
background: #fff;
height: calc(100vh - 88px);
height: calc(100vh - 114px);
width: calc(100vw - 21px);
margin-left: 10px;
margin-top: 15px;
border-radius: 20px;
border-radius: 5px;
background-repeat: no-repeat;
background-size: cover;
}
@@ -315,9 +315,8 @@ height: 100vh;
.inner-body {
display: flex;
border: 1px solid #e5e5e5;
height: calc(100vh - 88px);
border-radius: 20px;
height: calc(100vh - 114px);
border-radius: 5px;
}
ul {
@@ -338,6 +337,54 @@ ul {
color: white;
}
.nav-pills li {
padding: 6px 0;
border: none;
position: relative;
width: 25%;
padding-top:0;
padding-bottom:0;
}
.nav-pills li a {
border-radius: 0 !important;
}
.stepper-tab .nav-pills .nav-item .nav-link:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 19px solid transparent;
border-left: 20px solid white;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: 2px;
left: 100%;
z-index: 1;
}
.stepper-tab .nav-pills .nav-item .nav-link:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 19px solid transparent;
border-left: 20px solid #cbe8f3;
position: absolute;
top: 50%;
margin-top: -20px;
left: 100%;
z-index: 2;
}
.stepper-tab .nav-pills .nav-link.active:after {
border-left-color: #305b72 !important;
}
.work_area {
overflow-wrap: anywhere;
padding: 3px 16px 5px 16px;
@@ -784,7 +831,7 @@ background-color: #fff;
.map-bg {
background-image: url(../Assets/img/map-bg.png);
z-index: 1000;
z-index: 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@@ -1189,10 +1236,10 @@ select {
/*stepper design*/
.stepper-tab .tab-content {
z-index:9999;
z-index: 1000;
position: absolute;
left: 0px;
top: 50%;
top: 60%;
transform: translate(0,-50%);
/* max-width: 57px;
width: 100%;*/
@@ -1207,18 +1254,19 @@ select {
}
.stepper-tab .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background: linear-gradient(45deg, #255a5c, #365b7e);
color: #fff !important;
background: #305b72 !important;
/*border-top-right-radius: 20px;
border-bottom-right-radius: 20px;*/
}
.stepper-tab .nav-pills .nav-link {
background: #f3fbfe;
/*border-top-right-radius: 20px;*/
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
/*border-bottom-right-radius: 20px;*/
border-radius: 1.25rem;
background: #cbe8f3;
justify-content: center;
width: 100%;
/* border-top-right-radius: 20px; */
/* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
/* border-bottom-right-radius: 20px; */
}
.stepper-tab .tap-pane {
@@ -1228,28 +1276,7 @@ select {
align-items: center;
}
.stepper-tab ul li {
position: absolute;
}
.stepper-tab ul li:nth-child(1) {
z-index: 10;
}
.stepper-tab ul li:nth-child(2) {
z-index: 9;
margin-left: 230px;
}
.stepper-tab ul li:nth-child(3) {
z-index: 8;
margin-left: 445px;
}
.stepper-tab ul li:nth-child(4) {
z-index: 7;
margin-left: 632px;
}
.stepper-tab .nav-link {
color: #2c7c82;
@@ -1305,25 +1332,6 @@ select {
font-size: 12px;
}
.stepper-tab ul li:nth-child(2) {
z-index: 9;
margin-left: 125px;
}
.stepper-tab ul li:nth-child(3) {
z-index: 8;
margin-left: 273px;
}
.stepper-tab ul li:nth-child(4) {
z-index: 7;
margin-left: 433px;
}
.stepper-tab ul li:nth-child(5) {
z-index: 6;
margin-left: 568px;
}
.btn-white {
background-color: #47a2a9;
@@ -1361,34 +1369,7 @@ select {
font-size: 10px;
}
.stepper-tab ul li:nth-child(1) {
z-index: 10;
margin-top: 42px;
}
.stepper-tab ul li:nth-child(2) {
z-index: 9;
margin-left: 0px;
margin-top: 83px;
}
.stepper-tab ul li:nth-child(3) {
z-index: 8;
margin-left: 0px;
margin-top: 122px;
}
.stepper-tab ul li:nth-child(4) {
z-index: 7;
margin-left: 0px;
margin-top: 164px;
}
.stepper-tab ul li:nth-child(5) {
z-index: 6;
margin-left: 0px;
margin-top: 200px;
}
.btn-white {
background-color: #47a2a9;
@@ -1432,6 +1413,10 @@ select {
background-color: #5c9ca1 !important;
}
.tab-nav-completed:after {
border-left-color: #5c9ca1 !important;
}
.text-tab-completed {
color: #fff !important;
@@ -1524,6 +1509,7 @@ select {
font-size: 15px;
margin-top: -1px;
}
.close-btnn1 {
cursor: pointer;
color: #1eabbc;
@@ -1538,9 +1524,11 @@ select {
background: #efefef !important;
border-radius: 50px !important;
}
.highlight {
background: #143436 !important;
}
#button_undo,
#button_redo {
position: relative;
@@ -1557,10 +1545,11 @@ select {
#button_redo:hover {
background-color: #dadada;
}
.middleNode{
width:24px;
margin-left:-8px;
}
.middleNode {
width: 24px;
margin-left: -8px;
}
.flex-container {
display: flex;
@@ -1577,7 +1566,7 @@ select {
.flex-item-left {
padding: 4px;
height:29px;
height: 29px;
flex: 50%;
border-radius: 10px 0px 0px 10px;
color: #000;
@@ -1588,7 +1577,7 @@ select {
.flex-item-right {
padding: 4px;
height:29px;
height: 29px;
flex: 50%;
border-radius: 0px 10px 10px 0px;
color: #000;
@@ -1608,3 +1597,9 @@ select {
}
}
.collapseepandview {
position: absolute;
top: 63px;
right: 28px;
z-index: 999;
}