Make vue-selects rounded

cortezaproject · Nov 6, 2023 · c56b3cc · c56b3cc
1 parent cbcb27d
commit c56b3cc
Show file tree

Hide file tree

Showing 41 changed files with 202 additions and 198 deletions.
diff --git a/client/web/admin/src/components/Apigw/CFilterParams.vue b/client/web/admin/src/components/Apigw/CFilterParams.vue
@@ -1,146 +1,139 @@
 <template>
-  <div>
+  <div v-if="filter.params.length">
     <b-form-group
-      v-if="filter.params.length"
-      class="w-100 mb-0"
+      v-for="(param, index) in filter.params"
+      :key="index"
+      class="text-primary"
     >
-      <template
-        v-for="(param, index) in filter.params"
-      >
-        <b-form-group
-          :key="index"
-        >
-          <template slot="label">
-            {{ $t(`filters.labels.${param.label}`) }}
-
-            <template v-if="param.label === 'expr'">
-              <a
-                v-if="param.label === 'expr'"
-                :href="documentationURL"
-                target="_blank"
-              >
-                <font-awesome-icon
-                  :icon="['far', 'question-circle']"
-                />
-              </a>
-            </template>
-          </template>
+      <template slot="label">
+        {{ $t(`filters.labels.${param.label}`) }}
+
+        <template v-if="param.label === 'expr'">
+          <a
+            v-if="param.label === 'expr'"
+            :href="documentationURL"
+            target="_blank"
+          >
+            <font-awesome-icon
+              :icon="['far', 'question-circle']"
+            />
+          </a>
+        </template>
+      </template>
 
-          <!-- TODO create multi field component-->
-          <b-form-checkbox
-            v-if="param.type === 'bool'"
-            v-model="param.value"
-          />
+      <!-- TODO create multi field component-->
+      <b-form-checkbox
+        v-if="param.type === 'bool'"
+        v-model="param.value"
+      />
+
+      <vue-select
+        v-else-if="param.label === 'workflow'"
+        v-model="param.value"
+        :options="workflows"
+        :get-option-key="getOptionKey"
+        :reduce="wf => wf.workflowID"
+        :placeholder="$t('filters.placeholders.workflow')"
+        :calculate-position="calculateDropdownPosition"
+        class="bg-white rounded"
+      />
+
+      <b-form-select
+        v-else-if="param.label === 'status'"
+        v-model="param.value"
+        :options="httpStatusOptions"
+      >
+        <template #first>
+          <b-form-select-option
+            :value="undefined"
+          >
+            {{ $t('filters.httpStatus.none') }}
+          </b-form-select-option>
+        </template>
+      </b-form-select>
 
-          <vue-select
-            v-else-if="param.label === 'workflow'"
-            v-model="param.value"
-            :options="workflows"
-            :get-option-key="getOptionKey"
-            :reduce="wf => wf.workflowID"
-            :placeholder="$t('filters.placeholders.workflow')"
-            :calculate-position="calculateDropdownPosition"
-            class="bg-white"
+      <template v-else-if="filter.ref === 'response'">
+        <template v-if="param.type === 'input'">
+          <b-form-select
+            v-model="param.value.type"
+            :options="inputTypeOptions"
+            class="mb-2"
           />
 
-          <b-form-select
-            v-else-if="param.label === 'status'"
-            v-model="param.value"
-            :options="httpStatusOptions"
+          <b-input-group>
+            <b-input-group-prepend>
+              <b-button variant="dark">
+                ƒ
+              </b-button>
+            </b-input-group-prepend>
+            <b-form-input
+              v-model="param.value.expr"
+              :placeholder="$t('filters.help.expression.example')"
+            />
+          </b-input-group>
+        </template>
+
+        <template v-else>
+          <b-input-group
+            v-for="(header, hIndex) in param.value"
+            :key="`header-${hIndex}`"
+            class="mb-2"
           >
-            <template #first>
-              <b-form-select-option
-                :value="undefined"
-              >
-                {{ $t('filters.httpStatus.none') }}
-              </b-form-select-option>
-            </template>
-          </b-form-select>
-
-          <template v-else-if="filter.ref === 'response'">
-            <template v-if="param.type === 'input'">
-              <b-form-select
-                v-model="param.value.type"
-                :options="inputTypeOptions"
-                class="mb-2"
-              />
-
-              <b-input-group>
-                <b-input-group-prepend>
-                  <b-button variant="dark">
-                    ƒ
-                  </b-button>
-                </b-input-group-prepend>
-                <b-form-input
-                  v-model="param.value.expr"
-                  :placeholder="$t('filters.help.expression.example')"
-                />
-              </b-input-group>
-            </template>
-
-            <template v-else>
-              <b-input-group
-                v-for="(header, hIndex) in param.value"
-                :key="`header-${hIndex}`"
-                class="mb-2"
-              >
-                <b-form-input
-                  v-model="header.name"
-                  :placeholder="$t('filters.labels.name')"
-                />
-                <b-form-input
-                  v-model="header.expr"
-                  :placeholder="$t('filters.labels.value')"
-                />
-
-                <b-input-group-append>
-                  <b-button
-                    variant="danger"
-                    @click="param.value.splice(hIndex, 1)"
-                  >
-                    <font-awesome-icon
-                      :icon="['far', 'trash-alt']"
-                    />
-                  </b-button>
-                </b-input-group-append>
-              </b-input-group>
+            <b-form-input
+              v-model="header.name"
+              :placeholder="$t('filters.labels.name')"
+            />
+            <b-form-input
+              v-model="header.expr"
+              :placeholder="$t('filters.labels.value')"
+            />
 
+            <b-input-group-append>
               <b-button
-                variant="link"
-                class="text-decoration-none px-0"
-                @click="param.value.push({ name: '', expr: '' })"
+                variant="danger"
+                @click="param.value.splice(hIndex, 1)"
               >
-                + {{ $t('filters.addHeader') }}
+                <font-awesome-icon
+                  :icon="['far', 'trash-alt']"
+                />
               </b-button>
-            </template>
-          </template>
-
-          <template v-else>
-            <b-form-textarea
-              v-if="param.label === 'jsfunc'"
-              v-model="param.value"
-              max-rows="6"
-            />
-            <b-input-group v-else>
-              <b-input-group-prepend
-                v-if="param.label === 'expr'"
-              >
-                <b-button variant="dark">
-                  ƒ
-                </b-button>
-              </b-input-group-prepend>
-              <b-form-input
-                v-if="param.label === 'expr'"
-                v-model="param.value"
-                :placeholder="$t('filters.help.expression.example')"
-              />
-              <b-form-input
-                v-else
-                v-model="param.value"
-              />
-            </b-input-group>
-          </template>
-        </b-form-group>
+            </b-input-group-append>
+          </b-input-group>
+
+          <b-button
+            variant="link"
+            class="text-decoration-none px-0"
+            @click="param.value.push({ name: '', expr: '' })"
+          >
+            + {{ $t('filters.addHeader') }}
+          </b-button>
+        </template>
+      </template>
+
+      <template v-else>
+        <b-form-textarea
+          v-if="param.label === 'jsfunc'"
+          v-model="param.value"
+          max-rows="6"
+        />
+        <b-input-group v-else>
+          <b-input-group-prepend
+            v-if="param.label === 'expr'"
+          >
+            <b-button variant="dark">
+              ƒ
+            </b-button>
+          </b-input-group-prepend>
+          <b-form-input
+            v-if="param.label === 'expr'"
+            v-model="param.value"
+            :placeholder="$t('filters.help.expression.example')"
+          />
+          <b-form-input
+            v-else
+            v-model="param.value"
+          />
+        </b-input-group>
       </template>
     </b-form-group>
   </div>

diff --git a/client/web/admin/src/components/Apigw/CFiltersDropdown.vue b/client/web/admin/src/components/Apigw/CFiltersDropdown.vue
@@ -2,8 +2,9 @@
   <b-dropdown
     data-test-id="dropdown-add-filter"
     :text="$t('filters.addFilter')"
-    variant="light"
-    class="d-inline-flex min-content"
+    variant="primary"
+    size="lg"
+    class="d-inline-flex mt-3"
   >
     <template v-if="filterList.length">
       <b-dropdown-item

diff --git a/client/web/admin/src/components/Apigw/CFiltersStepper.vue b/client/web/admin/src/components/Apigw/CFiltersStepper.vue
@@ -11,6 +11,14 @@
       <h3 class="m-0">
         {{ $t('filters.title') }}
       </h3>
+
+      <div class="d-flex flex-wrap flex-fill-child gap-1">
+        <c-filters-dropdown
+          :available-filters="getAvailableFiltersByStep"
+          :filters="getSelectedFiltersByStep"
+          @addFilter="onAddFilter"
+        />
+      </div>
     </template>
 
     <b-tabs
@@ -38,12 +46,6 @@
     </b-tabs>
 
     <template #footer>
-      <c-filters-dropdown
-        :available-filters="getAvailableFiltersByStep"
-        :filters="getSelectedFiltersByStep"
-        @addFilter="onAddFilter"
-      />
-
       <c-button-submit
         :disabled="disabled"
         :processing="processing"

diff --git a/client/web/admin/src/components/Authclient/CSelectUser.vue b/client/web/admin/src/components/Authclient/CSelectUser.vue
@@ -6,7 +6,7 @@
     :get-option-key="getOptionKey"
     :value="user.value"
     :calculate-position="calculateDropdownPosition"
-    class="bg-white"
+    class="bg-white rounded"
     @search="search"
     @input="updateRunAs"
   />

diff --git a/client/web/admin/src/components/CRolePicker.vue b/client/web/admin/src/components/CRolePicker.vue
@@ -10,7 +10,7 @@
       :get-option-label="r => getRoleLabel(r)"
       :calculate-position="calculateDropdownPosition"
       :placeholder="$t('admin:picker.role.placeholder')"
-      class="bg-white w-100"
+      class="bg-white w-100 rounded"
       multiple
       @search="search"
       @input="updateValue($event)"

diff --git a/client/web/admin/src/components/Permissions/CPermissionClone.vue b/client/web/admin/src/components/Permissions/CPermissionClone.vue
@@ -37,7 +37,7 @@
           multiple
           :placeholder="$t('ui.clone.pick-role')"
           :calculate-position="calculateDropdownPosition"
-          class="bg-white"
+          class="bg-white rounded"
         />
       </b-form-group>
     </b-modal>

diff --git a/client/web/admin/src/components/Permissions/CPermissionList.vue b/client/web/admin/src/components/Permissions/CPermissionList.vue
@@ -231,7 +231,7 @@
           :disabled="add.mode === 'eval' && !!add.userID"
           :placeholder="$t('ui.add.role.placeholder')"
           :calculate-position="calculateDropdownPosition"
-          class="bg-white"
+          class="bg-white rounded"
         />
       </b-form-group>
 
@@ -253,7 +253,7 @@
           clearable
           :placeholder="$t('ui.add.user.placeholder')"
           :calculate-position="calculateDropdownPosition"
-          class="bg-white"
+          class="bg-white rounded"
           @search="searchUsers"
         />
       </b-form-group>

diff --git a/client/web/admin/src/components/Role/CRoleEditorMembers.vue b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
@@ -22,7 +22,7 @@
           :get-option-label="u => getUserLabel(u)"
           :calculate-position="calculateDropdownPosition"
           :placeholder="$t('admin:picker.member.placeholder')"
-          class="bg-white w-100"
+          class="bg-white w-100 rounded"
           multiple
           @search="search"
           @input="updateValue($event)"

diff --git a/client/web/compose/src/components/Admin/Module/DalSettings.vue b/client/web/compose/src/components/Admin/Module/DalSettings.vue
@@ -17,7 +17,7 @@
         :placeholder="$t('connection.placeholder')"
         :get-option-label="getConnectionLabel"
         :calculate-position="calculateDropdownPosition"
-        class="bg-white"
+        class="bg-white rounded"
       />
     </b-form-group>
 

diff --git a/client/web/compose/src/components/Admin/Module/UniqueValues.vue b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
@@ -31,7 +31,7 @@
               :get-option-key="getOptionKey"
               :options="filterFieldOptions(rule)"
               :calculate-position="calculateDropdownPosition"
-              class="bg-white"
+              class="bg-white rounded"
               style="min-width: 300px;"
             />
 

diff --git a/client/web/compose/src/components/Admin/Page/Builder/Selector.vue b/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
@@ -50,7 +50,7 @@
             :calculate-position="calculateDropdownPosition"
             :placeholder="$t('selector.selectableBlocks.placeholder')"
             append-to-body
-            class="bg-white"
+            class="bg-white rounded"
           />
 
           <b-input-group-append>