PR: Improve UI/UX of how repositioning panes work

[ccordoba12]

Description of Changes

• Add new action to the Options menu of all dockable plugins called Unlock position, so that users can more easily find how to reorganize plugins in the interface.

  

• Improve UI of title bar that is shown when Unlock position is clicked:

  • Make it taller.
  • Change icon for drag and drop area to better convey the idea that panes can be moved up/down or left/right to be repositioned.
  • Use close hand cursor when dragging pane around.
  • Add lock icon to the right to easily hide the title bar. Also use regular cursor when hovering on it.
  • Use hover and clicked palette states when interacting with it.
  • Add tooltip to the drag/drop and close areas.

  

Affirmation

By submitting this Pull Request or typing my (user)name below,
I affirm the Developer Certificate of Origin
with respect to all commits and content included in this PR,
and understand I am releasing the same under Spyder's MIT (Expat) license.

I certify the above statement is true and correct:

[pep8speaks]

Hello @ccordoba12! Thanks for updating this PR. We checked the lines you've touched for PEP 8 issues, and found:

• In the file spyder/utils/icon_manager.py:

Line 113:80: E501 line too long (94 > 79 characters)

Comment last updated at 2022-06-29 18:09:18 UTC

[dalthviz]

Thanks @ccordoba12 ! Checking locally on Windows and the CI tests I noticed a couple of things:

• The new Unlock position is disabled for Plots:

• Seems like the Options menu now positions different if there is no space to show all the actions. For example with the IPython Console options menu it overlaps the console instead of being shown at the top of the pane:

• Some tests are failing due to the new action (spyder/plugins/history/tests/test_plugin.py::test_init) or due to missing setup code in the test at the end of the files like for the EditorPluginExample:

  spyder/spyder/plugins/editor/widgets/editor.py

  Lines 3559 to 3585 in 504e7c7

  	def test():
  	from spyder.utils.qthelpers import qapplication
  	from spyder.config.base import get_module_path
  	spyder_dir = get_module_path('spyder')
  	app = qapplication(test_time=8)
  	test = EditorPluginExample()
  	test.resize(900, 700)
  	test.show()
  	import time
  	t0 = time.time()
  	test.load(osp.join(spyder_dir, "widgets", "collectionseditor.py"))
  	test.load(osp.join(spyder_dir, "plugins", "editor", "widgets",
  	"editor.py"))
  	test.load(osp.join(spyder_dir, "plugins", "explorer", "widgets",
  	'explorer.py'))
  	test.load(osp.join(spyder_dir, "plugins", "editor", "widgets",
  	"codeeditor.py"))
  	print("Elapsed time: %.3f s" % (time.time()-t0)) # spyder: test-skip
  	sys.exit(app.exec_())
  	if __name__ == "__main__":
  	test()

[isabela-pf]

Hey there! I've seen this work a few times, and it looks like what I expected. Thank you so much for listing everything changed as a list.

I think this is good to merge from my end, I'd just like to suggest a minor change to the tool tips for specificity.

[ccordoba12]

@dalthviz, about your comments above:

The new Unlock position is disabled for Plots

Fixed in one of my latest commits

Seems like the Options menu now positions different if there is no space to show all the actions

That's most probably due to the addition of the new Lock/Unlock action because I didn't change that specifically (you can check the code about it). Other than this (which we could try to address in another PR), this should be ready.

[dalthviz]

Thanks @ccordoba12 ! Checking locally on WIndows seems like the issues with the undock action for plots and even the options menu position error are gone so this LGTM 👍