Jump to content
Sign in to follow this  
Alexander Sviridenkov

Context menu UI built with HTML and CSS only

Recommended Posts

Code for each item is relatively simple. For example list type selector consists of two classes, first for drop down panel:

THtEditContextList = class(THtEditContextItem)
public
  function Render: string; override;
end;
  
function THtEditContextList.Render: string;

procedure Add(const ListType, ListTag: string);
begin
  Result := Result + Format('<div class="eclistbox fade" listtype="%s"><%s style="list-style-type: %s"><li>———</li><li>———</li><li>———</li></ol></div>',
    [ListType, ListTag, ListType]);
end;

begin
  Result := '';
  Add('none', 'ul');
  Add('circle', 'ul');
  Add('disc', 'ul');
  Add('square', 'ul');
  Add('decimal', 'ol');
  Add('lower-alpha', 'ol');
  Add('lower-roman', 'ol');
  Add('upper-alpha', 'ol');
  Add('upper-roman', 'ol');
end;

And second for the button:

THtEditContextListStyle = class(THtEditContextLiveItem)
public
  function Render: string; override;
  procedure OnSubmenuElementEnter(Sender: TElement); override;
  procedure OnSubmenuClick(const Sender: TElement; Button: TMouseButton; Shift: TShiftState); override;
end;

procedure THtEditContextListStyle.OnSubmenuClick(const Sender: TElement;
  Button: TMouseButton; Shift: TShiftState);
begin
  OnSubmenuElementEnter(Sender);
end;

procedure THtEditContextListStyle.OnSubmenuElementEnter(Sender: TElement);
begin
  if Sender['listtype'] <> '' then
  begin
    if Sender.NodebyName('ol') <> nil then
      Editor.SetListStyle('ol', Sender['listtype'])
    else
      Editor.SetListStyle('ul', Sender['listtype']);
    Editor.Repaint;
  end;
end;

function THtEditContextListStyle.Render: string;
begin
  id := 'list';
  Result := '<div id="list" class="ecbutton down fade"><div class="faicon">&#61643;</div>&nbsp;</div>';
  FSubmenuClass := THtEditContextList;
  FDefaultSubmenuWidth := 300;
end;

 

Code for building menu:

 

    ContextPanel.Add(THtEditContexBold).Add(THtEditContextItalic).Add(THtEditContextUnderline).
      Add(THtEditContexStrike).Add(THtEditContexSpace).Add(THtEditContextTextColor).Add(THtEditContextBGColor).
      Add(THtEditContextFontSize).Add(THtEditContextFont).
      Add(THtEditContexLineBreak).Add(THtEditContexAlignLeft).Add(THtEditContexAlignCenter).Add(THtEditContexAlignRight).Add(THtEditContexAlignFull)...

 

editorcontext.gif

  • Like 1

Share this post


Link to post
Guest

@Alexander Sviridenkov Wow. The editor "floating menu", is that deep down or can one plug in TActionList(s)/TPopupMenu(s)? Could i even intercept with TMenu decendants?

Share this post


Link to post
7 minutes ago, Dany Marmur said:

@Alexander Sviridenkov Wow. The editor "floating menu", is that deep down or can one plug in TActionList(s)/TPopupMenu(s)? Could i even intercept with TMenu decendants?

Class hierarchy is independend from VCL/FMX menus. Thereby menus are cross platform and HDPI ready. You can add any own item classes, but they shoud return HTML to render in menu and follow some rules.

Share this post


Link to post
Guest

I see. Thanks. Really itching to incorporate your stuff, but my clients and my "products" are taking a different route for the future. However, a specific budgeted request might give me the opportunity. I'm rooting for your stuff and keep having an "eye out".

Share this post


Link to post

@Alexander Sviridenkov

I use and like your library, although I must say this is sometimes not easy to figure out how simple, obvious tasks are intended to operate in runtime and designtime.
Please provide more of such samples, to get clear about the intended use and possibilities.
 

Share this post


Link to post
On 9/13/2019 at 8:19 AM, Rollo62 said:

@Alexander Sviridenkov

I use and like your library, although I must say this is sometimes not easy to figure out how simple, obvious tasks are intended to operate in runtime and designtime.
Please provide more of such samples, to get clear about the intended use and possibilities.
 

Thank you, I will publish more examples after an upcoming release.

  • Like 1
  • Thanks 1

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×