WEBUI: VirtualMedia buttons width and alinnment

3 files changed, 217 insertions, 1 deletions

diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0010-virtual-media-layout-and-styles.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0010-virtual-media-layout-and-styles.patch
new file mode 100644
index 0000000000..49c76fe928
--- /dev/null
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0010-virtual-media-layout-and-styles.patch
@@ -0,0 +1,215 @@
+From 0d00cabf1c7ddd8021ca71efb83545112aab055e Mon Sep 17 00:00:00 2001
+From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
+Date: Sat, 25 Jun 2022 00:39:23 +0300
+Subject: [PATCH] virtual-media: layout and styles
+
+---
+ src/assets/styles/bmc/custom/_index.scss      |   3 +-
+ .../styles/bmc/custom/_virtual-media.scss     |  36 +++++
+ .../Operations/VirtualMedia/VirtualMedia.vue  | 126 ++++++++++--------
+ 3 files changed, 106 insertions(+), 59 deletions(-)
+ create mode 100644 src/assets/styles/bmc/custom/_virtual-media.scss
+
+diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss
+index 74594e35..eb466c4b 100644
+--- a/src/assets/styles/bmc/custom/_index.scss
++++ b/src/assets/styles/bmc/custom/_index.scss
+@@ -15,4 +15,5 @@
+ @import "./section-divider";
+ @import "./sol";
+ @import "./tables";
+-@import "./toasts";
+\ No newline at end of file
++@import "./toasts";
++@import "./virtual-media";
+diff --git a/src/assets/styles/bmc/custom/_virtual-media.scss b/src/assets/styles/bmc/custom/_virtual-media.scss
+new file mode 100644
+index 00000000..b040fbaa
+--- /dev/null
++++ b/src/assets/styles/bmc/custom/_virtual-media.scss
+@@ -0,0 +1,36 @@
++
++//
++// Media
++//
++.media-buttons-group legend {
++  margin-top: $spacer * 2;
++}
++
++.media-buttons-group >.media-start label {
++  width: 100%;
++}
++
++.media-buttons-group >.media-start .btn {
++  width: 50%;
++}
++
++.media-buttons-group >.media-stop > .btn {
++  width: 50%;
++}
++
++
++//
++// Media Legacy
++//
++.media-legacy-buttons-group {
++  display: inline-grid;
++}
++
++.media-legacy-buttons-group > button {
++  margin-bottom: $spacer * 2;
++}
++
++.media-legacy > div {
++  margin-top: $spacer * 2;
++  margin-bottom: - $spacer * 2;
++}
+diff --git a/src/views/Operations/VirtualMedia/VirtualMedia.vue b/src/views/Operations/VirtualMedia/VirtualMedia.vue
+index 8a3d5add..19f425d9 100644
+--- a/src/views/Operations/VirtualMedia/VirtualMedia.vue
++++ b/src/views/Operations/VirtualMedia/VirtualMedia.vue
+@@ -8,35 +8,41 @@
+         >
+           <b-row>
+             <b-col v-for="(dev, $index) in proxyDevices" :key="$index" md="6">
+-              <b-form-group :label="dev.id" label-class="bold">
+-                <form-file
+-                  v-if="!dev.isActive"
+-                  :id="concatId(dev.id)"
+-                  v-model="dev.file"
+-                >
+-                  <template #invalid>
+-                    <b-form-invalid-feedback role="alert">
+-                      {{ $t('global.form.required') }}
+-                    </b-form-invalid-feedback>
+-                  </template>
+-                </form-file>
+-              </b-form-group>
+-              <b-button
+-                v-if="!dev.isActive"
+-                variant="primary"
+-                :disabled="!dev.file"
+-                @click="startVM(dev)"
+-              >
+-                {{ $t('pageVirtualMedia.start') }}
+-              </b-button>
+-              <b-button
+-                v-if="dev.isActive"
+-                variant="primary"
+-                :disabled="!dev.file"
+-                @click="stopVM(dev)"
+-              >
+-                {{ $t('pageVirtualMedia.stop') }}
+-              </b-button>
++              <div class="media-buttons-group">
++                <div class="media-start">
++                  <b-form-group :label="dev.id" label-class="bold">
++                    <form-file
++                      v-if="!dev.isActive"
++                      :id="concatId(dev.id)"
++                      v-model="dev.file"
++                    >
++                      <template #invalid>
++                        <b-form-invalid-feedback role="alert">
++                          {{ $t('global.form.required') }}
++                        </b-form-invalid-feedback>
++                      </template>
++                    </form-file>
++                  </b-form-group>
++                </div>
++                <div class="media-stop">
++                  <b-button
++                    v-if="!dev.isActive"
++                    variant="primary"
++                    :disabled="!dev.file"
++                    @click="startVM(dev)"
++                  >
++                    {{ $t('pageVirtualMedia.start') }}
++                  </b-button>
++                  <b-button
++                    v-if="dev.isActive"
++                    variant="primary"
++                    :disabled="!dev.file"
++                    @click="stopVM(dev)"
++                  >
++                    {{ $t('pageVirtualMedia.stop') }}
++                  </b-button>
++                </div>
++              </div>
+             </b-col>
+           </b-row>
+         </page-section>
+@@ -53,37 +59,41 @@
+               :key="$index"
+               md="6"
+             >
+-              <b-form-group
+-                :label="device.id"
+-                :label-for="device.id"
+-                label-class="bold"
+-              >
+-                <b-button
+-                  variant="primary"
+-                  :disabled="device.isActive"
+-                  @click="configureConnection(device)"
++              <div class="media-legacy">
++                <b-form-group
++                  :label="device.id"
++                  :label-for="device.id"
++                  label-class="bold"
+                 >
+-                  {{ $t('pageVirtualMedia.configureConnection') }}
+-                </b-button>
++                  <div class="media-legacy-buttons-group">
++                    <b-button
++                      variant="primary"
++                      :disabled="device.isActive"
++                      @click="configureConnection(device)"
++                    >
++                      {{ $t('pageVirtualMedia.configureConnection') }}
++                    </b-button>
+ 
+-                <b-button
+-                  v-if="!device.isActive"
+-                  variant="primary"
+-                  class="float-right"
+-                  :disabled="!device.serverUri"
+-                  @click="startLegacy(device)"
+-                >
+-                  {{ $t('pageVirtualMedia.start') }}
+-                </b-button>
+-                <b-button
+-                  v-if="device.isActive"
+-                  variant="primary"
+-                  class="float-right"
+-                  @click="stopLegacy(device)"
+-                >
+-                  {{ $t('pageVirtualMedia.stop') }}
+-                </b-button>
+-              </b-form-group>
++                    <b-button
++                      v-if="!device.isActive"
++                      variant="primary"
++                      class="float-right"
++                      :disabled="!device.serverUri"
++                      @click="startLegacy(device)"
++                    >
++                      {{ $t('pageVirtualMedia.start') }}
++                    </b-button>
++                    <b-button
++                      v-if="device.isActive"
++                      variant="primary"
++                      class="float-right"
++                      @click="stopLegacy(device)"
++                    >
++                      {{ $t('pageVirtualMedia.stop') }}
++                    </b-button>
++                  </div>
++                </b-form-group>
++              </div>
+             </b-col>
+           </b-row>
+         </page-section>
+-- 
+2.35.1
+
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0010-AppLayout-refresh-UI-on-time.patch b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0099-AppLayout-refresh-UI-on-time.patch
index 8ae2342734..8ae2342734 100644
--- a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0010-AppLayout-refresh-UI-on-time.patch
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue/0099-AppLayout-refresh-UI-on-time.patch
diff --git a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend
index d129cc4e52..273d06e768 100644
--- a/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend
+++ b/meta-ibs/meta-cp2-5422/recipes-phosphor/webui/webui-vue_%.bbappend
@@ -24,7 +24,8 @@ SRC_URI += "\
     file://0007-bootstrap-grid-for-large-media.patch \
     file://0008-SOL-96x44-geometry.patch \
     file://0009-AppHeader-color-nav-trigger-width-wrap.patch \
-    file://0010-AppLayout-refresh-UI-on-time.patch \
+    file://0010-virtual-media-layout-and-styles.patch \
+    file://0099-AppLayout-refresh-UI-on-time.patch \
     "
 
 do_update_logo () {