mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 09:12:52 +00:00
91add0c33e
- I made the buttons work like GitHub comment-on-issue buttons before typing: "Close Note" / "Comment" (disabled) after typing: "Close and Comment" / "Comment" (enabled) - I removed a bunch of the event dispatches. These are useful for sending events to listeners/observers outside of the module. In this case I think we can handle most of the things from within the uiNoteEditor. We can still dispatch an 'update' event so that modeSelectNote can reselect and redraw the note after some change happens to it. TODO - make the buttons work / check the OSM API stuff.
149 lines
2.8 KiB
CSS
149 lines
2.8 KiB
CSS
|
|
/* OSM Notes Layer */
|
|
.layer-notes {
|
|
pointer-events: none;
|
|
}
|
|
.layer-notes .note .note-shadow {
|
|
pointer-events: none;
|
|
}
|
|
.layer-notes .note .note-fill {
|
|
pointer-events: visible;
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-select-point.png), pointer; /* FF */
|
|
}
|
|
|
|
.note-header-icon .note-shadow,
|
|
.layer-notes .note .note-shadow {
|
|
color: #000;
|
|
}
|
|
.note-header-icon .note-fill,
|
|
.layer-notes .note .note-fill {
|
|
color: #ff3300;
|
|
}
|
|
.note-header-icon.closed .note-fill,
|
|
.layer-notes .note.closed .note-fill {
|
|
color: #55dd00;
|
|
}
|
|
.layer-notes .note.hovered .note-fill {
|
|
color: #eebb00;
|
|
}
|
|
.layer-notes .note.selected .note-fill {
|
|
color: #ffee00;
|
|
}
|
|
|
|
/* slight adjustments to preset icon for note icons */
|
|
.note-header-icon .preset-icon-28 {
|
|
top: 18px;
|
|
}
|
|
.note-header-icon .preset-icon-24 {
|
|
top: 20px;
|
|
}
|
|
.note-header-icon .preset-icon-24 .icon.note-fill {
|
|
width: 25px;
|
|
height: 23px;
|
|
}
|
|
|
|
/* OSM Note UI */
|
|
.note-header {
|
|
background-color: #f6f6f6;
|
|
border-radius: 5px;
|
|
border: 1px solid #ccc;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.note-header-icon {
|
|
background-color: #fff;
|
|
padding: 10px;
|
|
flex: 0 0 62px;
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-right: 1px solid #ccc;
|
|
border-radius: 5px 0 0 5px;
|
|
}
|
|
[dir='rtl'] .note-header-icon {
|
|
border-right: unset;
|
|
border-left: 1px solid #ccc;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
.note-header-icon .icon-wrap {
|
|
position: absolute;
|
|
top: 0px;
|
|
}
|
|
|
|
.note-header-label {
|
|
background-color: #f6f6f6;
|
|
padding: 0 15px;
|
|
flex: 1 1 100%;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
[dir='rtl'] .note-header-label {
|
|
border-radius: 5px 0 0 5px;
|
|
}
|
|
|
|
.comments-container {
|
|
background: #ececec;
|
|
padding: 1px 10px;
|
|
margin: 10px 0;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.comment {
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
border: 1px solid #ccc;
|
|
margin: 10px auto;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
}
|
|
.comment-avatar {
|
|
padding: 10px;
|
|
flex: 0 0 62px;
|
|
}
|
|
.comment-avatar .icon.comment-avatar-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: cover;
|
|
border: 1px solid #ccc;
|
|
border-radius: 20px;
|
|
}
|
|
.comment-main {
|
|
padding: 10px;
|
|
flex: 1 1 100%;
|
|
flex-flow: column nowrap;
|
|
overflow: hidden;
|
|
overflow-wrap: break-word;
|
|
}
|
|
.comment-metadata {
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
}
|
|
.comment-author {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.comment-date {
|
|
color: #aaa;
|
|
}
|
|
.comment-text {
|
|
color: #333;
|
|
margin-top: 10px;
|
|
overflow-y: auto;
|
|
max-height: 250px;
|
|
}
|
|
.comment-text::-webkit-scrollbar {
|
|
border-left: none;
|
|
}
|
|
|
|
#new-comment-input {
|
|
width: 100%;
|
|
height: 100px;
|
|
max-height: 300px;
|
|
min-height: 100px;
|
|
}
|