Break buttons into new line if side bar gets to small (#7377)

owncloud · Aug 1, 2022 · aa74eb4 · aa74eb4
1 parent 501005c
commit aa74eb4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 21 deletions.
diff --git a/changelog/unreleased/enhancement-user-management-app-saved-dialog b/changelog/unreleased/enhancement-user-management-app-saved-dialog
@@ -3,4 +3,5 @@ Enhancement: User management app saved dialog
 We've replaced the pop up message when the user gets saved by a message which will be shown next to the save button.
 
 https://github.com/owncloud/web/pull/7375
+https://github.com/owncloud/web/pull/7377
 https://github.com/owncloud/web/issues/7351
diff --git a/packages/web-app-user-management/src/components/CompareSaveDialog.vue b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
@@ -1,24 +1,22 @@
 <template>
-  <div class="compare-save-dialog oc-p-s oc-width-1-1">
-    <div class="oc-flex oc-flex-between oc-flex-middle oc-width-1-1">
-      <span v-if="saved" class="oc-flex oc-flex-middle">
-        <oc-icon variation="success" name="checkbox-circle" />
-        <span v-translate class="changes-saved oc-ml-s">Changes saved</span>
-      </span>
-      <span v-else>{{ unsavedChangesText }}</span>
-      <div>
-        <oc-button :disabled="!unsavedChanges" @click="$emit('revert')">
-          <translate>Revert</translate>
-        </oc-button>
-        <oc-button
-          appearance="filled"
-          variation="primary"
-          :disabled="!unsavedChanges || confirmButtonDisabled"
-          @click="$emit('confirm')"
-        >
-          <translate>Save</translate>
-        </oc-button>
-      </div>
+  <div class="compare-save-dialog oc-p-s oc-width-1-1 oc-flex oc-flex-between oc-flex-middle">
+    <span v-if="saved" class="state-indicator oc-flex oc-flex-middle">
+      <oc-icon variation="success" name="checkbox-circle" />
+      <span v-translate class="changes-saved oc-ml-s">Changes saved</span>
+    </span>
+    <span v-else class="state-indicator">{{ unsavedChangesText }}</span>
+    <div>
+      <oc-button :disabled="!unsavedChanges" @click="$emit('revert')">
+        <translate>Revert</translate>
+      </oc-button>
+      <oc-button
+        appearance="filled"
+        variation="primary"
+        :disabled="!unsavedChanges || confirmButtonDisabled"
+        @click="$emit('confirm')"
+      >
+        <translate>Save</translate>
+      </oc-button>
     </div>
   </div>
 </template>
@@ -75,9 +73,13 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .compare-save-dialog {
   background: var(--oc-color-background-highlight);
+  flex-flow: row wrap;
+}
+.state-indicator {
+  line-height: 2rem;
 }
 .changes-saved {
   color: var(--oc-color-swatch-success-default);