Hi all, Do any of you have a way to add a non-expandable "About" link on the navbar in DSpace 8.0? I tried @Darryl's method above and unfortunately, while it didn't give me any dev errors, it also didn't work.
Thank you, Arta On Thursday, October 19, 2023 at 4:47:11 PM UTC-4 Lrellis D'erth wrote: > Oh goodness! I hadn't checked out the health page. So smart. Thanks, > Darryl, you are an absolute delight, this is EXACTLY what I needed! > > On Wed, Oct 18, 2023 at 1:50 PM [email protected] <[email protected]> > wrote: > >> Carolyn, I couldn't help myself; had to try this out. >> >> Here's a working example I created based on the code in the DSpace Health >> page components. The stuff in the ngbPanelHeader DIVs could be simpler, >> but the button makes the entire header clickable and the SPANs provide a >> visual indicator of whether the section is expanded or not. It could >> easily be just the title of the section, but this is how the DSpace >> elements were done so it matches the rest of the site. >> >> I just dropped this into one of my components and it seemed to work fine: >> >> <ngb-accordion #acc="ngbAccordion" activeIds="panel1"> >> >> <ngb-panel id="panel1"> >> <ng-template ngbPanelHeader> >> <div class="w-100 d-flex justify-content-between collapse-toggle" >> ngbPanelToggle (click)="acc.toggle('panel1')"> >> <button type="button" class="btn btn-link p-0" >> (click)="$event.preventDefault()" >> [attr.aria-expanded]="!acc.isExpanded('panel1')" >> aria-controls="collapsePanels"> >> Section 1 >> </button> >> <div class="text-right d-flex"> >> <div class="ml-3 d-inline-block"> >> <span *ngIf="acc.isExpanded('panel1')" class="fas >> fa-chevron-up fa-fw"></span> >> <span *ngIf="!acc.isExpanded('panel1')" class="fas >> fa-chevron-down fa-fw"></span> >> </div> >> </div> >> </div> >> </ng-template> >> <ng-template ngbPanelContent> >> Content for section 1 >> </ng-template> >> </ngb-panel> >> >> <ngb-panel id="panel2"> >> <ng-template ngbPanelHeader> >> <div class="w-100 d-flex justify-content-between collapse-toggle" >> ngbPanelToggle (click)="acc.toggle('panel2')"> >> <button type="button" class="btn btn-link p-0" >> (click)="$event.preventDefault()" >> [attr.aria-expanded]="!acc.isExpanded('panel2')" >> aria-controls="collapsePanels"> >> Section 2 >> </button> >> <div class="text-right d-flex"> >> <div class="ml-3 d-inline-block"> >> <span *ngIf="acc.isExpanded('panel2')" class="fas >> fa-chevron-up fa-fw"></span> >> <span *ngIf="!acc.isExpanded('panel2')" class="fas >> fa-chevron-down fa-fw"></span> >> </div> >> </div> >> </div> >> </ng-template> >> <ng-template ngbPanelContent> >> Content for section 2 >> </ng-template> >> </ngb-panel> >> </ngb-accordion> >> >> >> >> >> On Wednesday, October 18, 2023 at 11:14:09 AM UTC-6 [email protected] >> wrote: >> >>> >>> I think you are correct, the normal jquery libraries are not loaded, or >>> are not loaded in such a way that the functions are available to you as >>> they would be in a more traditional web application. Google turned up some >>> suggestions on getting jquery into Angular apps, but I'm wondering if there >>> might be an easier way. >>> >>> Accordions/collapse are definitely in the frontend -- when logged in, >>> the right side nav menu has collapsible menu elements, and the Health page >>> has a very typical looking accordion section. So the functionality is >>> already there for sure. >>> >>> If you look at, for example, >>> src/app/health-page/health-info/health-info.component.html DSpace seems >>> to be using ngb-accordion to implement accordions rather than the >>> typical jquery/Bootstrap accordions. ngb-accordion appears elsewhere >>> in the code as well. Perhaps you could use that as a starting point? >>> >>> - Darryl >>> >>> On Tuesday, October 17, 2023 at 12:00:35 PM UTC-6 Carolyn Sullivan wrote: >>> >>>> @Darryl... thanks, that was definitely it :embarassed look : You're >>>> awesome :) >>>> >>>> Potentially related issue... I'm trying to use Bootstrap 4 in my static >>>> pages for the styling, but even code I copy directly from the Bootstrap >>>> site without modifying doesn't display appropriately. For example, I'm >>>> trying to replace our vanilla javascript custom accordions on the old >>>> jsp page <https://ruor.uottawa.ca/faq.jsp> with the Collapse/Accordion >>>> <https://getbootstrap.com/docs/4.0/components/collapse/>in the new >>>> version, and the tabs don't open when clicked. >>>> >>>> [image: 101723_Bootstrap.PNG] >>>> It's like it's not connecting to the files for jquery or something >>>> still... has anyone seen anything like this? >>>> >>>> Thanks to everyone for your time and support! >>>> >>>> Carolyn. >>>> >>>> On Thursday, October 12, 2023 at 5:19:10 PM UTC-4 [email protected] >>>> wrote: >>>> >>>>> I had a look at the custom "About" component I created for our site, >>>>> and it does use translate for a header without error. >>>>> >>>>> I see that TranslateModule is imported in my theme's >>>>> lazy-theme.module.ts so I assume (and I'm no Angular developer so I'm >>>>> just kinda guessing here) that is how its made available to all the >>>>> components. So I'm wondering if you forgot to import your component in >>>>> lazy-theme.module.ts and that's maybe why it doesn't have translate >>>>> available? In my lazy-theme.module.ts, after all the existing >>>>> imports I added this for my 2 components: >>>>> >>>>> import { AboutComponent } from './app/info/about/about.component'; >>>>> import { GuidelinesComponent } from >>>>> './app/info/guidelines/guidelines.component'; >>>>> >>>>> and at the end of the DECLARATIONS array I added >>>>> >>>>> const DECLARATIONS = [ >>>>> // All the default components are here >>>>> >>>>> AboutComponent, >>>>> GuidelinesComponent, >>>>> ]; >>>>> >>>>> >>>>> If you have done all that and still have the error, then I'm afraid >>>>> I'm at the edge of my Angular knowledge. Hopefully someone else can >>>>> offer >>>>> some suggestions >>>>> >>>>> - Darryl >>>>> >>>>> On Thursday, October 12, 2023 at 2:01:44 PM UTC-6 Carolyn Sullivan >>>>> wrote: >>>>> >>>>>> Thanks everyone! Since my institution (the University of Ottawa in >>>>>> Ontario, Canada) is a bilingual university, it's best practice for us to >>>>>> have independent views in each language--otherwise, our webpages get >>>>>> very >>>>>> bulky with the duplication of text. >>>>>> >>>>>> Adding the translation works fine on the home-news.component.html, >>>>>> but when I try to do something similar in my created components, ie: >>>>>> >>>>>> <div class="container"> >>>>>> <div class="row panel"> >>>>>> <div class="col-md-12"> >>>>>> <h3> >>>>>> {{ 'uoresearch.head' | translate }} >>>>>> </h3> >>>>>> <div class="panel content"> >>>>>> >>>>>> </div> >>>>>> </div> >>>>>> </div> >>>>>> </div> >>>>>> >>>>>> I end up getting >>>>>> >>>>>> error NG8004: No pipe found with name 'translate'. >>>>>> >>>>>> What could be causing this? I assume when the existing components >>>>>> call the default components (ie: import { HomePageComponent as >>>>>> BaseComponent } from '../../../../app/home-page/home-page.component';), >>>>>> it's linking to something that calls the ngx translate module, but I >>>>>> can't >>>>>> figure out what's going on. >>>>>> >>>>>> >>>>>> >>>>>> On Friday, October 6, 2023 at 11:46:43 AM UTC-4 [email protected] >>>>>> wrote: >>>>>> >>>>>>> Carolyn, you could just place both the English and French text in >>>>>>> your home-news.component.html file, and bypass the i18n stuff. >>>>>>> Certainly >>>>>>> not as elegant as having it switch based on the selected language, but >>>>>>> it >>>>>>> is easier. All the email I get from the Government of Canada just have >>>>>>> both languages like that. :) >>>>>>> >>>>>>> DSpace does seem to set the lang attribute of the html tag to the >>>>>>> selected language, so perhaps there's some fancy CSS you could do to >>>>>>> show/hide the French and English sections based on the "fr" or "en" >>>>>>> values >>>>>>> there. I don't know if that's any less work than the i18n method, but >>>>>>> it >>>>>>> would give the appearance of being dynamic. >>>>>>> >>>>>>> - Darryl >>>>>>> >>>>>>> On Tuesday, October 3, 2023 at 8:11:18 AM UTC-6 Carolyn Sullivan >>>>>>> wrote: >>>>>>> >>>>>>>> Thank you all so much for your responses! This is super helpful in >>>>>>>> terms of learning more about customize the interface, and gives me >>>>>>>> some >>>>>>>> direction for issues I need to be aware of (like figuring out an >>>>>>>> alternative to tweaking code outside the theme). One more question: >>>>>>>> My >>>>>>>> institution, uOttawa, is fully bilingual, which means all the text >>>>>>>> needs to >>>>>>>> be translated to both French and English. I think that means that >>>>>>>> material >>>>>>>> like the text on the home-news.component.html page needs to be defined >>>>>>>> in >>>>>>>> the i18n page, but part of me balks at the idea of adding 1000-word >>>>>>>> definitions for labels... is there any other dynamic/Angular way of >>>>>>>> doing >>>>>>>> this, or is this, in fact, the way it's done? >>>>>>>> >>>>>>>> Thanks, >>>>>>>> Carolyn. >>>>>>>> >>>>>>>> On Monday, October 2, 2023 at 2:00:52 PM UTC-4 [email protected] >>>>>>>> wrote: >>>>>>>> >>>>>>>>> Our implementation looks very similar to Mark's. We created 2 >>>>>>>>> additional components in the app/info directory of our theme, one >>>>>>>>> for an About component and one for a Guidelines component. I started >>>>>>>>> by >>>>>>>>> just copying one of the existing "feedback" or "privacy" directories >>>>>>>>> (I >>>>>>>>> forget which one I used, but either will work) then changed the >>>>>>>>> filename >>>>>>>>> names, content, selectors etc. I modified lazy-theme.module.ts >>>>>>>>> in my theme folder to import my 2 new components. This seems to >>>>>>>>> mimic what >>>>>>>>> Mark did according to that diff in Slack. >>>>>>>>> >>>>>>>>> Where Mark and I differ is how I added those 2 components to >>>>>>>>> DSpace. We wanted an About menu at the start of the nav bar with a >>>>>>>>> dropdown for our About and Guidelines pages, and wanted the URLs to >>>>>>>>> be like >>>>>>>>> the Feedback URL (/info/feedback) i.e. /info/about and >>>>>>>>> /info/guidelines. To do this I modified the core >>>>>>>>> /src/app/info/info-routing.module.ts and imported my 2 components >>>>>>>>> there and added this right below the existing FEEDBACK_PATH path >>>>>>>>> (around line 20) >>>>>>>>> >>>>>>>>> { >>>>>>>>> path: 'about', >>>>>>>>> component: AboutComponent, >>>>>>>>> resolve: { breadcrumb: I18nBreadcrumbResolver }, >>>>>>>>> data: { title: 'info.about.title', breadcrumbKey: >>>>>>>>> 'info.about' }, >>>>>>>>> }, >>>>>>>>> { >>>>>>>>> path: 'guidelines', >>>>>>>>> component: GuidelinesComponent, >>>>>>>>> resolve: { breadcrumb: I18nBreadcrumbResolver }, >>>>>>>>> data: { title: 'info.guidelines.title', breadcrumbKey: >>>>>>>>> 'info.guidelines' }, >>>>>>>>> } >>>>>>>>> >>>>>>>>> To add my About menu and the dropdown options (this may not be >>>>>>>>> needed for 7.6 as I think there have been some additional themable >>>>>>>>> components added related to the nav bar; I did this in 7.4 initially) >>>>>>>>> I >>>>>>>>> added this section to /src/app/menu.resolver.ts at about line 96 >>>>>>>>> (i.e I inserted these as the very first entries in the menuList >>>>>>>>> array in createPublicMenu, right before the existing Communities >>>>>>>>> and Collections element) >>>>>>>>> >>>>>>>>> /* About */ >>>>>>>>> { >>>>>>>>> id: `about_about`, >>>>>>>>> parentID: 'about', >>>>>>>>> active: false, >>>>>>>>> visible: true, >>>>>>>>> model: { >>>>>>>>> type: MenuItemType.LINK, >>>>>>>>> text: `info.about.title`, >>>>>>>>> link: `/info/about` >>>>>>>>> } as LinkMenuItemModel >>>>>>>>> }, >>>>>>>>> { >>>>>>>>> id: `about_guidelines`, >>>>>>>>> parentID: 'about', >>>>>>>>> active: false, >>>>>>>>> visible: true, >>>>>>>>> model: { >>>>>>>>> type: MenuItemType.LINK, >>>>>>>>> text: `info.guidelines.title`, >>>>>>>>> link: `/info/guidelines` >>>>>>>>> } as LinkMenuItemModel >>>>>>>>> }, >>>>>>>>> { >>>>>>>>> id: 'about', >>>>>>>>> active: false, >>>>>>>>> visible: true, >>>>>>>>> index: 0, >>>>>>>>> model: { >>>>>>>>> type: MenuItemType.TEXT, >>>>>>>>> text: 'menu.section.about' >>>>>>>>> } as TextMenuItemModel, >>>>>>>>> }, >>>>>>>>> >>>>>>>>> >>>>>>>>> I don't like having to modify code outside of the theme, but I was >>>>>>>>> in a bit of a rush to get this working. I think 7.6 made some >>>>>>>>> additional >>>>>>>>> nav related stuff themable so I might be able to undo that last >>>>>>>>> modification. I haven't actually investigated that yet. >>>>>>>>> >>>>>>>>> - Darryl >>>>>>>>> >>>>>>>>> >>>>>>>>> On Monday, October 2, 2023 at 9:51:09 AM UTC-6 Carolyn Sullivan >>>>>>>>> wrote: >>>>>>>>> >>>>>>>>>> Oh wait, I see Mark has helpfully shared his code in the DSpace >>>>>>>>>> Slack: >>>>>>>>>> https://dspace-org.slack.com/archives/C3TTSEB1V/p1694715563285319 >>>>>>>>>> >>>>>>>>>> The changes aren't working in my repo so far, but this gives me a >>>>>>>>>> good starting point--thanks Mark! >>>>>>>>>> >>>>>>>>>> On Monday, October 2, 2023 at 9:43:43 AM UTC-4 Carolyn Sullivan >>>>>>>>>> wrote: >>>>>>>>>> >>>>>>>>>>> Hello, >>>>>>>>>>> >>>>>>>>>>> Thank you for opening this thread. I have the same problem as >>>>>>>>>>> Mariusz originally did, and was wondering if anyone could offer >>>>>>>>>>> some more >>>>>>>>>>> specific recommendations regarding Mark Wood's solution. >>>>>>>>>>> >>>>>>>>>>> On our repository, we added an additional link to the navbar >>>>>>>>>>> menu like so: >>>>>>>>>>> >>>>>>>>>>> <li ngbDropdown class="nav-item d-flex align-items-center"> >>>>>>>>>>> <a class="nav-link " role="button" data-toggle="dropdown" >>>>>>>>>>> aria-expanded="false" ngbDropdownToggle> About </a> >>>>>>>>>>> <div ngbDropdownMenu class="m-0 border-top-0 ng-trigger >>>>>>>>>>> ng-trigger-slide shadow-none" id="customDrop"> >>>>>>>>>>> <a ngbDropdownItem style="color: #207698" >>>>>>>>>>> href="assets/about/uo-research.html">UO-Research</a> >>>>>>>>>>> <a ngbDropdownItem style="color: #207698" >>>>>>>>>>> href="assets/about/policies.html">Policies</a> >>>>>>>>>>> <a ngbDropdownItem style="color: #207698" >>>>>>>>>>> href="assets/about/faq.html">FAQ</a> >>>>>>>>>>> </div> >>>>>>>>>>> </li> >>>>>>>>>>> >>>>>>>>>>> To use this structure but have it link to a view with the DSpace >>>>>>>>>>> header/footer and text content sandwiched between, would we then >>>>>>>>>>> create a >>>>>>>>>>> component in our custom/app folder, and then use a routing >>>>>>>>>>> module/routerlink to get to that component view instead of using >>>>>>>>>>> the static >>>>>>>>>>> link here (https://angular.io/tutorial/tour-of-heroes/toh-pt5)? >>>>>>>>>>> Is that the simplest way of doing it? >>>>>>>>>>> >>>>>>>>>>> Thanks, >>>>>>>>>>> Carolyn. >>>>>>>>>>> >>>>>>>>>>> >>>>>>>>>>> On Friday, June 10, 2022 at 8:39:52 AM UTC-4 Mariusz wrote: >>>>>>>>>>> >>>>>>>>>>>> It enlightened me and I have done it in the meantime. I just >>>>>>>>>>>> doubled the privacy component accordingly. Managed to. It works. >>>>>>>>>>>> But thanks >>>>>>>>>>>> for any suggestions. >>>>>>>>>>>> >>>>>>>>>>>> Regards >>>>>>>>>>>> Mariusz >>>>>>>>>>>> >>>>>>>>>>>> piątek, 10 czerwca 2022 o 14:25:27 UTC+2 [email protected] >>>>>>>>>>>> napisał(a): >>>>>>>>>>>> >>>>>>>>>>>>> On Fri, Jun 10, 2022 at 02:35:00AM -0700, Mariusz wrote: >>>>>>>>>>>>> > It works, but how can I make static pages look like the >>>>>>>>>>>>> rest. I would like >>>>>>>>>>>>> > a page with static content that looks like other pages in my >>>>>>>>>>>>> repository. I >>>>>>>>>>>>> > have already created my own theme. I would like to have >>>>>>>>>>>>> additional (themed) >>>>>>>>>>>>> > pages with my permanent content, as now they have >>>>>>>>>>>>> info/privacy (Privacy >>>>>>>>>>>>> > Statement) or info/end-user-agreement (End User Agreement) . >>>>>>>>>>>>> Pages with my >>>>>>>>>>>>> > own info. I don't know if I'm explaining well. ;) >>>>>>>>>>>>> >>>>>>>>>>>>> So, I think you are saying that you want a page with all of >>>>>>>>>>>>> the common >>>>>>>>>>>>> DSpace decorations, behaviors and styling, but with static >>>>>>>>>>>>> content in >>>>>>>>>>>>> the middle. That does not sound like a static page, but a >>>>>>>>>>>>> dynamic >>>>>>>>>>>>> page with fixed main content. I think that, to do this, you >>>>>>>>>>>>> would >>>>>>>>>>>>> just write a component whose HTML template file contains no >>>>>>>>>>>>> placeholders and whose Typescript file contains no behaviors. >>>>>>>>>>>>> Use the >>>>>>>>>>>>> theme's styling classes so that the rendering of your >>>>>>>>>>>>> component tracks >>>>>>>>>>>>> changes to the theme. >>>>>>>>>>>>> >>>>>>>>>>>>> The "page" is assembled by Angular in the browser, and the >>>>>>>>>>>>> stuff in >>>>>>>>>>>>> the middle that changes as you navigate is just one part of >>>>>>>>>>>>> the >>>>>>>>>>>>> assembly. >>>>>>>>>>>>> https://en.wikipedia.org/wiki/Single-page_application >>>>>>>>>>>>> >>>>>>>>>>>>> -- >>>>>>>>>>>>> Mark H. Wood >>>>>>>>>>>>> Lead Technology Analyst >>>>>>>>>>>>> >>>>>>>>>>>>> University Library >>>>>>>>>>>>> Indiana University - Purdue University Indianapolis >>>>>>>>>>>>> 755 W. Michigan Street >>>>>>>>>>>>> Indianapolis, IN 46202 >>>>>>>>>>>>> 317-274-0749 <(317)%20274-0749> >>>>>>>>>>>>> www.ulib.iupui.edu >>>>>>>>>>>>> >>>>>>>>>>>> -- >> All messages to this mailing list should adhere to the Code of Conduct: >> https://www.lyrasis.org/about/Pages/Code-of-Conduct.aspx >> --- >> You received this message because you are subscribed to the Google Groups >> "DSpace Community" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected]. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/dspace-community/7211f3e2-1e88-49a5-933d-baa96d8ada84n%40googlegroups.com >> >> <https://groups.google.com/d/msgid/dspace-community/7211f3e2-1e88-49a5-933d-baa96d8ada84n%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> > -- All messages to this mailing list should adhere to the Code of Conduct: https://www.lyrasis.org/about/Pages/Code-of-Conduct.aspx --- You received this message because you are subscribed to the Google Groups "DSpace Community" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/dspace-community/a92d9aff-a894-43d2-ab4f-78ba87e7e7een%40googlegroups.com.
