Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data users layout #1143

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+217 −61
Open

Data users layout #1143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2e96bff
Started playing with the new style. Early work in progress while we f…
hectorcorrea Dec 17, 2024
be2d1af
Got the table header working and the No Data Users message. Still hav…
hectorcorrea Dec 19, 2024
a1cbc85
Got the rows to display correctly (hard-coded rows, but they display …
hectorcorrea Dec 20, 2024
4bc7f3a
Got the rows to display correctly (data driven again)
hectorcorrea Dec 20, 2024
845e1aa
Minor tweaks
hectorcorrea Dec 20, 2024
aff6fa4
Renamed the classes to make more sense. Kept the reference to the ori…
hectorcorrea Dec 20, 2024
df3230b
Merge branch 'main' into 1102-styles
hectorcorrea Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 170 additions & 4 deletions app/assets/stylesheets/_project.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
font-weight: 400;
line-height: 18px;
width: 100%;

thead {
background-color: $gray-10;
overflow: hidden;
Expand All @@ -31,7 +31,7 @@
}

tr {
border: 1px solid $gray-20;
border: 1px solid $gray-20;
overflow: hidden;
color: $gray-100;
text-overflow: ellipsis;
Expand Down Expand Up @@ -68,8 +68,174 @@

#project-contents {
margin-bottom: 0.75rem;

.sorting:hover {
cursor: pointer;
}
}
}

.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 */
32 changes: 1 addition & 31 deletions app/assets/stylesheets/application.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ h1, h2, h3, h4, h5, h6 {
}

.hidden-element {
display: none;
display: none !important;
}

.netid-large {
Expand Down Expand Up @@ -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;
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These styles were either replaced or moved to app/assets/stylesheets/_project.scss

.alert-primary {
position: absolute;
}
Expand Down
58 changes: 39 additions & 19 deletions app/views/projects/_edit_form.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,25 +38,39 @@
</div>
</div> <!-- row -->

<div class="row ">
<div class="row">
<div class="col-md-3">
<label for="data-user-uid-to-add">Data Users</label>
<span class="data-users-title">Data Users</span>
</div>
<div class="col-md-9">
<table id="data-users-table">
<thead>
<td>NetID</td>
<td>Read Only</td>
<td>Read Write</td>
<td>Action</td>
</thead>
<tbody>
<tr id="row-no-users">
<td>No Data User(s) added</td>
</tr>
</tbody>
</table>
<a id="addUsersButton" href="#" data-toggle="modal" data-target="#addUsersModal">+ Add User(s)</a>
<div class="data-users-section">
<div class="data-users-container">
<div class="data-users-table">
<div class="table" id="data-users-table">
<div class="thead">
<div class="cell"><div class="content">NetID</div></div>
<div class="cell"><div class="content">Read Only</div></div>
<div class="cell"><div class="content">Read Write</div></div>
<div class="cell"><div class="content">Action</div></div>
</div>
<div class="table-row-no-data" id="row-no-users">
<div id="text-no-users">
No Data User(s) added
</div>
</div>
<!-- data rows added via JavaScript addUserHtml() -->
</div>
</div>
<div class="frame-106">
<div class="frame-252">
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6094 6.85714H7.46652V12H5.75223V6.85714H0.609375V5.14286H5.75223V0H7.46652V5.14286H12.6094V6.85714Z" fill="#121212"/>
</svg>
<a id="addUsersButton" href="#" data-toggle="modal" data-target="#addUsersModal">Add User(s)</a>
</div>
</div>
</div> <!-- data-users-container -->
</div> <!-- data-users-section -->
</div>
</div> <!-- row -->

Expand Down Expand Up @@ -231,8 +245,14 @@
rwHtml += " checked>"
}
const actionHtml = `<a href="#" class="delete-user-row">Remove</a>`;
const rowHtml = `<tr><td>${netIdHtml}</td><td>${roHtml}</td><td>${rwHtml}</td><td>${actionHtml}</td></tr>`;
$(`#data-users-table>tbody`).append(rowHtml);
const rowHtml = `
<div class="table-row">
<div class="table-col"><div class="content">${netIdHtml}</div></div>
<div class="table-col"><div class="content">${roHtml}</div></div>
<div class="table-col"><div class="content">${rwHtml}</div></div>
<div class="table-col"><div class="content">${actionHtml}</div></div>
</div>`;
$(`#data-users-table`).append(rowHtml);
}

// Returns the netids of the users already in the HTML FORM
Expand Down Expand Up @@ -350,7 +370,7 @@

// Delete a `<tr>` that represents a user.
$(document).on("click", ".delete-user-row", (el) => {
$(el.target.parentElement.parentElement).remove();
$(el.target.parentElement.parentElement.parentElement).remove();
return false;
});

Expand Down
6 changes: 3 additions & 3 deletions spec/system/project_roles_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions spec/system/project_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down