WAB widget button width

1433
4
02-24-2017 08:08 AM
johnbrosowsky
Occasional Contributor II

Hi there!  I am looking for tips on css/js to make the default square WAB widget buttons that appear for example under the search box in the tab theme to be wider, have no icon, and to have a text label.  

For example to go from this:

To this:

Thanks!!

Tags (3)
0 Kudos
4 Replies
ofrig
by
New Contributor II

wab folder->\server\apps\#\jimu.js\css\jimu.css

---->

/*css for PreloadWidgetIcon dijit*/
.jimu-widget-onscreen-icon{
position: absolute;
cursor: pointer;
border-radius: 4px;
width:???px !important

RobertScheitlin__GISP
MVP Emeritus

John,

   To get the text in the button and remove the icon you would have to do a little re-write of the OnScreenWidgetIcon.js in the jimu folder:

///////////////////////////////////////////////////////////////////////////
// Copyright © 2014 - 2016 Esri. All Rights Reserved.
//
// Licensed under the Apache License Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
///////////////////////////////////////////////////////////////////////////

define(['dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/array',
  'dojo/_base/html',
  'dojo/on',
  'dijit/_WidgetBase',
  './utils',
  'dojo/dom-style'
],
function(declare, lang, array, html, on, _WidgetBase, utils, domStyle) {
  /* global jimuConfig */
  return declare(_WidgetBase, {
    'class': 'jimu-widget-onscreen-icon',

    postCreate: function(){
      this.inherited(arguments);
      this.iconNode = html.create('img', {
        src: this.widgetConfig.icon
      }, this.domNode);
//My add
      domStyle.set(this.iconNode,"display", "none");
      this.labelNode = html.create('div',{
        style: 'color: white; padding: 11px;'
      },this.domNode);
      this.labelNode.innerHTML = this.widgetConfig.label;
//end
      html.setAttr(this.domNode, 'title', this.widgetConfig.label);
      html.setAttr(this.domNode, 'data-widget-name', this.widgetConfig.name);
      this.own(on(this.domNode, 'click', lang.hitch(this, function(){
        this.onClick();
      })));
//My add
      domStyle.set(this.domNode, 'width', 'auto');
//end
      this.position = lang.clone(this.widgetConfig.position);
      if (this.widgetConfig.position.relativeTo === 'map') {
        this.own(on(this.map, 'resize', lang.hitch(this, function() {
          var _pos = lang.clone(this.position);
          delete _pos.width;
          delete _pos.height;
          if (this.panel) {
            this.panel.setPosition(_pos);
          }
        })));
      }

      this.state = 'closed';
    },

    startup: function(){
      this.inherited(arguments);
    },

    onClick: function(){
      if(this.state === 'closed'){
        this.switchToOpen();
      }else{
        this.switchToClose();
      }
    },

    moveTo: function(position){
      var style = {
        left: 'auto',
        right: 'auto',
        bottom: 'auto',
        top: 'auto',
        width: 'auto',
        height: 'auto'
      };
      style = lang.mixin(style, utils.getPositionStyle(position));
      //we don't change width and height through layout
      delete style.width;
      delete style.height;
      html.setStyle(this.domNode, style);
      this.position = lang.clone(position);

      if (this.widgetConfig && this.widgetConfig.panel){
        this.widgetConfig.panel.position = lang.clone(position);
        this.widgetConfig.position = lang.clone(position);
      }
      if(this.panel){
        this.panel.setPosition(lang.clone(position));
      }
      if(this.widget){
        this.widget.setPosition(this.getOffPanelWidgetPosition(this.widget));
      }
    },

    destroy: function(){
      if(this.panel){
        this.panelManager.destroyPanel(this.panel);
      }else if(this.widget){
        this.widgetManager.destroyWidget(this.widget);
      }
      this.inherited(arguments);
    },

    switchToOpen: function(){
      this.state = 'opened';

      this.panelManager.closeAllPanelsInGroup(this.widgetConfig.gid);
      array.forEach(this.widgetManager.getOnScreenOffPanelWidgets(), function(widget){
        if(widget.closeable){
          this.widgetManager.closeWidget(widget);
        }
      }, this);

      html.addClass(this.domNode, 'jimu-state-selected');
      this._showLoading();
      if(this.widgetConfig.inPanel === false){
        this.widgetManager.loadWidget(this.widgetConfig)
        .then(lang.hitch(this, function(widget){
          this.widget = widget;
          widget.setPosition(this.getOffPanelWidgetPosition(widget));
          this.widgetManager.openWidget(widget);
          this.own(on(widget, 'close', lang.hitch(this, function(){
            this.switchToClose();
          })));

          this._hideLoading();
        }));
      }else{
        this.panelManager.showPanel(lang.clone(this.widgetConfig))
        .then(lang.hitch(this, function(panel){
          this.panel = panel;
          this.own(on(panel, 'close', lang.hitch(this, function(){
            this.switchToClose();
          })));

          this._hideLoading();
        }));
      }
    },

    switchToClose: function(){
      this.state = 'closed';
      html.removeClass(this.domNode, 'jimu-state-selected');
      if(this.widgetConfig.inPanel === false){
        this.widgetManager.closeWidget(this.widget);
      }else{
        this.panelManager.closePanel(this.panel);
      }
    },

    getOffPanelWidgetPosition: function(widget){
      var position = {
        relativeTo: widget.position.relativeTo
      };
      var pbox = html.getMarginBox(this.domNode);
      var sbox = this.widgetManager.getWidgetMarginBox(widget);
      var containerBox = html.getMarginBox(position.relativeTo === 'map'?
        this.map.id: jimuConfig.layoutId);

      var top = pbox.t + pbox.h + 1;//put under icon by default
      if(top + sbox.h > containerBox.h){
        position.bottom = containerBox.h - pbox.t + 1;
      }else{
        position.top = top;
      }

      if (window.isRTL) {
        if(pbox.l + pbox.w - sbox.w < 0){
          position.right = 0;
        }else{
          position.right = pbox.l + pbox.w - sbox.w;
        }
      } else {
        if(pbox.l + sbox.w > containerBox.w){
          position.right = 0;
        }else{
          position.left = pbox.l;
        }
      }
      return position;
    },

    _showLoading: function(){
//My add
      domStyle.set(this.iconNode,"display", "");
//end
      html.setAttr(this.iconNode, 'src', require.toUrl('jimu') + '/images/loading_circle.gif');
    },

    _hideLoading: function(){
//My add
      domStyle.set(this.iconNode,"display", "none");
//end
      html.setAttr(this.iconNode, 'src', this.widgetConfig.icon);
    }
  });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
RobertScheitlin__GISP
MVP Emeritus

John,

   Did you try the code I provided?

0 Kudos
Maghaith91
New Contributor

This solved the text instead of the icon problem but the widget is still square and I have been trying to change the size of it from config file but it has no effect. 

If you can point out where to change the dimension to have rectangular button to fit the text I would be grateful. 

Thanks a lot 

0 Kudos