diff --git a/layouts/v7/modules/Settings/Vtiger/Index.tpl b/layouts/v7/modules/Settings/Vtiger/Index.tpl index b19af37a120183b387c84f09799186a0fce0f5ad..f9b914c5283e0985516e38d110784827ee266ad3 100644 --- a/layouts/v7/modules/Settings/Vtiger/Index.tpl +++ b/layouts/v7/modules/Settings/Vtiger/Index.tpl @@ -9,33 +9,33 @@ ********************************************************************************/ -->*} {strip} - <div class="settingsIndexPage col-lg-12 col-md-12 col-sm-12"> - <div><h4>{vtranslate('LBL_SUMMARY',$MODULE)}</h4></div> - <hr> - <div class="row"> - <span class="col-lg-4 col-md-4 col-sm-4 settingsSummary"> - <a href="index.php?module=Users&parent=Settings&view=List"> - <h2 class="summaryCount">{$USERS_COUNT}</h2> - <p class="summaryText" style="margin-top:20px;">{vtranslate('LBL_ACTIVE_USERS',$MODULE)}</p> - </a> - </span> - <span class="col-lg-4 col-md-4 col-sm-4 settingsSummary"> - <a href="index.php?module=Workflows&parent=Settings&view=List&parentblock=LBL_AUTOMATION"> - <h2 class="summaryCount">{$ACTIVE_WORKFLOWS}</h2> - <p class="summaryText" style="margin-top:20px;">{vtranslate('LBL_WORKFLOWS_ACTIVE',$MODULE)}</p> - </a> - </span> - <span class="col-lg-4 col-md-4 col-sm-4 settingsSummary"> - <a href="index.php?module=ModuleManager&parent=Settings&view=List"> - <h2 class="summaryCount">{$ACTIVE_MODULES}</h2> - <p class="summaryText" style="margin-top:20px;">{vtranslate('LBL_MODULES',$MODULE)}</p> - </a> - </span> - </div> - <br><br> - <h4>{vtranslate('LBL_SETTINGS_SHORTCUTS',$MODULE)}</h4> - <hr> - <div id="settingsShortCutsContainer"> + <div class="settingsIndexPage col-lg-12 col-md-12 col-sm-12"> + <div><h4>{vtranslate('LBL_SUMMARY',$MODULE)}</h4></div> + <hr> + <div class="row"> + <span class="col-lg-4 col-md-4 col-sm-4 settingsSummary"> + <a href="index.php?module=Users&parent=Settings&view=List"> + <h2 class="summaryCount">{$USERS_COUNT}</h2> + <p class="summaryText" style="margin-top:20px;">{vtranslate('LBL_ACTIVE_USERS',$MODULE)}</p> + </a> + </span> + <span class="col-lg-4 col-md-4 col-sm-4 settingsSummary"> + <a href="index.php?module=Workflows&parent=Settings&view=List&parentblock=LBL_AUTOMATION"> + <h2 class="summaryCount">{$ACTIVE_WORKFLOWS}</h2> + <p class="summaryText" style="margin-top:20px;">{vtranslate('LBL_WORKFLOWS_ACTIVE',$MODULE)}</p> + </a> + </span> + <span class="col-lg-4 col-md-4 col-sm-4 settingsSummary"> + <a href="index.php?module=ModuleManager&parent=Settings&view=List"> + <h2 class="summaryCount">{$ACTIVE_MODULES}</h2> + <p class="summaryText" style="margin-top:20px;">{vtranslate('LBL_MODULES',$MODULE)}</p> + </a> + </span> + </div> + <br><br> + <h4>{vtranslate('LBL_SETTINGS_SHORTCUTS',$MODULE)}</h4> + <hr> + <div id="settingsShortCutsContainer" style="min-height: 500px;"> <div class="col-lg-12"> {assign var=COUNTER value=0} {foreach item=SETTINGS_SHORTCUT from=$SETTINGS_SHORTCUTS name=shortcuts} @@ -48,6 +48,6 @@ {include file='SettingsShortCut.tpl'|@vtemplate_path:$MODULE} {/foreach} </div> - </div> - </div> + </div> + </div> {/strip} \ No newline at end of file diff --git a/layouts/v7/modules/Settings/Vtiger/SettingsShortCut.tpl b/layouts/v7/modules/Settings/Vtiger/SettingsShortCut.tpl index 750cc747ec4b09ed20cea2fc107a809433966dc7..6094163838dfc6313b3509869cd75ad125a71892 100644 --- a/layouts/v7/modules/Settings/Vtiger/SettingsShortCut.tpl +++ b/layouts/v7/modules/Settings/Vtiger/SettingsShortCut.tpl @@ -10,8 +10,14 @@ -->*} {strip} <span id="shortcut_{$SETTINGS_SHORTCUT->getId()}" data-actionurl="{$SETTINGS_SHORTCUT->getPinUnpinActionUrl()}" class="col-lg-3 contentsBackground well cursorPointer moduleBlock" data-url="{$SETTINGS_SHORTCUT->getUrl()}" style="height: 100px; width: 23.5%;"> - <button data-id="{$SETTINGS_SHORTCUT->getId()}" title="{vtranslate('LBL_REMOVE',$MODULE)}" style="margin-right: -2%; margin-top: -5%; padding: 1% 3%;" title="Close" type="button" class="unpin close hiden ">x</button> - <h5 class="themeTextColor">{vtranslate($SETTINGS_SHORTCUT->get('name'),$MODULE)}</h5> + <div> + <span> + <b class="themeTextColor">{vtranslate($SETTINGS_SHORTCUT->get('name'),$MODULE)}</b> + </span> + <span class="pull-right"> + <button data-id="{$SETTINGS_SHORTCUT->getId()}" title="{vtranslate('LBL_REMOVE',$MODULE)}" type="button" class="unpin close hiden"><i class="fa fa-close"></i></button> + </span> + </div> <div> {if $SETTINGS_SHORTCUT->get('description') && $SETTINGS_SHORTCUT->get('description') neq 'NULL'} {vtranslate($SETTINGS_SHORTCUT->get('description'),$MODULE)} diff --git a/layouts/v7/modules/Settings/Vtiger/Sidebar.tpl b/layouts/v7/modules/Settings/Vtiger/Sidebar.tpl index 7ae14165b6bfc012c3eefc41a8bc0f7fc4b68a68..c0bd28ac6411dd02ab67bf05d0765e374a5da0d9 100644 --- a/layouts/v7/modules/Settings/Vtiger/Sidebar.tpl +++ b/layouts/v7/modules/Settings/Vtiger/Sidebar.tpl @@ -57,7 +57,22 @@ {elseif $MENU eq 'Calendar Settings'} {assign var=MENU_URL value=$USER_MODEL->getCalendarSettingsDetailViewUrl()} {/if} - <li><a data-name="{$MENU}" href="{$MENU_URL}" class="menuItemLabel {if $ACTIVE_BLOCK['menu'] eq $MENU} settingsgroup-menu-color {/if}">{vtranslate($MENU_LABEL,$QUALIFIED_MODULE)}</a></li> + <li> + <a data-name="{$MENU}" href="{$MENU_URL}" class="menuItemLabel {if $ACTIVE_BLOCK['menu'] eq $MENU} settingsgroup-menu-color {/if}"> + {vtranslate($MENU_LABEL,$QUALIFIED_MODULE)} + <img id="{$MENUITEM->getId()}_menuItem" data-id="{$MENUITEM->getId()}" class="pinUnpinShortCut cursorPointer pull-right" + data-actionurl="{$MENUITEM->getPinUnpinActionUrl()}" + data-pintitle="{vtranslate('LBL_PIN',$QUALIFIED_MODULE)}" + data-unpintitle="{vtranslate('LBL_UNPIN',$QUALIFIED_MODULE)}" + data-pinimageurl="{{vimage_path('pin.png')}}" + data-unpinimageurl="{{vimage_path('unpin.png')}}" + {if $MENUITEM->isPinned()} + title="{vtranslate('LBL_UNPIN',$QUALIFIED_MODULE)}" src="{vimage_path('unpin.png')}" data-action="unpin" + {else} + title="{vtranslate('LBL_PIN',$QUALIFIED_MODULE)}" src="{vimage_path('pin.png')}" data-action="pin" + {/if} /> + </a> + </li> {/foreach} </ul> </div> diff --git a/layouts/v7/modules/Settings/Vtiger/resources/Index.js b/layouts/v7/modules/Settings/Vtiger/resources/Index.js index f6f203a0df18c92708276b6b9a401f8b434359e9..a8d1a9475426f5f5ebe720b591258a469c5e86c7 100644 --- a/layouts/v7/modules/Settings/Vtiger/resources/Index.js +++ b/layouts/v7/modules/Settings/Vtiger/resources/Index.js @@ -8,8 +8,8 @@ *************************************************************************************/ Vtiger_Index_Js("Settings_Vtiger_Index_Js",{ - - showMessage : function(customParams){ + + showMessage : function(customParams){ var params = {}; params.animation = "show"; params.type = 'info'; @@ -20,11 +20,10 @@ Vtiger_Index_Js("Settings_Vtiger_Index_Js",{ } Vtiger_Helper_Js.showPnotify(params); } - - + + },{ - - registerDeleteShortCutEvent : function(shortCutBlock) { + registerDeleteShortCutEvent : function(shortCutBlock) { var thisInstance = this; if(typeof shortCutBlock == 'undefined') { var shortCutBlock = jQuery('.moduleBlock'); @@ -43,18 +42,19 @@ Vtiger_Index_Js("Settings_Vtiger_Index_Js",{ var shortCutActionEle = jQuery(menuItemId); var imagePath = shortCutActionEle.data('pinimageurl'); shortCutActionEle.attr('src',imagePath).data('action','pin'); - app.helper.showSuccessNotification({'message':''}); - }}); + app.helper.showSuccessNotification({'message':''}); + } + }); e.stopPropagation(); }); }, registerPinUnpinShortCutEvent : function() { var thisInstance = this; - var widgets = jQuery('div.widgetContainer'); - widgets.on('click','.pinUnpinShortCut',function(e){ + var widget = jQuery('#accordion'); + widget.on('click','.pinUnpinShortCut',function(e){ var shortCutActionEle = jQuery(e.currentTarget); - var url = shortCutActionEle.closest('.menuItem').data('actionurl'); + var url = shortCutActionEle.data('actionurl'); var shortCutElementActionStatus = shortCutActionEle.data('action'); if(shortCutElementActionStatus == 'pin'){ var actionUrl = url+'&pin=true'; @@ -66,49 +66,35 @@ Vtiger_Index_Js("Settings_Vtiger_Index_Js",{ 'enabled' : true } }); - app.request.post({'url':actionUrl}).then(function(data) { - if(data.result.SUCCESS == 'OK') { - if(shortCutElementActionStatus == 'pin'){ + app.request.post({'url':actionUrl}).then(function(err, data) { + if(data.SUCCESS == 'OK') { + if (shortCutElementActionStatus == 'pin') { var imagePath = shortCutActionEle.data('unpinimageurl'); var unpinTitle = shortCutActionEle.data('unpintitle'); shortCutActionEle.attr('src',imagePath).data('action','unpin').attr('title',unpinTitle); - var params = { - 'fieldid' : shortCutActionEle.data('id'), - 'mode' : 'getSettingsShortCutBlock', - 'module' : 'Vtiger', - 'parent' : 'Settings', - 'view' : 'IndexAjax' - }; - app.request.post({'params':params}).then(function(data){ - var shortCutsMainContainer = jQuery('#settingsShortCutsContainer'); - var newBlock = jQuery(data).appendTo(shortCutsMainContainer); - thisInstance.registerSettingShortCutAlignmentEvent(); - progressIndicatorElement.progressIndicator({ - 'mode' : 'hide' + var shortCutsMainContainer = jQuery('#settingsShortCutsContainer').find('.col-lg-12:last-child'); + if (shortCutsMainContainer.length > 0) { + var url = 'module=Vtiger&parent=Settings&view=IndexAjax&mode=getSettingsShortCutBlock&fieldid='+shortCutActionEle.data('id'); + app.request.post({url:url}).then(function(err, data){ + var newBlock = jQuery(data).appendTo(shortCutsMainContainer); + thisInstance.registerSettingShortCutAlignmentEvent(); + thisInstance.registerDeleteShortCutEvent(newBlock); }); - var Message= app.vtranslate('JS_SUCCESSFULLY_PINNED') - app.helper.showSuccessNotification()({'message':Message}); - thisInstance.registerDeleteShortCutEvent(newBlock); - }); + } + progressIndicatorElement.progressIndicator({'mode' : 'hide'}); + app.helper.showSuccessNotification({'message':app.vtranslate('JS_SUCCESSFULLY_PINNED')}); } else { var imagePath = shortCutActionEle.data('pinimageurl'); var pinTitle = shortCutActionEle.data('pintitle'); shortCutActionEle.attr('src',imagePath).data('action','pin').attr('title',pinTitle); jQuery('#shortcut_'+shortCutActionEle.data('id')).remove(); thisInstance.registerSettingShortCutAlignmentEvent(); - progressIndicatorElement.progressIndicator({ - 'mode' : 'hide' - }); - var params = { - title : app.vtranslate('JS_MESSAGE'), - text: app.vtranslate('JS_SUCCESSFULLY_UNPINNED'), - animation: 'show', - type: 'info' - }; - Vtiger_Helper_Js.showPnotify(params); + progressIndicatorElement.progressIndicator({'mode' : 'hide'}); + app.helper.showSuccessNotification({'message':app.vtranslate('JS_SUCCESSFULLY_UNPINNED')}); } } }); + e.preventDefault(); }); }, @@ -156,31 +142,24 @@ Vtiger_Index_Js("Settings_Vtiger_Index_Js",{ hoverClass: "ui-state-hover", accept: ".menuItemLabel", drop: function( event, ui ) { - var actionElement = ui.draggable.closest('.menuItem').find('.pinUnpinShortCut'); + var actionElement = ui.draggable.find('.pinUnpinShortCut'); var pinStatus = actionElement.data('action'); if(pinStatus === 'unpin') { - var params = { - title : app.vtranslate('JS_MESSAGE'), - text: app.vtranslate('JS_SHORTCUT_ALREADY_ADDED'), - animation: 'show', - type: 'info' - }; - Vtiger_Helper_Js.showPnotify(params); + app.helper.showSuccessNotification({'message':app.vtranslate('JS_SHORTCUT_ALREADY_ADDED')}); } else { - ui.draggable.closest('.menuItem').find('.pinUnpinShortCut').trigger('click'); - thisInstance.registerSettingShortCutAlignmentEvent(); + actionElement.trigger('click'); } } }); }, - + registerEventForShowOrHideSettingsLinks: function () { jQuery('.slidingDiv').hide(); jQuery('.show_hide').click(function (e) { - jQuery(this).next(".slidingDiv").slideToggle('fast'); + jQuery(this).next(".slidingDiv").slideToggle('fast'); }); }, - + registerAccordionClickEvent : function() { function toggleChevron(e) { $(e.target) @@ -190,50 +169,26 @@ Vtiger_Index_Js("Settings_Vtiger_Index_Js",{ } $('#accordion').on('hidden.bs.collapse', toggleChevron); $('#accordion').on('shown.bs.collapse', toggleChevron); - -// jQuery('.settingsgroup-accordion a[data-parent="#accordion"]').on('click', function(e){ -// var target = jQuery(e.currentTarget); -// var closestItag = target.find('i'); -// -// var hasInClass = target.parents('.instaSearch').find('.widgetContainer').closest('.panel-collapse').filter('.in'); -// -// if(hasInClass){ -// closestItag.removeClass('fa-chevron-right').toggleClass('fa-chevron-down fa-chevron-right'); -// } -// jQuery('.settingsgroup i').not(closestItag).removeClass('fa-chevron-down').addClass('fa-chevron-right'); -// }); }, - - + registerBasicSettingsEvents : function() { - this.registerAccordionClickEvent(); + this.registerAccordionClickEvent(); this.registerFilterSearch(); -// var container = jQuery('#listViewContent'); -// if(jQuery('#listViewContent').find('table.listview-table').length){ -// if(jQuery('.sticky-wrap').length == 0){ -// stickyheader.controller(); -// container.find('.sticky-thead').addClass('listview-table'); -// } -// app.helper.dynamicListViewHorizontalScroll(); -// } - - //check if list view - //floatTHead, some timeout so correct height can be caught for computations - if(window.hasOwnProperty('Vtiger_List_Js')) { - var listInstance = new Vtiger_List_Js(); - setTimeout(function(){ - listInstance.registerFloatingThead(); - }, 10); + if(window.hasOwnProperty('Vtiger_List_Js')) { + var listInstance = new Vtiger_List_Js(); + setTimeout(function(){ + listInstance.registerFloatingThead(); + }, 10); - app.event.on('Vtiger.Post.MenuToggle', function() { - listInstance.reflowList(); - }); - listInstance.registerDynamicDropdownPosition(); - } + app.event.on('Vtiger.Post.MenuToggle', function() { + listInstance.reflowList(); + }); + listInstance.registerDynamicDropdownPosition(); + } }, - + registerFilterSearch : function () { - var settings = jQuery('.settingsgroup'); + var settings = jQuery('.settingsgroup'); jQuery('.search-list').instaFilta({ targets: '.menuItemLabel', sections : '.instaSearch', @@ -248,11 +203,11 @@ Vtiger_Index_Js("Settings_Vtiger_Index_Js",{ jQuery('.instaSearch').filter(':visible').find('[data-instafilta-hide="false"]').parents('.instaSearch').find('.indicator').removeClass('fa-chevron-right').addClass('fa-chevron-down'); } }); - }, - + }, + registerEvents: function() { this._super(); - this.registerSettingsShortcutClickEvent(); + this.registerSettingsShortcutClickEvent(); this.registerDeleteShortCutEvent(); this.registerWidgetsEvents(); this.registerPinUnpinShortCutEvent(); diff --git a/layouts/v7/skins/contact/style.css b/layouts/v7/skins/contact/style.css index f87982ba76fd840451c8339d87fad08bcface80b..a2c4d6ea5aed6b64d5bbf130fefd8e3ddb5450bc 100644 --- a/layouts/v7/skins/contact/style.css +++ b/layouts/v7/skins/contact/style.css @@ -7264,4 +7264,12 @@ input:focus:-ms-input-placeholder { #QuickCreate .modal-body .quickCreateContent, #create .quickCreateContent { margin-top: 25px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel .pinUnpinShortCut { + display: none; + margin-top: 5px; + margin-right: 10px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel:hover .pinUnpinShortCut { + display: inline-block; } \ No newline at end of file diff --git a/layouts/v7/skins/images/pin.png b/layouts/v7/skins/images/pin.png new file mode 100644 index 0000000000000000000000000000000000000000..68313194bb5cf927279f1215fdb770566d4d0db2 Binary files /dev/null and b/layouts/v7/skins/images/pin.png differ diff --git a/layouts/v7/skins/images/unpin.png b/layouts/v7/skins/images/unpin.png new file mode 100644 index 0000000000000000000000000000000000000000..d8f125ff8cab69edc8868ff683200aaea0385b3b Binary files /dev/null and b/layouts/v7/skins/images/unpin.png differ diff --git a/layouts/v7/skins/inventory/style.css b/layouts/v7/skins/inventory/style.css index fe7ef6c9a2ae45cf8dccd27eb16916baf0343418..0d56e33356d642c14c3993740d217175b5fb6aa2 100644 --- a/layouts/v7/skins/inventory/style.css +++ b/layouts/v7/skins/inventory/style.css @@ -7268,4 +7268,12 @@ input:focus:-ms-input-placeholder { #QuickCreate .modal-body .quickCreateContent, #create .quickCreateContent { margin-top: 25px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel .pinUnpinShortCut { + display: none; + margin-top: 5px; + margin-right: 10px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel:hover .pinUnpinShortCut { + display: inline-block; } \ No newline at end of file diff --git a/layouts/v7/skins/marketing/style.css b/layouts/v7/skins/marketing/style.css index 41b856ff6961cf708502a4547720beb60836b4b0..6e263e6d9d08e0c88d369b33ea2b900b229a8316 100644 --- a/layouts/v7/skins/marketing/style.css +++ b/layouts/v7/skins/marketing/style.css @@ -7530,4 +7530,12 @@ a.btnReport:hover { #QuickCreate .modal-body .quickCreateContent, #create .quickCreateContent { margin-top: 25px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel .pinUnpinShortCut { + display: none; + margin-top: 5px; + margin-right: 10px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel:hover .pinUnpinShortCut { + display: inline-block; } \ No newline at end of file diff --git a/layouts/v7/skins/marketing_and_sales/style.css b/layouts/v7/skins/marketing_and_sales/style.css index edf74d66e8aad498f8443638d5d650c0d7b09f68..dbd4ec4f68d0101383855274313deb6ee16566fb 100644 --- a/layouts/v7/skins/marketing_and_sales/style.css +++ b/layouts/v7/skins/marketing_and_sales/style.css @@ -7269,3 +7269,11 @@ input:focus:-ms-input-placeholder { #create .quickCreateContent { margin-top: 25px; } +.settingsgroup-panel .widgetContainer .menuItemLabel .pinUnpinShortCut { + display: none; + margin-top: 5px; + margin-right: 10px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel:hover .pinUnpinShortCut { + display: inline-block; +} diff --git a/layouts/v7/skins/project/style.css b/layouts/v7/skins/project/style.css index eaab26477360050bc49b0165816691ae40507423..3a7c802e276ebad2ca002193dcee0df9a1907362 100644 --- a/layouts/v7/skins/project/style.css +++ b/layouts/v7/skins/project/style.css @@ -7268,4 +7268,12 @@ input:focus:-ms-input-placeholder { #QuickCreate .modal-body .quickCreateContent, #create .quickCreateContent { margin-top: 25px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel .pinUnpinShortCut { + display: none; + margin-top: 5px; + margin-right: 10px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel:hover .pinUnpinShortCut { + display: inline-block; } \ No newline at end of file diff --git a/layouts/v7/skins/sales/style.css b/layouts/v7/skins/sales/style.css index 746c2b961bfd7616ed3a9eee1fc0b9d2bbfc01c4..51d31b1e056b4b92333e37a24cd991a7734b5fe4 100644 --- a/layouts/v7/skins/sales/style.css +++ b/layouts/v7/skins/sales/style.css @@ -7268,4 +7268,12 @@ input:focus:-ms-input-placeholder { #QuickCreate .modal-body .quickCreateContent, #create .quickCreateContent { margin-top: 25px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel .pinUnpinShortCut { + display: none; + margin-top: 5px; + margin-right: 10px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel:hover .pinUnpinShortCut { + display: inline-block; } \ No newline at end of file diff --git a/layouts/v7/skins/support/style.css b/layouts/v7/skins/support/style.css index e472f1bb386a5c45afb7e1c8bf84a67a9bffa990..edf083cc7827a1d6fe5420e4381993868455c9f9 100644 --- a/layouts/v7/skins/support/style.css +++ b/layouts/v7/skins/support/style.css @@ -7399,4 +7399,12 @@ div.flip { #QuickCreate .modal-body .quickCreateContent, #create .quickCreateContent { margin-top: 25px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel .pinUnpinShortCut { + display: none; + margin-top: 5px; + margin-right: 10px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel:hover .pinUnpinShortCut { + display: inline-block; } \ No newline at end of file diff --git a/layouts/v7/skins/tools/style.css b/layouts/v7/skins/tools/style.css index e9bf73f877faa60eb13a010740b28da569b537c3..c4ee288aea0820b602d719a365f9b910c91e66d4 100644 --- a/layouts/v7/skins/tools/style.css +++ b/layouts/v7/skins/tools/style.css @@ -7264,4 +7264,12 @@ input:focus:-ms-input-placeholder { #QuickCreate .modal-body .quickCreateContent, #create .quickCreateContent { margin-top: 25px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel .pinUnpinShortCut { + display: none; + margin-top: 5px; + margin-right: 10px; +} +.settingsgroup-panel .widgetContainer .menuItemLabel:hover .pinUnpinShortCut { + display: inline-block; } \ No newline at end of file