Mercurial > hg > orthanc-dicomweb
changeset 689:d2e9b09fa717
upgraded to Bootstrap 5.3.3
| author | Sebastien Jodogne <s.jodogne@gmail.com> |
|---|---|
| date | Tue, 17 Dec 2024 13:36:55 +0100 |
| parents | 900e29a3d936 |
| children | fd04198d710e |
| files | NEWS Resources/CMake/JavaScriptLibraries.cmake WebApplication/app.js WebApplication/index.html |
| diffstat | 4 files changed, 46 insertions(+), 65 deletions(-) [+] |
line wrap: on
line diff
--- a/NEWS Tue Dec 17 12:49:13 2024 +0100 +++ b/NEWS Tue Dec 17 13:36:55 2024 +0100 @@ -11,6 +11,7 @@ * Added support for Orthanc running in "ReadOnly" mode * Fix handling of revisions for cached data * Removed dependency on bootstrap-vue +* Upgraded to Bootstrap 5.3.3 Version 1.17 (2024-06-05)
--- a/Resources/CMake/JavaScriptLibraries.cmake Tue Dec 17 12:49:13 2024 +0100 +++ b/Resources/CMake/JavaScriptLibraries.cmake Tue Dec 17 13:36:55 2024 +0100 @@ -21,14 +21,10 @@ set(BASE_URL "https://orthanc.uclouvain.be/downloads/third-party-downloads") -DownloadFile( - "2c872dbe60f4ba70fb85356113d8b35e" - "${BASE_URL}/jquery-3.7.1.min.js") - DownloadPackage( - "da0189f7c33bf9f652ea65401e0a3dc9" - "${BASE_URL}/dicom-web/bootstrap-4.3.1.zip" - "${CMAKE_CURRENT_BINARY_DIR}/bootstrap-4.3.1") + "102a4386a022f26a3b604e3852fffba8" + "${BASE_URL}/bootstrap-5.3.3.zip" + "${CMAKE_CURRENT_BINARY_DIR}/bootstrap-5.3.3") DownloadPackage( "8242afdc5bd44105d9dc9e6535315484" @@ -81,17 +77,16 @@ ${BABEL_POLYFILL_SOURCES_DIR}/polyfill.min.js ${CMAKE_CURRENT_BINARY_DIR}/axios-0.19.0/dist/axios.min.js ${CMAKE_CURRENT_BINARY_DIR}/axios-0.19.0/dist/axios.min.map - ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-4.3.1/dist/js/bootstrap.min.js + ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-5.3.3/dist/js/bootstrap.min.js ${CMAKE_CURRENT_BINARY_DIR}/vue-2.6.10/dist/vue.min.js - ${CMAKE_SOURCE_DIR}/ThirdPartyDownloads/jquery-3.7.1.min.js DESTINATION ${JAVASCRIPT_LIBS_DIR}/js ) file(COPY ${CMAKE_CURRENT_BINARY_DIR}/Font-Awesome-4.7.0/css/font-awesome.min.css - ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-4.3.1/dist/css/bootstrap.min.css - ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-4.3.1/dist/css/bootstrap.min.css.map + ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-5.3.3/dist/css/bootstrap.min.css + ${CMAKE_CURRENT_BINARY_DIR}/bootstrap-5.3.3/dist/css/bootstrap.min.css.map DESTINATION ${JAVASCRIPT_LIBS_DIR}/css )
--- a/WebApplication/app.js Tue Dec 17 12:49:13 2024 +0100 +++ b/WebApplication/app.js Tue Dec 17 13:36:55 2024 +0100 @@ -109,7 +109,7 @@ window.scrollTo(0, element.offsetTop); }, ShowErrorModal: function() { - $(app.$refs['modal-error']).modal(); + bootstrap.Modal.getOrCreateInstance('#modal-error').show(); }, RefreshJobDetails: function() { axios @@ -201,8 +201,8 @@ item['Tag'] = i; return item; }); - - $(app.$refs['study-details']).modal(); + + bootstrap.Modal.getOrCreateInstance('#study-details').show(); }, RetrieveStudy: function(study) { var base = '../../servers/'; @@ -214,13 +214,13 @@ app.jobLevel = 'study'; app.jobId = response.data.ID; app.jobUri = base + response.data.Path; - $(app.$refs['retrieve-job']).modal(); + bootstrap.Modal.getOrCreateInstance('#retrieve-job').show(); app.RefreshJobDetails(); }); }, ConfirmDeleteStudy: function(study) { app.studyToDelete = study; - $(app.$refs['study-delete-confirm']).modal(); + bootstrap.Modal.getOrCreateInstance('#study-delete-confirm').show(); }, ExecuteDeleteStudy: function(study) { axios @@ -266,7 +266,7 @@ return item; }); - $(app.$refs['series-details']).modal(); + bootstrap.Modal.getOrCreateInstance('#series-details').show(); }, RetrieveSeries: function(series) { var base = '../../servers/'; @@ -279,7 +279,7 @@ app.jobLevel = 'series'; app.jobId = response.data.ID; app.jobUri = base + response.data.Path; - $(app.$refs['retrieve-job']).modal(); + bootstrap.Modal.getOrCreateInstance('#retrieve-job').show(); app.RefreshJobDetails(); }); }, @@ -313,13 +313,13 @@ app.previewFailure = true; }) .finally(function() { - $(app.$refs['series-preview']).modal(); + bootstrap.Modal.getOrCreateInstance('#series-preview').show(); }) }) }, ConfirmDeleteSeries: function(series) { app.seriesToDelete = series; - $(app.$refs['series-delete-confirm']).modal(); + bootstrap.Modal.getOrCreateInstance('#series-delete-confirm').show(); }, ExecuteDeleteSeries: function(series) { axios
--- a/WebApplication/index.html Tue Dec 17 12:49:13 2024 +0100 +++ b/WebApplication/index.html Tue Dec 17 13:36:55 2024 +0100 @@ -30,7 +30,7 @@ <div class="container" id="app"> <p style="height:1em"></p> - <div class="jumbotron"> + <div class="bg-light mb-4 rounded-2 py-5 px-3"> <div class="row"> <div class="col-sm-8"> <h1 class="display-4">DICOMweb client</h1> @@ -62,14 +62,12 @@ </div> - <div class="modal" tabindex="-1" ref="modal-error"> + <div class="modal" tabindex="-1" id="modal-error"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Connection error</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p> @@ -77,7 +75,7 @@ </p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button> + <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button> </div> </div> </div> @@ -91,33 +89,33 @@ No DICOMweb server is configured! </div> <form style="width:100%;padding:5px;"> - <div class="form-group row"> + <div class="mb-3 row"> <label class="col-form-label col-sm-3 cols-lg-3">DICOMweb server:</label> <div class="col-sm-9 cols-lg-9"> - <select class="form-control" v-model="lookup.server"> + <select class="form-select" v-model="lookup.server"> <option v-for="option in servers">{{ option }}</option> </select> </div> </div> - <div class="form-group row"> + <div class="mb-3 row"> <label class="col-form-label col-sm-3 cols-lg-3">Patient ID:</label> <div class="col-sm-9 cols-lg-9"> <input type="text" class="form-control" v-model="lookup.patientID"></input> </div> </div> - <div class="form-group row"> + <div class="mb-3 row"> <label class="col-form-label col-sm-3 cols-lg-3">Patient name:</label> <div class="col-sm-9 cols-lg-9"> <input type="text" class="form-control" v-model="lookup.patientName"></input> </div> </div> - <div class="form-group row"> + <div class="mb-3 row"> <label class="col-form-label col-sm-3 cols-lg-3">Accession number:</label> <div class="col-sm-9 cols-lg-9"> <input type="text" class="form-control" v-model="lookup.accessionNumber"></input> </div> </div> - <div class="form-group row"> + <div class="mb-3 row"> <label class="col-form-label col-sm-3 cols-lg-3">Study date:</label> <div class="col-sm-9 cols-lg-9"> <input type="text" class="form-control" v-model="lookup.studyDate"></input> @@ -174,14 +172,12 @@ </div> - <div class="modal" tabindex="-1" ref="study-details"> + <div class="modal" tabindex="-1" id="study-details"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Details of study</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <table class="table table-striped"> @@ -202,21 +198,19 @@ </table> </div> <div class="modal-footer"> - <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button> + <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button> </div> </div> </div> </div> - <div class="modal" tabindex="-1" ref="study-delete-confirm"> + <div class="modal" tabindex="-1" id="study-delete-confirm"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Confirm deletion</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p> @@ -227,8 +221,8 @@ </p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> - <button type="button" class="btn btn-primary" data-dismiss="modal" @click="ExecuteDeleteStudy">Confirm</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="ExecuteDeleteStudy">Confirm</button> </div> </div> </div> @@ -273,14 +267,12 @@ </div> - <div class="modal" tabindex="-1" ref="series-preview"> + <div class="modal" tabindex="-1" id="series-preview"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Preview of series</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="alert alert-danger alert-dismissible" v-if="previewFailure"> @@ -291,21 +283,19 @@ </div> </div> <div class="modal-footer"> - <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button> + <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button> </div> </div> </div> </div> - <div class="modal" tabindex="-1" ref="series-details"> + <div class="modal" tabindex="-1" id="series-details"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Details of series</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <table class="table table-striped"> @@ -326,21 +316,19 @@ </table> </div> <div class="modal-footer"> - <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button> + <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button> </div> </div> </div> </div> - <div class="modal" tabindex="-1" ref="series-delete-confirm"> + <div class="modal" tabindex="-1" id="series-delete-confirm"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Confirm deletion</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p> @@ -351,22 +339,20 @@ </p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> - <button type="button" class="btn btn-primary" data-dismiss="modal" @click="ExecuteDeleteSeries">Confirm</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> + <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="ExecuteDeleteSeries">Confirm</button> </div> </div> </div> </div> - <div class="modal" tabindex="-1" ref="retrieve-job"> + <div class="modal" tabindex="-1" id="retrieve-job"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Retrieving {{ jobLevel }}</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p> @@ -386,7 +372,7 @@ </p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button> + <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button> </div> </div> </div> @@ -396,7 +382,6 @@ <p style="height:5em"></p> </div> - <script src="../libs/js/jquery-3.7.1.min.js"></script> <!-- Necessary for Bootstrap --> <script src="../libs/js/bootstrap.min.js"></script> <script src="../libs/js/vue.min.js"></script> <script src="../libs/js/axios.min.js"></script>