Unable to style tab group header - Githubissues

StackOverflowMATLABchat / mlapptools

MATLAB class containing methods for programmatic uifigure modification

http://undocumentedmatlab.com/blog/customizing-uifigures-part-2

MIT License

25 stars 11 forks source link

Unable to style tab group header #12

Closed davidn-IA closed 6 years ago

davidn-IA commented 6 years ago

Grateful for all the attention to our issues so far. Here's one more. A small tweak in "getWebElements" allows the styling of the tab area of a tab group or the tab itself but not the headers using for example the following:

f = uifigure();
mlapptools.setStyle(f,'background','linear-gradient(red, pink, white)');
tg = uitabgroup(f);
mlapptools.setStyle(tg,'background','transparent');
mlapptools.setStyle(tg,'border-style','none');
t1 = uitab(tg);
mlapptools.setStyle(t1,'background','transparent');
mlapptools.setStyle(t1,'border-style','none');
txa = uitextarea(t1);
txa.Value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
mlapptools.setStyle(txa,'border-style','none');
mlapptools.setStyle(txa,'background','transparent');

(sco1 edit: code formatting)

Dev-iL commented 6 years ago

@davidn-IA I'm not sure what the desired result is... Could you upload a screenshot (or HTML code) of what you're trying to achieve or at least explain explicitly what is it that you want to happen?

You can dump the HTML (mlapptools.getHTML) and edit it manually. Here's my current result:

<!DOCTYPE HTML><html class="dj_webkit dj_chrome dj_contentbox"><head>    <meta charset="utf-8">    <!-- Disable all caching -->    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">    <meta http-equiv="pragma" content="no-cache">    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame.  Remove this if you use the .htaccess -->    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <link rel="stylesheet" href="release/gbtclient/css/uiFigureApp.css" type="text/css">    <!-- CSS : implied media="all" -->    <link rel="stylesheet" href="release/gbtclient/css/main.css" type="text/css">    <!--[if IE 9]>        <link href="release/css/webwidget_ie9.css" rel="stylesheet" type="text/css" />    <![endif]--><script type="text/javascript" src="https://localhost:31515/remote/proxy/1.4/CheckJsFile.js?time=1515426339231" id="dojo_request_script0" async="" charset="utf-8"></script><title>NoTitle</title><style></style></head><body class="tundra"><div id="gbt_root_node"><div class="dijitContentPane figureContentPane" id="dijit_layout_ContentPane_0" widgetid="dijit_layout_ContentPane_0"><div class="dijitLayoutContainer dijitContainer gbtFigureLayoutContainer" id="dijit_layout_LayoutContainer_0" widgetid="dijit_layout_LayoutContainer_0"><div class="gbtFigureToolsContainer dijitLayoutContainer-child dijitLayoutContainer-gbtFigureToolsContainer dijitLayoutContainerPane dijitAlignTop" id="dijit__Container_0" widgetid="dijit__Container_0" style="position: absolute;">    <div data-dojo-attach-point="containerNode"></div></div><div class="gbtFigureFrame dijitLayoutContainer-child dijitLayoutContainer-gbtFigureFrame dijitLayoutContainerPane dijitAlignCenter" id="dijit__TemplatedMixin_0" widgetid="dijit__TemplatedMixin_0" style="position: absolute;">    <div class="figureContainerNode" data-dojo-attach-point="containerNode,backgroundColorNode" data-tag="c5de43aa" style="background: linear-gradient(red, pink, white);"><div class="mwTabContainer dijitContainer mwLayoutContainer gbtTabGroupBorder mwSizeMixin gbtWidget gbtTabGroup" id="uniqName_106_0" widgetid="uniqName_106_0" data-tag="83f61cd6" style="width: 250px; height: 210px; bottom: 19px; left: 19px; font-family: Helvetica; font-size: 12px; font-weight: normal; font-style: normal; color: rgb(0, 0, 0); position: absolute; border-style: none; background: transparent;"><div id="uniqName_106_0Wrapper" class="topTabContentWrapper" style="left: 0px; top: 22px; width: 250px; height: 187px;"><div class="dijitContentPane gbtWidget gbtTab mwTabContainer-child mwTabContainer-dijitContentPane" data-dojo-attach-point="containerNode,backgroundColorNode" data-tag="d06eb87c" id="uniqName_30_0" widgetid="uniqName_30_0" style="width: 250px; height: 187px; top: 0px; left: 0px; position: absolute; visibility: visible; border-style: none; background: transparent;"><div id="undefined" data-type="matlab.ui.control.TextArea" data-tag="5546b0ce" class="vc-widget" style="left: 99px; bottom: 99px; width: 150px; height: 60px;"><div class="dijit dijitReset vc-defaultFontRules vc-textAreaEditable vc-textAreaAlignLeft vc-textArea" role="presentation" widgetid="uniqName_30_1" style="width: 150px; height: 60px;">    <textarea class="dijit dijitReset" data-dojo-attach-point="focusNode,containerNode,textbox,inlineEditorNode,backgroundColorNode" autocomplete="off" tabindex="0" id="uniqName_30_1" value="" style="width: 140px; height: 55px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; font-style: normal; color: rgb(0, 0, 0); border-style: none; background: transparent;"></textarea></div></div></div></div><div class="dijitLayoutContainer dijitContainer buttonBar tabBar" id="uniqName_106_0_tablist" widgetid="uniqName_106_0_tablist" style="-webkit-user-select: none; left: 0px; top: 0px; width: 250px; height: 22px;"><div id="uniqName_106_0_tablist_previousButton" class="scrollLeftButton" style="-webkit-user-select: none; position: absolute; display: none; left: 0px; top: 0px; width: 12px; height: 22px;"></div><div id="uniqName_106_0_tablist_nextButton" class="scrollRightButton" style="-webkit-user-select: none; position: absolute; display: none; left: 232px; top: 0px; width: 12px; height: 22px;"></div><div class="tab disabled dijitLayoutContainer-child" id="uniqName_106_0_tablistprototype" widgetid="uniqName_106_0_tablistprototype" style="-webkit-user-select: none; position: absolute; visibility: hidden;">    <span class="mwTabHeader" data-dojo-attach-point="headerNode"></span><span class="tabIcon" data-dojo-attach-point="iconNode" style="position: static;"></span><span class="mwTabLabel" data-dojo-attach-point="labelNode,containerNode" style="position: static;">###</span><span class="tabCloseIcon" data-dojo-attach-point="closeNode" style="display: none; position: static;"></span></div><div class="tab bottomOpen firstTab lastTab dijitLayoutContainer-child checkedTab" id="uniqName_106_0_tablist_uniqName_30_0" widgetid="uniqName_106_0_tablist_uniqName_30_0" style="-webkit-user-select: none; position: absolute; visibility: visible; left: 0px; top: 0px; width: 27px; height: 22px; clip: auto; color: rgb(0, 0, 0);">    <span class="mwTabHeader" data-dojo-attach-point="headerNode"></span><span class="tabIcon" data-dojo-attach-point="iconNode"></span><span class="mwTabLabel" data-dojo-attach-point="labelNode,containerNode"></span><span class="tabCloseIcon" data-dojo-attach-point="closeNode" style="display: none;"></span></div></div></div></div></div></div></div></div><script src="release/gbtclient/dojoConfig-release-global.js"></script><script type="text/javascript">  dojoConfig.setLocale(['en-us', 'ja-jp', 'ko-kr', 'zh-cn']); dojoConfig.async = true;    dojoConfig.map = {    "*": {            "MW/dialog": "mw-dialog-utils",            "MW/utils/HtmlUtils": "mw-utils/HtmlUtils",            "MW/utils/InMemoryStore": "mw-utils/InMemoryStore",            "MW/utils/Utils": "mw-utils/Utils"         }   };</script><script type="text/javascript" charset="utf-8" src="release/gbtclient/browsercheck.js"></script><script type="text/javascript" charset="utf-8" src="release/gbtclient/nls/browsercheck_en-us.js"></script><script type="text/javascript" charset="utf-8" src="release/gbtclient/gbtclient.js"></script><script type="text/javascript" charset="utf-8" src="release/gbtclient/nls/gbtclient_en-us.js"></script><script type="text/javascript" src="release/dojo/dojo.js"></script><!-- Load the main js which will create the conatiner for hosting figure and setup JS component Framework --><script type="text/javascript" src="./componentContainer.js"></script><span style="display: none; white-space: pre;"></span><iframe id="remoteWorkerAsyncProducer" src="https://localhost:31515/remote/proxy/1.4/iframeProxyRelease.html" width="0" height="0" style="visibility: hidden; display: none;"></iframe></body></html>

davidn-IA commented 6 years ago

@Dev-iL some control over the formatting of the tab header would be great. Otherwise we're stuck with that dark grey. Up against a deadline but will try to hack something up. Thanks!

Dev-iL commented 6 years ago

@davidn-IA Ok, so it looks like you want to edit <div id="uniqName_106_0_tablist" ... (the dark gray) and at least one of its children (uniqName_106_0_tablistprototype or uniqName_106_0_tablist_uniqName_30_0). Until a more permanent solution is found I'd go through the dijit registry (mlapptools.getWidgetList) and choose the right UI elements from there.

Dev-iL commented 6 years ago

Small update: I have an idea what to do about this... The key is to get the child/parent divs of the div whose ID we know, then pass them manually on to setStyle.. I tried coding it up in JS today but couldn't get it right so far. I believe I'll crack it within a few days. Expect two new public methods...

Dev-iL commented 6 years ago

With my latest changes, adding this to the end of your code has the desired effect:

% use trial and error for child#:
[win, widgetID] = mlapptools.getWebElements(tg);
[childIDs] = mlapptools.getChildNodeIDs(win, widgetID);
mlapptools.setStyle(win,'background','transparent',childIDs(2));
[childIDs] = mlapptools.getChildNodeIDs(win, childIDs(2));
mlapptools.setStyle(win,'background','black',childIDs(4));

untitled

Dev-iL commented 6 years ago

Closed by #13.