change on-screen icon size

4223
19
Jump to solution
01-22-2016 09:57 AM
DaveOrlando
Occasional Contributor III

hello,

I'm sure the developers are probably tired of us mucking in their code, but I really want to make my on-screen icons bigger.

I found where to change the size of the image within the icon, but not the icon itself, it gets overwritten from the 'Inline style'

this is in ~\jimu.js\css\jimu.css

/*css for PreloadWidgetIcon dijit*/
.jimu-widget-onscreen-icon{
  width: 105px; /*added*/
  height: 105px; /*added*/
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
}
.jimu-widget-onscreen-icon img{
  width: 80px; /*changed*/
  height: 80px; /*changed*/
  margin: 10px;
}

DOM_Explorer.jpg

if there is some easy code to change, please let me know, thanks.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Dave,

  The hard coding of the 40px comes from the LayoutMnager.js in the jimu folder (see line 21-24):

_createPreloadWidgetIcon: function(widgetConfig){
      var iconDijit = new OnScreenWidgetIcon({
        panelManager: this.panelManager,
        widgetManager: this.widgetManager,
        widgetConfig: widgetConfig,
        configId: widgetConfig.id,
        map: this.map
      });

      if(widgetConfig.position.relativeTo === 'map'){
        html.place(iconDijit.domNode, this.mapId);
      }else{
        html.place(iconDijit.domNode, this.id);
      }
      //icon position doesn't use width/height in config
      html.setStyle(iconDijit.domNode, utils.getPositionStyle({
        top: widgetConfig.position.top,
        left: widgetConfig.position.left,
        right: widgetConfig.position.right,
        bottom: widgetConfig.position.bottom,
        /*width: 40,
        height: 40*/
        width: 105,
        height: 105
      }));
      iconDijit.startup();

      if(!this.openAtStartWidget && widgetConfig.openAtStart){
        iconDijit.switchToOpen();
        this.openAtStartWidget = widgetConfig.name;
      }

      this.preloadWidgetIcons.push(iconDijit);
      return iconDijit;
    },

View solution in original post

19 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Dave,

  The hard coding of the 40px comes from the LayoutMnager.js in the jimu folder (see line 21-24):

_createPreloadWidgetIcon: function(widgetConfig){
      var iconDijit = new OnScreenWidgetIcon({
        panelManager: this.panelManager,
        widgetManager: this.widgetManager,
        widgetConfig: widgetConfig,
        configId: widgetConfig.id,
        map: this.map
      });

      if(widgetConfig.position.relativeTo === 'map'){
        html.place(iconDijit.domNode, this.mapId);
      }else{
        html.place(iconDijit.domNode, this.id);
      }
      //icon position doesn't use width/height in config
      html.setStyle(iconDijit.domNode, utils.getPositionStyle({
        top: widgetConfig.position.top,
        left: widgetConfig.position.left,
        right: widgetConfig.position.right,
        bottom: widgetConfig.position.bottom,
        /*width: 40,
        height: 40*/
        width: 105,
        height: 105
      }));
      iconDijit.startup();

      if(!this.openAtStartWidget && widgetConfig.openAtStart){
        iconDijit.switchToOpen();
        this.openAtStartWidget = widgetConfig.name;
      }

      this.preloadWidgetIcons.push(iconDijit);
      return iconDijit;
    },
DaveOrlando
Occasional Contributor III

Thanks a million, I should have seen that.

here are the four steps I took to enlarge the icon, enlarge the image within, move one over, and change the panels open position.

change_onscreen_icon_size.jpg

by Anonymous User
Not applicable

Does this still work? I'm having no luck adjusting the size of the placeholders

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Eoin,

   No files have changed since then. Here are the steps and files for WAB 2.4: (if just enlarging them x2)

  • This is for image inside of icon
    • jimu.js/css/jimu.css
    • .jimu-widget-onscreen-icon img{
        width: 40px;
        height: 40px;
        margin: 20px;
      }
  • This is for the icon itself
    • jimu.js/LayoutManager.js
    • lines 695, 696, 728 and 729
      • adjust width and height to 80.
  • This is to move the second and third icons over
    • Main config.json
      • Change left to 145 and 235 to the second and third
  • This is to change widget panel opening location
    • jimu.js/OnScreenWidgetPanel.js
      • _getPositionInfo function lines 324 and 328
        • Change 40 to 80
by Anonymous User
Not applicable

Thank you for you help Robert, I wasn't seeing any changes within WAB because I was editing files in the stemapp folder rather than the specific app folder, silly mistake I know! 

0 Kudos
GeorgeKatsambas
Occasional Contributor III

Where in the main cofig.json is the change 'left" ?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

In the widgetOnScreen array the widgets objects that have a placeholderIndex property.

CCWeedcontrol
Regular Contributor

I am having trouble making the onscreen-icon image bigger. I am on WAB 2.4.

I am editing the \server\apps\6\jimu.js\css at lines but my icons are not bigger, what i am doing wrong?

I made changes to the LayoutManger.js and that worked fine.

/*css for PreloadWidgetIcon dijit*/
.jimu-widget-onscreen-icon{
  position: absolute;
  cursor: pointer;
  border-radius: 4px;
}
.jimu-widget-onscreen-icon img{
  width: 40px; /*changed from 20 to 40*/
  height: 40px; /*changed from 20 to 40*/
  margin: 10px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

I am not sure what you are missing. I don't think I can explain or outline it any further. Make sure you are changing the files for the app you are working in.

0 Kudos