Dynamic Toolbar Styling

[jolanglinais]

Is your feature request related to a problem? Please describe. The Toolbar should accept props to render certain buttons. It should therefore also render well no matter which buttons are toggled on.

Describe the solution you'd like This could possibly have a minimum cap, such as Styles, bold, italic, and underline. Input would be helpful (@Michael-Grover)

Describe alternatives you've considered css-grid may not actually be the best solution here, feel free to explore other options

Additional context This relates to Issue accordproject/markdown-editor#35

[jolanglinais]

Hacktoberfest:

This issue can provide for multiple pull requests.

[nitinsultania]

hey how about

/ Deluxe Menu Data File Created by Deluxe Tuner v3.2 http://deluxe-menu.com /

// -- Deluxe Tuner Style Names var itemStylesNames=["Style 1","Style 2","Style 3","Style 4",]; var menuStylesNames=[]; // -- End of Deluxe Tuner Style Names

//--- Common var isHorizontal=1; var smColumns=1; var smOrientation=0; var dmRTL=0; var pressedItem=-1; var itemCursor="default"; var itemTarget="_blank"; var statusString="link"; var blankImage="data-samples/images/blank.gif"; var pathPrefix_img="data-samples/images/"; var pathPrefix_link="data-samples/";

//--- Dimensions var menuWidth="400px"; var menuHeight=""; var smWidth=""; var smHeight="";

//--- Positioning var absolutePos=0; var posX="0px"; var posY="0px"; var topDX=0; var topDY=1; var DX=1; var DY=0; var subMenuAlign="left"; var subMenuVAlign="top";

//--- Font var fontStyle=["normal 11px Tahoma, Arial","normal 11px Tahoma, Arial"]; var fontColor=["#000000","#000000"]; var fontDecoration=["none","none"]; var fontColorDisabled="#AAAAAA";

//--- Appearance var menuBackColor="#C2DDE4"; var menuBackImage=""; var menuBackRepeat="repeat"; var menuBorderColor="#4996A9"; var menuBorderWidth=1; var menuBorderStyle="solid";

//--- Item Appearance var itemBackColor=["#C2DDE4","#FFFFFF"]; var itemBackImage=["",""]; var beforeItemImage=["",""]; var afterItemImage=["",""]; var beforeItemImageW=""; var afterItemImageW=""; var beforeItemImageH=""; var afterItemImageH=""; var itemBorderWidth=1; var itemBorderColor=["#C2DDE4","#2B5762"]; var itemBorderStyle=["solid","solid"]; var itemSpacing=2; var itemPadding="3px 7px 3px 7px "; var itemAlignTop="left"; var itemAlign="left";

//--- Icons var iconTopWidth=24; var iconTopHeight=24; var iconWidth=16; var iconHeight=16; var arrowWidth=11; var arrowHeight=11; var arrowImageMain=["arrow_main1.gif","arrow_main1.gif"]; var arrowWidthSub=0; var arrowHeightSub=0; var arrowImageSub=["arrow_sub1.gif","arrow_sub1.gif"];

//--- Separators var separatorImage=""; var separatorWidth="100%"; var separatorHeight="3px"; var separatorAlignment="left"; var separatorVImage=""; var separatorVWidth="3px"; var separatorVHeight="100%"; var separatorPadding="0px";

//--- Floatable Menu var floatable=0; var floatIterations=6; var floatableX=1; var floatableY=1; var floatableDX=15; var floatableDY=15;

//--- Movable Menu var movable=0; var moveWidth=12; var moveHeight=20; var moveColor="#AA0000"; var moveImage=""; var moveCursor="default"; var smMovable=0; var closeBtnW=15; var closeBtnH=15; var closeBtn="";

//--- Transitional Effects & Filters var transparency="90"; var transition=33; var transOptions=""; var transDuration=300; var transDuration2=200; var shadowLen=3; var shadowColor="#BBBBBB"; var shadowTop=1;

//--- CSS Support (CSS-based Menu) var cssStyle=0; var cssSubmenu=""; var cssItem=["",""]; var cssItemText=["",""];

//--- Advanced var dmObjectsCheck=0; var saveNavigationPath=1; var showByClick=0; var noWrap=1; var smShowPause=200; var smHidePause=1000; var smSmartScroll=1; var topSmartScroll=0; var smHideOnClick=1; var dm_writeAll=0; var useIFRAME=0; var dmSearch=0;

//--- AJAX-like Technology var dmAJAX=0; var dmAJAXCount=0; var ajaxReload=0;

//--- Dynamic Menu var dynamic=1;

//--- Keystrokes Support var keystrokes=1; var dm_focus=1; var dm_actKey=113;

//--- Sound var onOverSnd=""; var onClickSnd="";

var itemStyles = [ ["fontStyle=bold 11px Tahoma","fontColor=#1A5B00,#1A5B00","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#ACF88B,#ACF88B","itemBorderColor=#329309,#329309"], ["itemBackColor=#FFFFFF,#FFFFFF","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBorderColor=#1B92E9,#1B92E9","fontStyle='normal 10px Trebushet MS, Tahoma','normal 10px Trebushet MS, Tahoma'","fontColor=#000000,#000000"], ["fontStyle=bold 11px Tahoma","fontColor=#FFFFFF,#FFFFFF","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#FF9684,#FF9684","itemBorderColor=#EC7575,#EC7575"], ["fontStyle=bold 11px Tahoma","fontColor=#00646C,#00646C","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#84F9FF,#84F9FF","itemBorderColor=#00B8C1,#00B8C1"], ]; var menuStyles = [ ];

var menuItems = [

["Home","testlink.htm", "", "", "", "", "", "", "", "", "", ],
["Product Info","", "", "", "", "", "", "", "", "", "", ],
    ["|Features","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Installation","", "", "", "", "", "", "", "", "", "", ],
        ["||Description of Files","testlink.htm", "", "", "", "", "", "", "", "", "", ],
        ["||How To Setup","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Parameters Info","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Dynamic Functions","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Supported Browsers","", "", "", "", "", "", "", "", "", "", ],
        ["||Windows OS","", "", "", "", "", "", "", "", "", "", ],
            ["|||Internet Explorer","", "", "", "", "", "", "", "", "", "", ],
            ["|||Firefox","", "", "", "", "", "", "", "", "", "", ],
            ["|||Mozilla","", "", "", "", "", "", "", "", "", "", ],
            ["|||Opera","", "", "", "", "", "", "", "", "", "", ],
            ["|||Netscape Navigator","", "", "", "", "", "", "", "", "", "", ],
        ["||MAC OS","", "", "", "", "", "", "", "", "", "", ],
            ["|||Firefox","", "", "", "", "", "", "", "", "", "", ],
            ["|||Safari","", "", "", "", "", "", "", "", "", "", ],
            ["|||Internet Explorer","", "", "", "", "", "", "", "", "", "", ],
        ["||Unix/Linux OS","", "", "", "", "", "", "", "", "", "", ],
            ["|||Firefox","", "", "", "", "", "", "", "", "", "", ],
            ["|||Konqueror","", "", "", "", "", "", "", "", "", "", ],
["Samples","", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 1","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 2","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 3","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 4","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 5","testlink.htm", "", "", "", "", "", "", "", "", "", ],
    ["|Sample 6","testlink.htm", "", "", "", "", "", "", "", "", "", ],
["Purchase","testlink.htm", "", "", "", "", "", "", "", "", "", ],
["Contact Us","testlink.htm", "", "", "", "", "", "", "", "", "", ],

];

dm_init();

[jolanglinais]

@nitinsultania I'm not sure most of that would be useful in this circumstance.

[imrishabh18]

@irmerk Can i work on this issue ?

[jolanglinais]

@imrishabh18 we should review this issue after https://github.com/accordproject/markdown-editor/issues/297 is complete.

[jolanglinais]

@imrishabh18:

accordproject/markdown-editor#297 has been finished, so there is no longer a blocker on this issue. The migration may have solved this issue, so look into that first.