Mercurial > libervia-web
changeset 34:ed935f763cc8
browser side: misc css/layout fixes
- new ScrollPanelWrapper class, to try to handle correctly ScrollPanels in tables
- removed from EmptyPanel, because all td must appear empty, to use the absolute trick in ScrollPanelWrapper
- when an empty panel is changed to a normal panel, cells widths are recalculated
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Mon, 16 May 2011 03:10:11 +0200 |
| parents | e70521e6d803 |
| children | d43d6e4b9dc8 |
| files | browser_side/panels.py public/libervia.css |
| diffstat | 2 files changed, 72 insertions(+), 88 deletions(-) [+] |
line wrap: on
line diff
--- a/browser_side/panels.py Sat May 14 01:11:08 2011 +0200 +++ b/browser_side/panels.py Mon May 16 03:10:11 2011 +0200 @@ -24,6 +24,7 @@ from pyjamas.ui.FlowPanel import FlowPanel from pyjamas.ui.AbsolutePanel import AbsolutePanel from pyjamas.ui.VerticalPanel import VerticalPanel +from pyjamas.ui.DockPanel import DockPanel from pyjamas.ui.HorizontalPanel import HorizontalPanel from pyjamas.ui.ScrollPanel import ScrollPanel from pyjamas.ui.TabPanel import TabPanel @@ -150,21 +151,56 @@ self.host.mpanels.append(_new_panel) grid = self.getParent() row_idx, cell_idx = self._getCellAndRow(grid, event) - self.removeFromParent() if self.host.selected == self: self.host.select(None) + self.removeFromParent() grid.setWidget(row_idx, cell_idx, _new_panel) + _panels = list(grid) #this suppose that we only use 1 row, need to be changed in the futur + _unempty_panels = filter(lambda wid:not isinstance(wid,EmptyPanel),list(grid)) + _width = 90/float(len(_unempty_panels) or 1) + #now we resize all the cell of the column + for panel in _unempty_panels: + td_elt = panel.getElement().parentNode + DOM.setStyleAttribute(td_elt, "width", "%s%%" % _width) #FIXME: delete object ? Check the right way with pyjamas +class ScrollPanelWrapper(SimplePanel): + """Scroll Panel like component, wich use the full available space + to work around percent size issue, it use some of the ideas found + here: http://code.google.com/p/google-web-toolkit/issues/detail?id=316 + specially in code given at comment #46, thanks to Stefan Bachert""" + + def __init__(self, *args, **kwargs): + SimplePanel.__init__(self) + self.spanel = ScrollPanel(*args, **kwargs) + SimplePanel.setWidget(self, self.spanel) + DOM.setStyleAttribute(self.getElement(), "position", "relative") + DOM.setStyleAttribute(self.getElement(), "top", "0px") + DOM.setStyleAttribute(self.getElement(), "left", "0px") + DOM.setStyleAttribute(self.getElement(), "width", "100%") + DOM.setStyleAttribute(self.getElement(), "height", "100%") + DOM.setStyleAttribute(self.spanel.getElement(), "position", "absolute") + DOM.setStyleAttribute(self.spanel.getElement(), "width", "100%") + DOM.setStyleAttribute(self.spanel.getElement(), "height", "100%") + + def setWidget(self, widget): + self.spanel.setWidget(widget) + + def setScrollPosition(self, position): + self.spanel.setScrollPosition(position) + + def scrollToBottom(self): + self.setScrollPosition(self.spanel.getElement().scrollHeight) + class EmptyPanel(DropCell, SimplePanel): """Empty dropable panel""" def __init__(self, host): SimplePanel.__init__(self) self.host = host - _panel = HTMLPanel(" ") + _panel = HTMLPanel("") self.add(_panel) - self.setHeight('50%') + self.setHeight('100%') DropCell.__init__(self) class UniBoxPanel(SimplePanel): @@ -298,12 +334,14 @@ panel.setStyleName('microblogEntry') self.add(panel) -class MicroblogPanel(DropCell, ScrollPanel): +class MicroblogPanel(DropCell, ScrollPanelWrapper): def __init__(self,host, title=' ', accept_all=False): """Panel used to show microblog @param title: title of the panel @param accept_all: if true, show every message, without filtering jids""" + ScrollPanelWrapper.__init__(self) + DropCell.__init__(self) self.host = host self.accept_all = accept_all title=title.replace('<','<').replace('>','>') @@ -311,14 +349,11 @@ _class = ['mb_panel_header'] if title == ' ': _class.append('empty_header') - ScrollPanel.__init__(self) self.vpanel = VerticalPanel() self.vpanel.add(HTMLPanel("<div class='%s'>%s</div>" % (','.join(_class),title))) self.vpanel.setWidth('100%') - self.setHeight('50%') self.setStyleName('microblogPanel') - self.add(self.vpanel) - DropCell.__init__(self) + self.setWidget(self.vpanel) def addEntry(self, text, author=None, timestamp=None): """Add an entry to the panel @@ -406,16 +441,18 @@ self.occupants.add(_occupant) self.add(_occupant) - - - -class ChatPanel(DropCell, ClickHandler, AbsolutePanel): +class ChatPanel(DropCell, ClickHandler, SimplePanel): def __init__(self, host, target, type='one2one'): """Panel used for conversation (one 2 one or group chat) @param host: SatWebFrontend instance @param target: entity (JID) with who we have a conversation (contact's jid for one 2 one chat, or MUC room) @param type: one2one for simple conversation, group for MUC""" + SimplePanel.__init__(self) + DropCell.__init__(self) + ClickHandler.__init__(self) + self.vpanel = VerticalPanel() + self.vpanel.setSize('100%','100%') self.host = host self.type = type self.nick = None @@ -426,35 +463,26 @@ title="%s" % target.bare title.replace('<','<').replace('>','>') _class = ['mb_panel_header'] - AbsolutePanel.__init__(self) self.header = HTMLPanel("<div class='%s'>%s</div>" % (','.join(_class),title)) + self.header.setStyleName('chatHeader') self.body = AbsolutePanel() self.body.setStyleName('chatPanel_body') - #self.body.setWidth('100%') - #self.body.setHeight('50%') chat_area = HorizontalPanel() chat_area.setStyleName('chatArea') - #chat_area.setHeight('50%') if type == 'group': self.occupants_list = OccupantsList() chat_area.add(self.occupants_list) self.body.add(chat_area) self.content = AbsolutePanel() self.content.setStyleName('chatContent') - #_scrollp.setHeight('50%') - #_scrollp.setWidth('100%') - chat_area.add(ScrollPanel(self.content, Size=("100%", "100%"))) - self.add(self.header) - self.add(self.body) - #self.content.setWidth('100%') - #self.main_panel.setVerticalAlignment(HasAlignment.ALIGN_TOP) - #self.body.setVerticalAlignment(HasAlignment.ALIGN_TOP) - #chat_area.setVerticalAlignment(HasAlignment.ALIGN_TOP) - #self.setWidth('100%') - #self.setHeight('50%') + self.content_scroll = ScrollPanelWrapper(self.content) + chat_area.add(self.content_scroll) + chat_area.setCellWidth(self.content_scroll, '100%') + self.vpanel.add(self.header) + self.vpanel.setCellHeight(self.header, '1%') + self.vpanel.add(self.body) + self.setWidget(self.vpanel) self.setStyleName('chatPanel') - DropCell.__init__(self) - ClickHandler.__init__(self) self.addClickListener(self) def onClick(self, sender, event): @@ -488,8 +516,9 @@ self.printInfo('* %s %s' % (nick, msg[4:]),type='me') return""" self.content.add(ChatText(timestamp, nick, mymess, msg)) + self.content_scroll.scrollToBottom() -class MainDiscussionPannel(HorizontalPanel): +class MainDiscussionPanel(HorizontalPanel): def __init__(self, host): self.host=host @@ -497,17 +526,17 @@ self._left = self.host.contact_panel self._right = Grid(1,3) self._right.setWidth('100%') - self._right.setHeight('50%') + self._right.setHeight('100%') self.add(self._left) self.setCellWidth(self._left, "15%") self.add(self._right) self.setCellWidth(self._right, "85%") - self.setHeight('50%') def changePanel(self, idx, panel): self._right.setWidget(0,idx,panel) + self._right.getCellFormatter().setWidth(0, idx, '5%' if isinstance(panel, EmptyPanel) else '90%') -class MainTabPannel(TabPanel): +class MainTabPanel(TabPanel): def __init__(self, host): TabPanel.__init__(self) @@ -527,7 +556,6 @@ else: tab_bar_h = _elts.item(0).offsetHeight ideal_height = Window.getClientHeight() - tab_panel_elt.offsetTop - tab_bar_h - 5 - print "ideal_height =",ideal_height self.setWidth("%s%s" % (width-5, "px")); self.setHeight("%s%s" % (ideal_height, "px")); @@ -537,42 +565,6 @@ self.tabBar.setVisible(True) self.host.resize() -"""class MainTabPannel(FlowPanel): - - def __init__(self, host): - FlowPanel.__init__(self) - self.host=host - self.tab_panel = TabPanel() - self.tab_panel.tabBar.setVisible(False) - self.addStyleName('mainTabPanel') - FlowPanel.add(self, self.tab_panel) - self.tab_panel.setWidth('100%') - self.tab_panel.setHeight('100%') - Window.addWindowResizeListener(self) - - def onWindowResized(self, width, height): - print "onWindowResized" - tab_panel_elt = self.getElement() - _elts = doc().getElementsByClassName('gwt-TabBar') - if not _elts.length: - print ("ERROR: not TabBar found, it should exist !") - tab_bar_h = 0 - else: - tab_bar_h = _elts.item(0).offsetHeight - ideal_height = Window.getClientHeight() - tab_panel_elt.offsetTop - tab_bar_h - 5 - print "ideal_height =",ideal_height - self.setWidth("%s%s" % (width-5, "px")); - self.setHeight("%s%s" % (ideal_height, "px")); - - def selectTab(self, idx): - self.tab_panel.selectTab(idx) - - def add(self, widget, tabText=None, asHTML=False): - self.tab_panel.add(widget, tabText, asHTML) - if self.tab_panel.getWidgetCount()>1: - self.tab_panel.tabBar.setVisible(True) - self.host.resize()""" - class MainPanel(AbsolutePanel): def __init__(self, host): @@ -586,12 +578,8 @@ unibox_panel = UniBoxPanel(host) self.host.setUniBox(unibox_panel.unibox) status = host.status_panel - self.tab_panel = MainTabPannel(host) - #self.tab_panel.setWidth('100%') - #self.tab_panel.setHeight('50%') - self.discuss_panel = MainDiscussionPannel(self.host) - self.discuss_panel.setWidth('100%') - self.discuss_panel.setHeight('50%') + self.tab_panel = MainTabPanel(host) + self.discuss_panel = MainDiscussionPanel(self.host) self.tab_panel.add(self.discuss_panel, "Discussions") self.tab_panel.selectTab(0) @@ -599,15 +587,7 @@ self.add(unibox_panel) self.add(status) self.add(self.tab_panel) - #self.tab_panel.onWindowResized(Window.getClientWidth(), Window.getClientHeight()) - """self.setCellHeight(menu, "5%") - self.setCellHeight(uni_box, "5%") - self.setCellVerticalAlignment(uni_box, HasAlignment.ALIGN_CENTER) - self.setCellHorizontalAlignment(uni_box, HasAlignment.ALIGN_CENTER) - self.setCellHeight(self.tab_panel, "90%") - self.setCellWidth(self.tab_panel, "100%")""" - self.setWidth("100%") #self.setHeight("99%") Window.addWindowResizeListener(self)
--- a/public/libervia.css Sat May 14 01:11:08 2011 +0200 +++ b/public/libervia.css Mon May 16 03:10:11 2011 +0200 @@ -189,8 +189,7 @@ .microblogPanel { margin: auto; - width: 90%; - overflow: scroll; + width: 95% !important; } .mb_panel_header{ @@ -236,9 +235,13 @@ /* Chat & MUC Room */ .chatPanel { + height: 100%; + width: 100%; } .chatPanel_body { + height: 100%; + width: 100%; } .chatContent { @@ -250,6 +253,7 @@ } .chatArea { + height:100%; } .chat_text_timestamp { @@ -287,8 +291,7 @@ width: 100%; text-align: center; background-color: white; - border: 1px solid #87B3FF; - padding: 4px; + padding: 4px 0; } .warningTarget { @@ -372,3 +375,4 @@ */ border: 3px dashed red; } +