diff --git a/app/assets/stylesheets/_project.scss b/app/assets/stylesheets/_project.scss index 951889d9..32f6ba01 100644 --- a/app/assets/stylesheets/_project.scss +++ b/app/assets/stylesheets/_project.scss @@ -15,7 +15,7 @@ font-weight: 400; line-height: 18px; width: 100%; - + thead { background-color: $gray-10; overflow: hidden; @@ -31,7 +31,7 @@ } tr { - border: 1px solid $gray-20; + border: 1px solid $gray-20; overflow: hidden; color: $gray-100; text-overflow: ellipsis; @@ -68,8 +68,174 @@ #project-contents { margin-bottom: 0.75rem; - + .sorting:hover { cursor: pointer; } -} \ No newline at end of file +} + +.data-users-title { + color: $black; + /* Body L Bold */ + font-family: "Libre Franklin"; + font-size: 1.25rem; + font-style: normal; + font-weight: 600; + line-height: 1.875rem; /* 150% */ + } + +.added-user-textbox { + border: none !important; + background-color: white !important; + width: 100% !important; +} + +.delete-user-row { + color: $red-dark; +} + +/* Used for the delete button when adding users within the modal */ +.transparent-button { + background-color: transparent; + background-repeat: no-repeat; + border: none; + cursor: pointer; + overflow: hidden; + outline: none; +} + +.data-users-section { /* frame-218 in Figma */ + display: inline-flex; + align-items: flex-start; + gap: 6.75rem; + + .data-users-container { /* frame-187 in Figma */ + display: flex; + width: 55.9375rem; + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + + .data-users-table { /* table-5 in Figma */ + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + border-radius: 0.5rem; + margin-bottom: -10px; /* not in Figma */ + + .table { + display: flex; + width: 55.9375rem; + flex-direction: column; + align-items: flex-start; + border-radius: 0.25rem; + border: 1px solid $gray-20; + + .thead { + display: flex; + height: 2.9375rem; + align-items: flex-start; + align-self: stretch; + background: $gray-10; + + .cell { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + flex: 1 0 0; + align-self: stretch; + background: rgba(255, 255, 255, 0.05); + font-weight: 600; /* not in Figma */ + + .content { + display: flex; + padding: 0.25rem 0.75rem; + align-items: flex-start; + align-self: stretch; + } + } + } /* thead */ + + .table-row { + display: flex; + height: 2.25rem; + align-items: flex-start; + align-self: stretch; + background: #FFF; + + .table-col { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + flex: 1 0 0; + align-self: stretch; + background: rgba(255, 255, 255, 0.05); + + .content { + display: flex; + padding: 0.25rem 0.75rem; + align-items: flex-start; + /* align-self: stretch; */ + input { + width: 100% !important; + } + } + } + } /* table-row */ + + .table-row-no-data { + display: flex; + height: 2.25rem; + align-items: flex-start; + align-self: stretch; + background: #FFF; + width: 100%; /* not in Figma */ + + #text-no-users { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1 0 0; + align-self: stretch; + background: rgba(255, 255, 255, 0.00); + color: var(--Neutral-Dark-Gray, #717171); + + /* Body XS */ + font-family: "Libre Franklin"; + font-size: 0.875rem; + font-style: normal; + font-weight: 400; + line-height: 1.3125rem; /* 150% */ + } + } /* table-row-no-data */ + } /* table */ + } /* table-5 */ + + .frame-106 { + display: flex; + width: 55.9375rem; + justify-content: space-between; + align-items: center; + + .frame-252 { + display: flex; + align-items: center; + gap: 0.25rem; + + a { + color: var(--Neutral-Black, #121212); + /* Body S Bold */ + font-family: "Libre Franklin"; + font-size: 1rem; + font-style: normal; + font-weight: 600; + line-height: 1.5rem; /* 150% */ + } + } + } + } /* data-users-container */ +} /* data-users-section */ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 71af1f8d..a1673a0a 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -61,7 +61,7 @@ h1, h2, h3, h4, h5, h6 { } .hidden-element { - display: none; + display: none !important; } .netid-large { @@ -118,36 +118,6 @@ h1, h2, h3, h4, h5, h6 { color: var(--Secondary-Red-Dark, #b00002); } -/* Used for the delete button when adding users */ -.transparent-button { - background-color: transparent; - background-repeat: no-repeat; - border: none; - cursor: pointer; - overflow: hidden; - outline: none; -} - -/* Data users in the Edit form */ -#data-users-table { - border-color: gray; - border-style: solid; - border-width: 1px; -} - -#data-users-table > thead { - background-color: lightgray; -} - -.added-user-textbox { - border: none !important; - background-color: white !important; -} - -.delete-user-row { - color: red; -} - .alert-primary { position: absolute; } diff --git a/app/views/projects/_edit_form.html.erb b/app/views/projects/_edit_form.html.erb index e062f989..a25bbff1 100644 --- a/app/views/projects/_edit_form.html.erb +++ b/app/views/projects/_edit_form.html.erb @@ -38,25 +38,39 @@ -
+
- + Data Users
- - - - - - - - - - - - -
NetIDRead OnlyRead WriteAction
No Data User(s) added
- + Add User(s) +
+
+
+
+
+
NetID
+
Read Only
+
Read Write
+
Action
+
+
+
+ No Data User(s) added +
+
+ +
+
+
+
+ + + + Add User(s) +
+
+
+
@@ -231,8 +245,14 @@ rwHtml += " checked>" } const actionHtml = `Remove`; - const rowHtml = `${netIdHtml}${roHtml}${rwHtml}${actionHtml}`; - $(`#data-users-table>tbody`).append(rowHtml); + const rowHtml = ` +
+
${netIdHtml}
+
${roHtml}
+
${rwHtml}
+
${actionHtml}
+
`; + $(`#data-users-table`).append(rowHtml); } // Returns the netids of the users already in the HTML FORM @@ -350,7 +370,7 @@ // Delete a `` that represents a user. $(document).on("click", ".delete-user-row", (el) => { - $(el.target.parentElement.parentElement).remove(); + $(el.target.parentElement.parentElement.parentElement).remove(); return false; }); diff --git a/spec/system/project_roles_spec.rb b/spec/system/project_roles_spec.rb index 2a26e11e..2ff11e12 100644 --- a/spec/system/project_roles_spec.rb +++ b/spec/system/project_roles_spec.rb @@ -38,7 +38,7 @@ expect(page.find("button[value=Submit]").disabled?).to be false # Adds a data user (read-only) - click_on "+ Add User(s)" + click_on "Add User(s)" fill_in_and_out "data-user-uid-to-add", with: read_only.uid click_on "Save changes" @@ -172,7 +172,7 @@ it "allows a Data Sponsor to assign a Data User" do sign_in sponsor_user visit "/projects/#{project.id}/edit" - click_on "+ Add User(s)" + click_on "Add User(s)" fill_in_and_out "data-user-uid-to-add", with: ro_data_user.uid click_on "Save changes" click_on "Submit" @@ -182,7 +182,7 @@ it "allows a Data Manager to assign a Data User" do sign_in data_manager visit "/projects/#{project.id}/edit" - click_on "+ Add User(s)" + click_on "Add User(s)" fill_in_and_out "data-user-uid-to-add", with: ro_data_user.uid click_on "Save changes" click_on "Submit" diff --git a/spec/system/project_spec.rb b/spec/system/project_spec.rb index d40def68..a1170223 100644 --- a/spec/system/project_spec.rb +++ b/spec/system/project_spec.rb @@ -262,7 +262,7 @@ click_on "Create new project" expect(page.find("#non-editable-data-sponsor").text).to eq sponsor_user.uid fill_in_and_out "data_manager", with: data_manager.uid - click_on "+ Add User(s)" + click_on "Add User(s)" fill_in_and_out "data-user-uid-to-add", with: read_only.uid click_on "Save changes" select "Research Data and Scholarship Services", from: "departments" @@ -283,7 +283,7 @@ click_on "Create new project" expect(page.find("#non-editable-data-sponsor").text).to eq sponsor_user.uid fill_in_and_out "data_manager", with: data_manager.uid - click_on "+ Add User(s)" + click_on "Add User(s)" fill_in_and_out "data-user-uid-to-add", with: read_write.uid click_on "Save changes" find(:xpath, "//*[@id='data_user_1_rw']").click # make user read-write @@ -308,7 +308,7 @@ expect(page).to have_content "No Data User(s) added" # Launch the modal, trigger the validation, and then add a valid user - click_on "+ Add User(s)" + click_on "Add User(s)" fill_in_and_out "data-user-uid-to-add", with: "notuser" expect(page.find("#data-user-uid-to-add_error").text).to eq "Invalid value entered" fill_in_and_out "data-user-uid-to-add", with: read_only.uid @@ -317,7 +317,7 @@ # Launch the modal again and this time don't add any users # (but we already had added some so we don't expect the "no data users" message) - click_on "+ Add User(s)" + click_on "Add User(s)" click_on "Save changes" expect(page).not_to have_content "No Data User(s) added" end