ui: fix NsTimePicker menu orientation (#735)

* Clm/syslog modals timepicker drop direction and text input width * ns8-ui-lib version update * Storybook update * Remove max-width to NsTextInput
NethServer · Oct 21, 2024 · 2f59fe7 · 2f59fe7
1 parent f9baaf4
commit 2f59fe7
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 28 deletions.
diff --git a/core/ui/package.json b/core/ui/package.json
@@ -16,7 +16,7 @@
     "@carbon/icons-vue": "^10.37.0",
     "@carbon/themes": "^10.34.0",
     "@carbon/vue": "^2.40.0",
-    "@nethserver/ns8-ui-lib": "^1.0.3",
+    "@nethserver/ns8-ui-lib": "^1.1.4",
     "await-to-js": "^3.0.0",
     "axios": "^0.21.2",
     "carbon-components": "^10.41.0",

diff --git a/core/ui/src/components/settings/CloudLogManagerConfigureModal.vue b/core/ui/src/components/settings/CloudLogManagerConfigureModal.vue
@@ -89,8 +89,9 @@
             </cv-date-picker>
             <NsTimePicker
               hideClearButton
+              dropDirection="up"
               :label="$t('cloud_log_manager_forwarder.start_time')"
-              class="interval-time mg-bottom-140"
+              class="interval-time"
               v-model="time"
             >
             </NsTimePicker>
@@ -323,8 +324,4 @@ export default {
 .interval-time {
   display: inline-flex;
 }
-
-.mg-bottom-140 {
-  margin-bottom: 140px;
-}
 </style>
diff --git a/core/ui/src/components/settings/SyslogConfigureModal.vue b/core/ui/src/components/settings/SyslogConfigureModal.vue
@@ -125,8 +125,9 @@
             </cv-date-picker>
             <NsTimePicker
               hideClearButton
+              dropDirection="up"
               :label="$t('syslog_forwarder.start_time')"
-              class="interval-time mg-bottom-140"
+              class="interval-time"
               v-model="time"
             >
             </NsTimePicker>
@@ -343,8 +344,4 @@ export default {
 .interval-time {
   display: inline-flex;
 }
-
-.mg-bottom-140 {
-  margin-bottom: 140px;
-}
 </style>
diff --git a/core/ui/src/stories/NsTimePicker.stories.js b/core/ui/src/stories/NsTimePicker.stories.js
@@ -3,6 +3,14 @@ import { NsTimePicker } from "@nethserver/ns8-ui-lib";
 export default {
   title: "Components/NsTimePicker",
   component: NsTimePicker,
+  argTypes: {
+    dropDirection: {
+      control: {
+        type: "radio",
+        options: ["up", "down", "auto"],
+      },
+    },
+  },
 };
 
 const Template = (args, { argTypes }) => ({
@@ -11,11 +19,28 @@ const Template = (args, { argTypes }) => ({
   template: '<NsTimePicker v-bind="$props" />',
 });
 
+const TemplateDropDirection = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { NsTimePicker },
+  template: '<NsTimePicker v-bind="$props" style="margin-top: 120px"/>',
+});
+
 export const Default = Template.bind({});
 Default.args = {
   value: "23:45",
   label: "Label",
   hideClearButton: false,
   invalidMessage: "",
   light: true,
+  dropDirection: "down",
+};
+
+export const DropUp = TemplateDropDirection.bind({});
+DropUp.args = {
+  value: "23:45",
+  label: "Label",
+  hideClearButton: false,
+  invalidMessage: "",
+  light: true,
+  dropDirection: "up",
 };
diff --git a/core/ui/src/styles/_core.scss b/core/ui/src/styles/_core.scss
@@ -558,18 +558,6 @@ a {
   max-width: 12rem;
 }
 
-// styles for large devices
-@media (min-width: $breakpoint-medium) {
-  // limit form fields width on large devices
-  .bx--text-input,
-  .bx--text-input__field-wrapper,
-  .cv-select,
-  .cv-multi-select,
-  .cv-combo-box {
-    max-width: 38rem;
-  }
-}
-
 // fix padding of number input
 .bx--number input[type="number"] {
   padding-right: 5rem;

diff --git a/core/ui/yarn.lock b/core/ui/yarn.lock
@@ -2002,9 +2002,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nethserver/ns8-ui-lib@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "@nethserver/ns8-ui-lib@npm:1.0.3"
+"@nethserver/ns8-ui-lib@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "@nethserver/ns8-ui-lib@npm:1.1.4"
   dependencies:
     "@rollup/plugin-json": ^4.1.0
     core-js: ^3.15.2
@@ -2013,7 +2013,7 @@ __metadata:
     vue-date-fns: ^2.0.1
   peerDependencies:
     vue: ^2.6.12
-  checksum: 6ea6678e8eca97c39abf20e29d230f51760e538ceb91caf510af5d5fcaf2052f8e94d8c5867b45c1f6a8ce6ab63cd14355b9711f27dfa695d9cff13a7a89b069
+  checksum: b6694ae72a17ce791757f2653a72e04606514a12727cfc2fb1bfdfd2314c6788e6115c18dc0ce8d0a4a12b3fb6dcaca78abf68199db469235f94469d801bc964
   languageName: node
   linkType: hard
 
@@ -13076,7 +13076,7 @@ __metadata:
     "@carbon/icons-vue": ^10.37.0
     "@carbon/themes": ^10.34.0
     "@carbon/vue": ^2.40.0
-    "@nethserver/ns8-ui-lib": ^1.0.3
+    "@nethserver/ns8-ui-lib": ^1.1.4
     "@storybook/addon-actions": ^6.2.9
     "@storybook/addon-essentials": ^6.2.9
     "@storybook/addon-links": ^6.2.9