Fix: Status bar switches to icon view too early

pkg/rancher-desktop/components/BackendProgress.vue

@@ -58,7 +58,11 @@ class BackendProgress extends Vue {
  }
 
  get progressBusy(): boolean {
- return this.progressIndeterminate || this.progress.current < this.progress.max;
+ const busy = this.progressIndeterminate || this.progress.current < this.progress.max;
+
+ this.$emit('progressBarisOpen', busy);
+
+ return busy;
  }
 
  /** Return a string describing the elapsed time or progress. */

pkg/rancher-desktop/components/ImagesFormAdd.vue

@@ -74,7 +74,7 @@ export default Vue.extend({
 
  methods: {
  submit() {
- this.$emit('click', { action: this.action, image: this.image });
+ this.$emit('click', { action: this.action, image: this.image.trim() });
  },
  },
 });

pkg/rancher-desktop/components/NetworkStatus.vue

@@ -14,6 +14,10 @@ export default Vue.extend({
  type: Boolean,
  default: false,
  },
+ isProgressBarVisible: {
+ type: Boolean,
+ default: false,
+ },
  },
  data() {
  return { networkStatus: true };
@@ -63,15 +67,17 @@ export default Vue.extend({
  <i
  v-if="icon"
  class="item-icon"
- :class="icon"
+ :class="{'make-icon-inline': isProgressBarVisible, icon: true}"
  />
  <span
  class="item-label"
+ :class="{'make-label-invisible': isProgressBarVisible}"
  >
  <b>{{ t('product.networkStatus') }}:</b>
  </span>
  <span
  class="item-value"
+ :class="{'make-value-invisible': isProgressBarVisible}"
  >
  {{ networkStatusLabel }}
  </span>
@@ -97,7 +103,7 @@ export default Vue.extend({
  }
  }
 
- @media (max-width: 900px) {
+ @media (max-width: 450px) {
  .icon-dot {
  vertical-align: top;
  padding: 0;

pkg/rancher-desktop/components/StatusBar.vue

@@ -14,7 +14,10 @@ type BarItem = {
 
 export default Vue.extend({
  components: { BackendProgress, StatusBarItem },
- computed: {
+ data() {
+ return { isProgressBarVisible: false };
+ },
+ computed: {
  ...mapGetters('preferences', ['getPreferences']),
  kubernetesVersion(): string {
  return this.getPreferences.kubernetes.version;
@@ -55,6 +58,11 @@ export default Vue.extend({
  ];
  },
  },
+ methods: {
+ updateProgressBarVisibility(isOpen: boolean) {
+ this.isProgressBarVisible = isOpen;
+ },
+ },
 });
 </script>
 
@@ -69,13 +77,14 @@ export default Vue.extend({
  :sub-component="item.component"
  :data="item.data"
  :icon="item.icon"
+ :is-progress-bar-visible="isProgressBarVisible"
  class="status-bar-item"
  >
  </status-bar-item>
  </template>
  </div>
  <div class="right-column">
- <BackendProgress class="progress" />
+ <BackendProgress id="right" class="progress" @progressBarisOpen="updateProgressBarVisibility" />
  </div>
  </footer>
 </template>

pkg/rancher-desktop/components/StatusBarItem.vue

@@ -26,6 +26,10 @@ export default Vue.extend({
  type: String,
  required: true,
  },
+ isProgressBarVisible: {
+ type: Boolean,
+ default: false,
+ },
  },
  computed: {
  getSubComponent(): VueConstructor | undefined {
@@ -61,20 +65,23 @@ export default Vue.extend({
  <img
  v-if="isSvgIcon"
  class="item-icon icon-svg"
+ :class="{'make-icon-inline': isProgressBarVisible}"
  :src="svgIconPath"
  >
  <i
  v-else
  class="item-icon"
- :class="icon"
+ :class="{'make-icon-inline': isProgressBarVisible, icon: true}"
  />
  <span
  class="item-label"
+ :class="{'make-label-invisible': isProgressBarVisible}"
  >
  <b>{{ t(data.label.bar) }}:</b>
  </span>
  <span
  class="item-value"
+ :class="{'make-value-invisible': isProgressBarVisible}"
  >
  {{ data.value }}
  </span>
@@ -84,6 +91,7 @@ export default Vue.extend({
  v-if="subComponent"
  :icon="icon"
  :is-status-bar-item="true"
+ :is-progress-bar-visible="isProgressBarVisible"
  ></component>
  </div>
 </template>
@@ -108,7 +116,7 @@ export default Vue.extend({
  }
  }
 
- @media (max-width: 1000px) {
+ @media (max-width: 500px) {
  .item-label, ::v-deep .item-label {
  display: none;
  }
@@ -118,7 +126,7 @@ export default Vue.extend({
  }
  }
 
- @media (max-width: 900px) {
+ @media (max-width: 450px) {
  .item-value, ::v-deep .item-value {
  display: none;
  }
@@ -127,5 +135,25 @@ export default Vue.extend({
  display: inline;
  }
  }
+
+ @media (max-width: 1000px) {
+ .make-label-invisible, ::v-deep .make-label-invisible {
+ display: none;
+ }
+
+ .make-icon-inline, ::v-deep .make-icon-inline {
+ display: inline;
+ }
+ }
+
+ @media (max-width: 900px) {
+ .make-value-invisible, ::v-deep .make-value-invisible {
+ display: none;
+ }
+
+ .make-icon-inline, ::v-deep .make-icon-inline {
+ display: inline;
+ }
+ }
 }
 </style>

pkg/rancher-desktop/components/Version.vue

@@ -12,6 +12,10 @@ export default Vue.extend({
  type: Boolean,
  default: false,
  },
+ isProgressBarVisible: {
+ type: Boolean,
+ default: false,
+ },
  },
  data() {
  return { version: this.t('product.versionChecking') };
@@ -42,15 +46,17 @@ export default Vue.extend({
  <i
  v-if="icon"
  class="item-icon"
- :class="icon"
+ :class="{'make-icon-inline': isProgressBarVisible, icon: true}"
  />
  <span
  class="item-label"
+ :class="{'make-label-invisible': isProgressBarVisible}"
  >
  <b>{{ t('product.version') }}:</b>
  </span>
  <span
  class="item-value"
+ :class="{'make-value-invisible': isProgressBarVisible}"
  >
  {{ version }}
  </span>

pkg/rancher-desktop/pages/images/add.vue

@@ -90,7 +90,7 @@ export default {
  this.imageOutputCuller = getImageOutputCuller(command);
  },
  doImageAction({ action, image }) {
- this.imageToPull = image.trim();
+ this.imageToPull = image;
  if (action === 'pull') {
  this.doPullAnImage();
  }