From 06b88af04657be961a4da97a586706fb99eb6a27 Mon Sep 17 00:00:00 2001 From: Nathan Friend Date: Tue, 12 Mar 2019 13:35:55 -0300 Subject: Add reusable project_selector component This commit adds a resuable UI component that allows a user to search for a project name, shows the search results, and allows the user to select one or more projects. This component communicates with its parent using props and events. This component was originally created for use in the EE-specific "Operations Dashboard" page, but it is applicable for CE use cases as well, and so was added as a CE shared component. In addition, some logic was extracted from the frequent_items_list_item component into shared filters to avoid logic duplication. --- .../stylesheets/components/project_list_item.scss | 27 ++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 app/assets/stylesheets/components/project_list_item.scss (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/components/project_list_item.scss b/app/assets/stylesheets/components/project_list_item.scss new file mode 100644 index 00000000000..6f9933e3d70 --- /dev/null +++ b/app/assets/stylesheets/components/project_list_item.scss @@ -0,0 +1,27 @@ +.project-list-item { + &:not(:disabled):not(.disabled) { + &:focus, + &:active, + &:focus:active { + outline: none; + box-shadow: none; + } + } +} + +// When housed inside a modal, the edge of each item +// should extend to the edge of the modal. +.modal-body { + .project-list-item { + border-radius: 0; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + + // should be replaced by Bootstrap's + // .overflow-hidden utility class once + // we upgrade Bootstrap to at least 4.2.x + .project-namespace-name-container { + overflow: hidden; + } + } +} -- cgit v1.2.1 From eb95100c066d2d70a2128ea9ac6776f720b0777a Mon Sep 17 00:00:00 2001 From: mfluharty Date: Thu, 28 Mar 2019 14:00:44 -0600 Subject: Make corrections to address review feedback Refactor tests to follow conventions Add XSS test Eliminate a few unnecessary lines, comments, and parameters Use Vue.set for nested state changes --- app/assets/stylesheets/components/project_list_item.scss | 3 --- 1 file changed, 3 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/components/project_list_item.scss b/app/assets/stylesheets/components/project_list_item.scss index 6f9933e3d70..8e7c2c4398c 100644 --- a/app/assets/stylesheets/components/project_list_item.scss +++ b/app/assets/stylesheets/components/project_list_item.scss @@ -17,9 +17,6 @@ margin-left: -$gl-padding; margin-right: -$gl-padding; - // should be replaced by Bootstrap's - // .overflow-hidden utility class once - // we upgrade Bootstrap to at least 4.2.x .project-namespace-name-container { overflow: hidden; } -- cgit v1.2.1