Bespoke app template

UI Components for Angular
Post Reply
Posts: 10
Joined: 02 Aug 2019, 23:58

10 Aug 2019, 00:46

Hi, Im learning HTML, Angular, PrimeNG.

For learning, and eventual demo development, I want to build an app template foundation that looks good and has certain features. I've been able to get some things working, but it has been slow going and it doesnt look good. Paid app templates look very good but lack several features i want.
  • Is there a team at Prime who will build or extend a template with the features i want?
  • How would i get an estimate on price and duration?

Design Requirements Outline
  1. Single page app, with a desktop app look and feel
    1. fills 100pct of the height and width of the browser viewport
    2. Fixed header and footer that fill 100pct of width, and about 50px each of height.
    3. Full screen option
  2. Fixed header with left and right menu
    1. Fills 100pct of page width
    2. with left justified menu plus smaller right justified menu
    3. Both menus items can be composed statically and programmatically
    4. Both menus items each have distinct call back methods to execute commands and periodically determine if an item is (enabled | disabled).
    5. Left menu
      • File. save, save as, open, close, revert, merge, destroy
      • Edit. Cut, copy, paste, undo, redo
      • Workflow. publish, approve
      • Tools. import, export, backup, recover, settings
    6. Right Menu
      • Log in
      • Log out
      • Admin. Users, Groups, Permissions
  3. Fixed footer with multi-panel status bar. Direct methods to set status bat text, colors, and icons.
    1. Three text panels, each 30pct width, 2 icon panels, each 5pct width.
  4. Content panel that fills 100pct of the vertical space between header and footer, and fills 100pct of width
    1. Has 3 vertical panels (A, B, C) with splitters between them. Moving splitters left to right changes size of panes. Default sizing is 25, 25, 50.
    2. A and B are each filled with a tree control. C holds a form or panel that is loaded depending on the type of tree node that was clicked.
    3. A and B
      • Each has a tree control that fills the area,
      • Each of the trees has container nodes and leaf nodes.
      • Each container node can have a different icon based on container type
      • Each leaf node can have a different icon based on leaf type
      • On click a node, a function is called to determine if nothing happens, or a specific component is loaded into C.
      • On drag, a function is called to determine if canDrag(event);
      • On DragMove, a function is called
        • to determine if dropping here is a valid drop canDrop(event)
        • the drag image is updated to show a different image, which will vary by DropTarget.
        • The status bar is updated with info and icons indicating what would happen if dropped
      • On DragDrop the effect described by canDrop( ) is executed. This may cause the trees to update, and may cause a new form or change in panel C.
  5. App can be easily themed by end user
  6. App has automated testing hooks for all features.
  7. The project needs to have all the integration and wiring in place for dragging, dropping, testing, according to Angular and PrimeNG best practices. But I will add the final business logic (implementations of the many CanDrag, CanDrop, DragDrop functions, C Panels, and automated testing specifics) into the delivered project. And I want it to look good like the paid templates.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: gpeixoto and 19 guests