Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ZMI: dbmain form, ordered folder icon #729

Closed
drfho opened this issue Nov 7, 2019 · 4 comments
Assignees
Labels

Comments

@drfho
Copy link
Contributor

@drfho drfho commented Nov 7, 2019

Hi, found 2 small css probs in ZMI:

zmi_cssprbs

I will provide a PR for that...
got some connection issues with VSCode now - so the code diff here in advance:

zms_base_css

/Zope/src/zmi/styles/resources/zmi_base.css
L621
%< - - - - - -
/* CUSTOM ICON: Folder (Ordered) */
i.fa-folder.zmi-icon-folder-ordered:after {
	content: "\f338";
	font-family: "Font Awesome\ 5 Free",Fontawesome;
	font-weight:900;
	margin: .475rem 0 0 -.7rem;
	position:absolute;
	font-size:14px;
}
.zmi .breadcrumb i.fa-folder.zmi-icon-folder-ordered:after {
	font-size:12px;
}
%< - - - - - -

dbMain

/Zope/src/App/dtml/dbMain.dtml
L49
%< - - - - - -
  <div class="zmi-controls mb-5">
    <form action="&dtml-URL1;/manage_pack" method="post">
      <div class="input-group">
        <input class="btn btn-primary" id="pack" type="submit"
          name="submit" value="Pack" />
        <input class="form-control col-sm-1 col-3 ml-2 text-right" type="text"
          name="days:float" value="0" size="3" />
        <label class="mt-2 ml-2">days</label>
      </div>
      <small class="form-text text-muted">
        Pack: Remove previous object revisions older than the selected
        number of days.
      </small>
    </form>
  </div>
%< - - - - - -

zmi_changes

@drfho drfho added the enhancement label Nov 7, 2019
@dataflake dataflake self-assigned this Nov 8, 2019
@dataflake dataflake closed this in e894810 Nov 8, 2019
dataflake added a commit that referenced this issue Nov 8, 2019
@dataflake

This comment has been minimized.

Copy link
Member

@dataflake dataflake commented Nov 8, 2019

@drfho Don't worry about the PR, I copied the changes from your description and tested them manually. It's all done.

@dataflake

This comment has been minimized.

Copy link
Member

@dataflake dataflake commented Nov 8, 2019

I'll need to reopen this:

This is a browser-specific issue. The symptom you saw appeared on Chrome/Chromium and your fix helped it. The issue did not show on Firefox, and the fix now breaks the Ordered Folder icon, but only in the main content list. Not in the left-hand side folder tree:

Screenshot

@dataflake dataflake reopened this Nov 8, 2019
@drfho

This comment has been minimized.

Copy link
Contributor Author

@drfho drfho commented Nov 8, 2019

oh, that's really bad. After serveral approaches with the before/after icon aggregation i could not compsensate the surprising differences in Chrome, Edge, FF, Safari. The best mapping (with an acceptable pixel deviation) I got by putting the "sort" icon as a background data-url. So the icon's style definition is reduced to one CSS element that scales to the different contexts.

icon_compare

/Zope/src/zmi/styles/resources/zmi_base.css
L621
%< - - - - - -
/* CUSTOM ICON: Folder (Ordered) */
.far.fa-folder.zmi-icon-folder-ordered {
	background-image: url('data:image/svg+xml;utf8,<svg width="220.21" height="134.06" version="1.1" viewBox="0 0 220.21 134.06" xmlns="http://www.w3.org/2000/svg"><path d="m150.11 0h46.059c21.382 0 32.09 25.851 16.971 40.971l-86.059 86.059c-9.373 9.373-24.568 9.373-33.941 0l-86.059-86.059c-15.119-15.119-4.411-40.971 16.971-40.971h46.058z" fill="black"/></svg>');
	background-size: 42%;
	background-position: center 0.45em;
	background-repeat: no-repeat;
}
/* HEADER BAR */
%< - - - - - -

Thanks!

@dataflake

This comment has been minimized.

Copy link
Member

@dataflake dataflake commented Nov 8, 2019

Yes, that fixes it, thanks. It's on master and 4.x now.

@dataflake dataflake closed this Nov 8, 2019
drfho added a commit that referenced this issue Nov 8, 2019
dataflake added a commit that referenced this issue Nov 8, 2019
dataflake added a commit that referenced this issue Nov 15, 2019
… scrolling left/right (#731)

* Issues #729, #730

* - observe existing ordering

* - add change log entry

* - fix misspelled name

* - fix typo

* - show both role and permission in tooltip

* Issues #729, #730

* - observe existing ordering

* - add change log entry

* - fix misspelled name

* - fix typo

* - show both role and permission in tooltip
dataflake added a commit that referenced this issue Nov 15, 2019
… scrolling left/right (#731)

* Issues #729, #730

* - observe existing ordering

* - add change log entry

* - fix misspelled name

* - fix typo

* - show both role and permission in tooltip

* Issues #729, #730

* - observe existing ordering

* - add change log entry

* - fix misspelled name

* - fix typo

* - show both role and permission in tooltip
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.