Giter VIP home page Giter VIP logo

angular-mgl-timeline's People

Contributors

adamkasztenny avatar alex-del-var avatar anderstornkvist avatar angular-cli avatar cribbstechnologies avatar cyrillbrito avatar dimzeta avatar glutengo avatar guillaumegarcia13 avatar koshimagoyal avatar larjohn avatar m-glutting avatar regazzoj avatar victorgaiva avatar wheater avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

angular-mgl-timeline's Issues

Dot not appearing on timeline in Angular 8.1.2

Issue
When adding the dot to the timeline it simply does not appear on to the timeline

Expected Behavior
The dot appearing to the timeline as seen in the docs

Dependencies

 "@angular/animations": "^8.1.2",
    "@angular/cdk": "^8.1.1",
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/material": "^8.1.1",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "angular-mgl-timeline": "^0.3.2",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"

Code

<mgl-timeline>
    <mgl-timeline-entry>
        <mgl-timeline-entry-header>Header</mgl-timeline-entry-header>
        <mgl-timeline-entry-content>Content</mgl-timeline-entry-content>
        <mgl-timeline-entry-dot></mgl-timeline-entry-dot>
    </mgl-timeline-entry>
</mgl-timeline>

That is the exact code I have implemented. The dot does not appear on the UI. Here is an image of what is being displayed.
image

problem accessing to css

i've read in the release 0.3.0 was fixed this problem, but i cannot figure it out.
im trying to access to .mgl-timeline-line { background-color: aqua;} and set it background color but it seems to be ignored in any way possible.

any help should be appreciated.

thanks

responsive timeline

Hello,
I am creating a page where a timeline is necessary, the timeline was created correctly but when I open the page the timeline is generated with the mobile class, how can I change the minimum resolution to create that variable?

Side entry not working

When I copy the side data code from the demo, i don't see any data on the side. Is there a way to fix this?

Demo is broken

The stackblitz demo fails to load with the error:

Error in /~/src/app/app.module.ts (9:22)

Cannot use import statement outside a module

BrowserAnimationsModule required?

It seems that importing BrowserAnimationsModule is not optional. (tried removing it in the Stackblitz demo)
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Thanks for your confirmation.

duplicated entry for 'Add Entry'. Help Needed!

Okay when you click the button 'Add Entry', it adds an exact duplicate of the first entry.. im trying to create a timeline for different years whereby the headers contain the years e.g, 2018, 2019, 2020....etc and the content section will have different content for each entry. but the Add Entry function pushes (adds to the array) an exact duplicate of the first entry due to "entries" defined in the ts file as as shown below.....
(please see the attached photos)

is there a way of maybe defining different entries to hold different header and content material as opposed to the duplication. i want every object in the array "entries" to have different content.
entries
duplicated

[Usage] 'Color' attribute is confusing

The 'color' attribute on mgl-timeline-entry-dot is actually confusing.
One may expect to fill a rgb or a hexadecimal value whereas the content is set as a class on the element.

If it actually is a class, why not simply use existing class or ngClass instead?

Cannot use with lazy loading and child module

Hello, i moved my app from single module with app.module to multiple modules to can use lazy loading, but i dont know id i was importing wrong the references, perhaps if you hava an example with lazy loading, because the app don't throws errors, but the timeline is not working.

this is app.module

`
...
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MglTimelineModule } from "angular-mgl-timeline";

...

@NgModule({
declarations: [
...
],
imports: [
...
MglTimelineModule ,
...
],
exports: [
...
MglTimelineModule ,
...
],
})
`

and in the child module i import the MglTimelineModule normal and set it in the declarations array.

please if you could provide to me an example with lazy loading i'll be very thankful.

Demo or image example?

It would be a great improvement of the readme file if you added a example on plunker or stackblitz, or even just an image.

๐Ÿ‘

Update to Angular 15

Hi !

I need this package to be Angular 15 compatible to update a project to Angular 15.

I made a pull request for this purpose #95

Thanks for having a look and taking care of this. (:

Show current day

It would be great to have some kind of visual clue on where is the current date on the timeline.
For instance through a showCurrent attribute, either a semi-transparent line is shown on the timeline, or a bullet is added as a timeline entry, and so on...

.mobile class is removed between 670px and 767px

Hi,

Weird one here, the .mobile class is present below 670px screen width and between 767px and 863px.
However, it is missing between 670px and 767px. How can I get around this?

Thanks,
Alan.

Disable animations

Hi, is there anyway to disable the animations when clicking on events?

Error "$event.path is undefined" in FireFox

Using the timeline, we experience an error in firefox when clicking on a timeline entry. The error text in the console is:

ERROR TypeError: "$event.path is undefined"
    toggle Angular
View_MglTimelineEntryComponent_0 MglTimelineEntryComponent.html:3 handleEvent13Angular

The FireFox version is 65.0.1 running on Ubuntu 16.04 and 18.04
The angular-mgl-timeline version is 0.3.0.

Need to use with boostrap

I am using this lib with Angular v9 and boostrap. As my project has no material dependencies, I am not including the theme file of angular-mgl-timeline. Because of which I am not able to view content on click of header as shown in https://stackblitz.com/edit/angular-mgl-timeline. I even tried copying the same code, it does not work.

How can we use this lib with boostrap?

Issue with Alternate

I am having trouble with the alternate option.

<mgl-timeline [toggle]="toggle" [alternate]="alternate">
   <div *ngFor="let year of workExData;">
     <app-work-ex-year
       [displayYear]=Object.keys(year)[0]>
     </app-work-ex-year>
     <app-work-ex-position *ngFor="let job of year[Object.keys(year)[0]].jobs" [job]=job>
     </app-work-ex-position>
   </div>
</mgl-timeline>

Both app-work-ex-year and app-work-ex-position are components that have a template for the mgl-timeline-entry component. I have set both toggle and alternate to be true but they do not work. I also read in the documentation that the default behaviour for toggle and alternate is also true but I'm not sure why its working. Could it be related to the mgl-timeline-entry being wrapped by a div? Any suggestions?

first load force to mobile version

i have issue when the page first time load the timeline is forced to mobile so the alternate effect won't appear
but when i open the inspector it's suddenly change back to desktop make the alternate effect appear

can you help me ?
sorry for bad english

does not work on angular 6 material

ERROR in node_modules/angular-mgl-timeline/src/timeline/timeline-entry-content/timeline-entry-content.component.d.ts(12,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-mgl-timeline/src/timeline/timeline-entry-content/timeline-entry-content.component.d.ts(13,9): error TS1086: An accessor cannot be declared in an ambient context.

showing above-mentioned issues while compile

Repository ownership for Angular updates

Hi there, I have been using this repo since Angular 6 (thank you so much, btw!) and I am noticing that since Angular 8, it's fallen behind on updates. I would be happy to help maintain the repo to keep it updated to the latest version of Angular if you would like some help.

Angular 6

Hello,
it could be a good idea to bump the peerDependencies to Angular 6 now

Theme typography scss build error

Hi there,
I am getting this error when trying to apply the material theme with @include mgl.timeline-theme($your-theme):

SassError: isn't a valid CSS value.
image

In commit dce728f line 12 in src/timeline/timeline.theme.scss, was changed to
mat.font-family((font-family: $typographyConfig));

However it works if I change it locally to the following
mat.font-family($typographyConfig);

Version: 1.0.0 - Angular 14

Custom Dot Icons

Is there a way to add custom icons either within the dots or in-place of the dots?

0.3.3 - can't build for production

When executing ng build --prod, we're getting the following error:

Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined

I changed version to 0.3.2, which temporarily fixed the problem.

when the height of the content changes it is not readjusted.

Here an example of what I want to do https://stackblitz.com/edit/angular-mgl-timeline-gdonxn

I want to load the content of each entry as it expands, because it is very expensive.
But once the content is loaded the entry size does not adjust


  <mgl-timeline >
    <mgl-timeline-entry *ngFor="let event of events; let i = index;" 
    (expand)="onExpandEntry($event, i)">
        <mgl-timeline-entry-dot></mgl-timeline-entry-dot>
        <mgl-timeline-entry-header>
          {{event.label}}
        </mgl-timeline-entry-header>
        <mgl-timeline-entry-content>
          <app-my-event  *ngIf="event.expanded" [eventId]="event.id"></app-my-event>
        </mgl-timeline-entry-content>
    </mgl-timeline-entry>
  </mgl-timeline>

I'm using *ngIf="event.expanded" to lazy load the content

Expose side property

In a design prospective, I think the side property would be helpful.
I am trying to set style depending on the side where the box is.

Request: Unanimated dot

The idea is to keep the dot unmovable while still allowing the expanding feature. Couldn't find a way to override the animation or stop the event propagation so I had to modify the lib.

Awesome timeline btw!

Angular 8

Hello,
Can you add angular 8 in the peer dependencies ?

Thanks

Add Angular Input for left/right direction

Hi to all,
I see that if [alternate] is set to false, all entries are shown to the left of the timeline. The only way to show them on the right is to force the mobile width (am I right?). It will be useful - in my opinion - to add something like [symmetry] property to mgl-timeline to configure the default direction when alternate is false.
Let me know :)

Provide a way to resize side entries

Hi,

my issue is more of an enhancement than real issue: could it be possible for you to add an option to easily size the side?

Actually, the sides are showing a date but it feels weird to have half a screen showing only a date.

I know I could play with the module code to add that (or worse, hard code my wanted size) but that would be quite dirty. A component option to play with side size would be great. Being no expert @angular, I would not know how to do it a clean way. If anyone have a way that does not involve modifying the module, that might also be good to add the steps in the readme.

remove console debug

remove line 90 from timeline component
console.log(this.mobileWidthThreshold);

Provide an alternate way to fill entries

I would be great to provide an entryValues attibute to fill the entries for the timeline.
Something along the line of:

interface IEntryValue {
    date: Date;
    header: string;
    content?: string;
    color?: string;
    size?: number;
}

that would allow a sorting of events by date , and so on...

Right now, without this entryValues attribute, one alternative could be:

<mgl-timeline [alternate]="'false'" class="fcom-timeline">
     <mgl-timeline-entry *ngFor="let entry of timelineEntries">
         <!-- Header -->
         <mgl-timeline-entry-header>
             <strong>{{ entry.date | date:'d-MMM' }}</strong>
             <div class="text-muted" [innerHTML]="entry.header | safe:'html'"></div>
         </mgl-timeline-entry-header>

         <!-- Content -->
         <mgl-timeline-entry-content>
             <div [innerHTML]="entry.content | safe:'html'"></div>
         </mgl-timeline-entry-content>

         <mgl-timeline-entry-dot [color]="entry.color" [size]="entry.size"></mgl-timeline-entry-dot>
         <mgl-timeline-entry-side>{{ entry.date | date:'d MMMM yy' }}</mgl-timeline-entry-side>
     </mgl-timeline-entry>
</mgl-timeline>

RM: safe is a custom pipe allowing parsing of string as HTML

Style access

I'm trying to override some of the styles within the library to make the collapsed version of the card appear differently but nothing I've tried seems to work and it seems to be due to how the styles are applied by the library. The generated class is far more specific than anything I could ever put in a stylesheet
[_nghost-c5] .mgl-timeline-entry-card[_ngcontent-c5]

I'm attempting to remove the background of the card and the header and display just the header content as a rounded corner div.

image

mgl-timeline-entry .mgl-timeline-entry-card, mgl-timeline-entry .mgl-timeline-entry-card-header {
    background-color: transparent !important;
}


mgl-timeline-entry-header {
    border-radius: 10px;
    background-color: #EEE;
    margin: 0 auto;
    width: 50%;
}

Is there a way the card and header could have a distinct class that's assignable similar to how the dot has the class attribute so this can be overridden? I'm not using Material, just Bootstrap. Angular 7

Angular core version 11.0.9

This version of the timeline is not compatible with angular core version 11.0.9. Kindly upgrade the timeline packages and its dependencies.

Expanded by default

Hi,

Is there any way to have all the entries expanded by default?

Best regards,

Angular 9 Ivy

Hey there,

how are chances you make mgl timeline Angular 9 compatible? :)

Best

Angular 7

Please could the peerDependencies be moved to angular 7 now that v7 has been released ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.