diff --git a/app/javascript/components/Ramp.jsx b/app/javascript/components/Ramp.jsx index 6c0d55df9e..bbd27ce7f2 100644 --- a/app/javascript/components/Ramp.jsx +++ b/app/javascript/components/Ramp.jsx @@ -32,8 +32,12 @@ const Ramp = ({ base_url, mo_id, master_files_count, + title, + expand_structure, + admin_links, share, timeline, + playlist, thumbnail, in_progress, cdl @@ -56,11 +60,19 @@ const Ramp = ({ { master_files_count > 0 && +
+ {
} +
{ timeline.canCreate &&
} + { playlist.canCreate &&
} { share.canShare &&
} + { admin_links.canUpdate &&
} { thumbnail.canCreate &&
}
+
+ {
} +
} diff --git a/app/javascript/components/Ramp.scss b/app/javascript/components/Ramp.scss index 863e8b634f..6c616d9cff 100644 --- a/app/javascript/components/Ramp.scss +++ b/app/javascript/components/Ramp.scss @@ -1,12 +1,12 @@ -/* +/* * Copyright 2011-2023, The Trustees of Indiana University and Northwestern * University. Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. - * + * * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software distributed * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -28,16 +28,51 @@ } } +.ramp--rails-title { + font-size: 2rem !important; + margin-top: 1rem !important; +} + .ramp--rails-content { display: flex; + #administrative_options { + text-align: right !important; + } + + .btn-sm { + padding: 0 0; + } + .share-tabs { flex-grow: 2; } - + #share-list { margin-left: -9.25rem; } + + .svg-add-to-playlist { + width: 35px; + margin: 0; + } + + .bgColor { + fill: white; + } + + #add-to-playlist-btn:hover { + .bgColor { + fill: #f2f2f2; + } + } + + .foregroundColor { + fill: none; + stroke: #2a5459; + stroke-width: 2; + stroke-miterlimit: 10; + } } .ramp--supplemental-files { @@ -51,3 +86,95 @@ font-size: 1.25rem; } } + +.nav.nav-tabs { + background-color:#fff; + border:1px solid #e2e7e9; + border-top-left-radius:.5rem; + border-top-right-radius:.5rem; + display:-ms-flexbox; + display:flex; + -ms-flex-wrap:wrap; + flex-wrap:wrap; + + .nav-item { + border:none; + background-color:transparent; + border-bottom:1px solid #e2e7e9; + color:#243142; + cursor:pointer; + -ms-flex-positive:1; + flex-grow:1; + line-height:1; + padding:1rem; + position:relative; + z-index:100; + } + .nav-item:not(:first-child) { + border-left:1px solid #e2e7e9; + margin-left:-1px; + } + .nav-item:hover { + background-color:#f8f9fa; + color:#0e1825; + } + .nav-item:hover:after { + background-color:#e2e7e9; + bottom:0; + content:""; + display:block; + height:.25rem; + left:0; + position:absolute; + width:100%; + } + .nav-item:focus { + outline:.125rem solid #328bb8; + outline-offset:.125rem; + background-color:#edfafd; + } + .nav-item:focus:not(:focus-visible) { + outline:none; + } + .nav-item[aria-selected=true] { + background-color:#f8f9fa; + } + .nav-item[aria-selected=true]:after { + bottom:0; + background-color:#2a5459; + content:""; + display:block; + height:.25rem; + left:0; + position:absolute; + width:100%; + } +} + +.tab-pane { + padding:1rem; + border-bottom-left-radius:.5rem; + border-bottom-right-radius:.5rem; +} +.tab-pane:focus { + outline:.125rem solid #006298; + outline-offset:-.125rem; +} +.tab-pane:focus:not(:focus-visible) { + outline:none; +} + +#expand_all_sections { + display: flex !important; + justify-content: flex-end; + padding-bottom: .5rem !important; +} + +.accordion-toggle-icon { + align-items: center; + color: #4c5a69; +} + +.icn-expand-all { + width: 20px; +} diff --git a/app/views/media_objects/_administrative_links.html.erb b/app/views/media_objects/_administrative_links.html.erb index c244c48fa6..9efdd07f99 100644 --- a/app/views/media_objects/_administrative_links.html.erb +++ b/app/views/media_objects/_administrative_links.html.erb @@ -14,39 +14,15 @@ Unless required by applicable law or agreed to in writing, software distributed --- END LICENSE_HEADER BLOCK --- %> <% if can? :update, @media_object %> -

-

-

-
+
<%= link_to 'Edit', edit_media_object_path(@media_object), class: 'btn btn-primary' %> <% if @media_object.published? %> <% if can?(:unpublish, @media_object) %> - <%= link_to 'Unpublish', update_status_media_object_path(@media_object, status:'unpublish'), method: :put, class: 'btn btn-outline' %> + <%= link_to 'Unpublish', update_status_media_object_path(@media_object, status:'unpublish'), method: :put, class: 'btn btn-primary' %> <% end %> <% else %> - <%= link_to 'Publish', update_status_media_object_path(@media_object, status:'publish'), method: :put, class: 'btn btn-outline' %> - <% end %> - - <%# This might not be the best approach because it makes accidental - deletion possible just by following a link. Need to revisit when - extra cycles are available %> - - <% if can? :destroy, @media_object %> - <%= link_to 'Delete', confirm_remove_media_object_path(@media_object), class: 'btn btn-link' %> + <%= link_to 'Publish', update_status_media_object_path(@media_object, status:'publish'), method: :put, class: 'btn btn-primary' %> <% end %> <% if Settings.intercom.present? and can? :intercom_push, @media_object %> diff --git a/app/views/media_objects/_expand_structure.html.erb b/app/views/media_objects/_expand_structure.html.erb new file mode 100644 index 0000000000..51ede95bcb --- /dev/null +++ b/app/views/media_objects/_expand_structure.html.erb @@ -0,0 +1,30 @@ +<%# +Copyright 2011-2023, The Trustees of Indiana University and Northwestern + University. Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed + under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + CONDITIONS OF ANY KIND, either express or implied. See the License for the + specific language governing permissions and limitations under the License. +--- END LICENSE_HEADER BLOCK --- +%> + +
+ +
+ +<% #TODO: Wire button to expand all sections of the structure or remove if accordion styling cannot be worked out before 7.7 release %> diff --git a/app/views/media_objects/_item_view.html.erb b/app/views/media_objects/_item_view.html.erb index c6c76641db..025b725895 100644 --- a/app/views/media_objects/_item_view.html.erb +++ b/app/views/media_objects/_item_view.html.erb @@ -34,9 +34,13 @@ Unless required by applicable law or agreed to in writing, software distributed base_url: request.protocol+request.host_with_port, mo_id: @media_object.id, master_files_count: @media_object.master_files.size, + title: { content: render('title') }, + expand_structure: { content: render('expand_structure') }, + admin_links: { canUpdate: (current_ability.can? :update, @media_object), content: render('administrative_links') }, share: { canShare: (will_partial_list_render? :share), content: lending_enabled?(@media_object) ? (render('share') if can_stream) : render('share') }, timeline: { canCreate: (current_ability.can? :create, Timeline), content: lending_enabled?(@media_object) ? (render('timeline') if can_stream) : render('timeline') }, thumbnail: { canCreate: (current_ability.can? :edit, @media_object), content: lending_enabled?(@media_object) ? (render('thumbnail') if can_stream) : render('thumbnail') }, + playlist: { canCreate: (current_ability.can? :create, Playlist), content: lending_enabled?(@media_object) ? (render('playlist') if can_stream) : render('playlist') }, in_progress: in_progress, cdl: { enabled: lending_enabled?(@media_object), can_stream: can_stream, embed: render('embed_checkout'), destroy: render('destroy_checkout') } } diff --git a/app/views/media_objects/_playlist.html.erb b/app/views/media_objects/_playlist.html.erb new file mode 100644 index 0000000000..ac4e067221 --- /dev/null +++ b/app/views/media_objects/_playlist.html.erb @@ -0,0 +1,37 @@ +<%# +Copyright 2011-2023, The Trustees of Indiana University and Northwestern + University. Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed + under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + CONDITIONS OF ANY KIND, either express or implied. See the License for the + specific language governing permissions and limitations under the License. +--- END LICENSE_HEADER BLOCK --- +%> + +
+ +
+ +<% # TODO: Build add to playlist modal %> diff --git a/app/views/media_objects/_title.html.erb b/app/views/media_objects/_title.html.erb new file mode 100644 index 0000000000..8481af36a3 --- /dev/null +++ b/app/views/media_objects/_title.html.erb @@ -0,0 +1,25 @@ +<%# +Copyright 2011-2023, The Trustees of Indiana University and Northwestern + University. Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed + under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR + CONDITIONS OF ANY KIND, either express or implied. See the License for the + specific language governing permissions and limitations under the License. +--- END LICENSE_HEADER BLOCK --- +%> + +
+

+ <% unless @media_object.title.blank? %> + <%= @media_object.title %><%= " / #{@media_object.statement_of_responsibility}" if @media_object.statement_of_responsibility.present? %> + <% else %> + <%= @media_object.id %> + <% end %> +

+
diff --git a/app/views/media_objects/show.html.erb b/app/views/media_objects/show.html.erb index 07ba4a895c..da9bc520cc 100644 --- a/app/views/media_objects/show.html.erb +++ b/app/views/media_objects/show.html.erb @@ -16,15 +16,4 @@ Unless required by applicable law or agreed to in writing, software distributed <% @page_title = t('media_objects.show.title', :media_object_title => (@media_object.title || @media_object.id), :application_name => application_name) %> -
-

- <% unless @media_object.title.blank? %> - <%= @media_object.title %><%= " / #{@media_object.statement_of_responsibility}" if @media_object.statement_of_responsibility.present? %> - <% else %> - <%= @media_object.id %> - <% end %> -

-
- -<%= render 'administrative_links' %> <%= render 'item_view' %> diff --git a/spec/features/media_object_spec.rb b/spec/features/media_object_spec.rb index 335226f805..398bf22775 100644 --- a/spec/features/media_object_spec.rb +++ b/spec/features/media_object_spec.rb @@ -1,11 +1,11 @@ # Copyright 2011-2023, The Trustees of Indiana University and Northwestern # University. Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. -# +# # You may obtain a copy of the License at -# +# # http://www.apache.org/licenses/LICENSE-2.0 -# +# # Unless required by applicable law or agreed to in writing, software distributed # under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR # CONDITIONS OF ANY KIND, either express or implied. See the License for the @@ -30,14 +30,14 @@ expect(page.has_content?('Default Unit')).to be_truthy end describe 'metadata display' do - it 'displays the title properly' do + # NOTE: Skipped tests, need JS to render with Ramp integration + skip 'displays the title properly' do title = 'Hello World' media_object.title = title media_object.save visit media_object_path(media_object) expect(page.has_content?(title)).to be_truthy end - # NOTE: Skipped tests, need JS to render with Ramp integration skip 'displays the date properly' do date = '1997' media_object.date_issued = date