matrix-org · turt2live · Apr 14, 2021 · Dec 19, 2020 · Dec 19, 2020 · Dec 19, 2020
@@ -4,6 +4,7 @@ module.exports = {
  "stylelint-scss",
  ],
  "rules": {
+ "color-hex-case": null,
  "indentation": 4,
  "comment-empty-line-before": null,
  "declaration-empty-line-before": null,

@@ -303,7 +303,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog_lightbox .mx_Dialog_background {
- opacity: 0.85;
+ opacity: $lightbox-background-bg-opacity;
  background-color: $lightbox-background-bg-color;
 }
 
@@ -315,6 +315,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
+ padding: 0;
 }
 
 .mx_Dialog_header {

@@ -14,139 +14,108 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* This has got to be the most fragile piece of CSS ever written.
- But empirically it works on Chrome/FF/Safari
- */
-
 .mx_ImageView {
  display: flex;
  width: 100%;
  height: 100%;
- align-items: center;
-}
-
-.mx_ImageView_lhs {
- order: 1;
- flex: 1 1 10%;
- min-width: 60px;
- // background-color: #080;
- // height: 20px;
+ flex-direction: column;
 }
 
-.mx_ImageView_content {
- order: 2;
- /* min-width hack needed for FF */
- min-width: 0px;
- height: 90%;
- flex: 15 15 0;
+.mx_ImageView_image_wrapper {
  display: flex;
- align-items: center;
  justify-content: center;
+ align-items: center;
+ height: 100%;
+ overflow: hidden;
 }
 
-.mx_ImageView_content img {
- max-width: 100%;
- /* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
- max-height: 100%;
- /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
- object-fit: contain;
- /* background-image: url('$(res)/img/trans.png'); */
+.mx_ImageView_image {
  pointer-events: all;
+ max-width: 95%;
+ max-height: 95%;
 }
 
-.mx_ImageView_labelWrapper {
- position: absolute;
- top: 0px;
- right: 0px;
- height: 100%;
- overflow: auto;
- pointer-events: all;
+.mx_ImageView_panel {
+ width: 100%;
+ height: 68px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
 }
 
-.mx_ImageView_label {
- text-align: left;
+.mx_ImageView_info_wrapper {
+ pointer-events: all;
+ padding-left: 32px;
  display: flex;
- justify-content: center;
- flex-direction: column;
- padding-left: 30px;
- padding-right: 30px;
- min-height: 100%;
- max-width: 240px;
+ flex-direction: row;
+ align-items: center;
  color: $lightbox-fg-color;
 }
 
-.mx_ImageView_cancel {
- position: absolute;
- // hack for mx_Dialog having a top padding of 40px
- top: 40px;
- right: 0px;
- padding-top: 35px;
- padding-right: 35px;
- cursor: pointer;
+.mx_ImageView_info {
+ padding-left: 12px;
+ display: flex;
+ flex-direction: column;
 }
 
-.mx_ImageView_rotateClockwise {
- position: absolute;
- top: 40px;
- right: 70px;
- padding-top: 35px;
- cursor: pointer;
+.mx_ImageView_info_sender {
+ font-weight: bold;
 }
 
-.mx_ImageView_rotateCounterClockwise {
- position: absolute;
- top: 40px;
- right: 105px;
- padding-top: 35px;
- cursor: pointer;
+.mx_ImageView_toolbar {
+ padding-right: 16px;
+ pointer-events: all;
+ display: flex;
+ align-items: center;
 }
 
-.mx_ImageView_name {
- font-size: $font-18px;
- margin-bottom: 6px;
- word-wrap: break-word;
+.mx_ImageView_button {
+ margin-left: 24px;
+ display: block;
+
+ &::before {
+ content: '';
+ height: 22px;
+ width: 22px;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ mask-position: center;
+ display: block;
+ background-color: $icon-button-color;
+ }
 }
 
-.mx_ImageView_metadata {
- font-size: $font-15px;
- opacity: 0.5;
+.mx_ImageView_button_rotateCW::before {
+ mask-image: url('$(res)/img/image-view/rotate-cw.svg');
 }
 
-.mx_ImageView_download {
- display: table;
- margin-top: 24px;
- margin-bottom: 6px;
- border-radius: 5px;
- background-color: $lightbox-bg-color;
- font-size: $font-14px;
- padding: 9px;
- border: 1px solid $lightbox-border-color;
+.mx_ImageView_button_rotateCCW::before {
+ mask-image: url('$(res)/img/image-view/rotate-ccw.svg');
 }
 
-.mx_ImageView_size {
- font-size: $font-11px;
+.mx_ImageView_button_zoomOut::before {
+ mask-image: url('$(res)/img/image-view/zoom-out.svg');
 }
 
-.mx_ImageView_link {
- color: $lightbox-fg-color !important;
- text-decoration: none !important;
+.mx_ImageView_button_zoomIn::before {
+ mask-image: url('$(res)/img/image-view/zoom-in.svg');
 }
 
-.mx_ImageView_button {
- font-size: $font-15px;
- opacity: 0.5;
- margin-top: 18px;
- cursor: pointer;
+.mx_ImageView_button_download::before {
+ mask-image: url('$(res)/img/image-view/download.svg');
 }
 
-.mx_ImageView_shim {
- height: 30px;
+.mx_ImageView_button_more::before {
+ mask-image: url('$(res)/img/image-view/more.svg');
 }
 
-.mx_ImageView_rhs {
- order: 3;
- flex: 1 1 10%;
- min-width: 300px;
- // background-color: #800;
- // height: 20px;
+.mx_ImageView_button_close {
+ border-radius: 100%;
+ background: #21262c; // same on all themes
+ &::before {
+ width: 32px;
+ height: 32px;
+ mask-image: url('$(res)/img/image-view/close.svg');
+ mask-size: 40%;
+ }
 }
@@ -85,6 +85,7 @@ $dialog-close-fg-color: #9fa9ba;
 
 $dialog-background-bg-color: $header-panel-bg-color;
 $lightbox-background-bg-color: #000;
+$lightbox-background-bg-opacity: 85%;
 
 $settings-grey-fg-color: #a2a2a2;
 $settings-profile-placeholder-bg-color: #21262c;
@@ -242,7 +243,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28);
 @define-mixin mx_DialogButton_secondary {
  // flip colours for the secondary ones
  font-weight: 600;
- border: 1px solid $accent-color ! important;
+ border: 1px solid $accent-color !important;
  color: $accent-color;
  background-color: $button-secondary-bg-color;
 }

@@ -83,6 +83,7 @@ $dialog-close-fg-color: #9fa9ba;
 
 $dialog-background-bg-color: $header-panel-bg-color;
 $lightbox-background-bg-color: #000;
+$lightbox-background-bg-opacity: 85%;
 
 $settings-grey-fg-color: #a2a2a2;
 $settings-profile-placeholder-bg-color: #e7e7e7;

@@ -127,6 +127,7 @@ $dialog-close-fg-color: #c1c1c1;
 
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
+$lightbox-background-bg-opacity: 95%;
 
 $imagebody-giflabel: rgba(0, 0, 0, 0.7);
 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);

@@ -118,6 +118,7 @@ $dialog-close-fg-color: #c1c1c1;
 
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
+$lightbox-background-bg-opacity: 95%;
 
 $imagebody-giflabel: rgba(0, 0, 0, 0.7);
 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);

@@ -97,15 +97,15 @@ export function formatFullDateNoTime(date: Date): string {
  });
 }
 
-export function formatFullDate(date: Date, showTwelveHour = false): string {
+export function formatFullDate(date: Date, showTwelveHour = false, showSeconds = true): string {
  const days = getDaysArray();
  const months = getMonthsArray();
  return _t('%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s %(time)s', {
  weekDayName: days[date.getDay()],
  monthName: months[date.getMonth()],
  day: date.getDate(),
  fullYear: date.getFullYear(),
- time: formatFullTime(date, showTwelveHour),
+ time: showSeconds ? formatFullTime(date, showTwelveHour) : formatTime(date, showTwelveHour),
  });
 }
 

@@ -129,7 +129,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
  name: this.props.room.name,
  };
 
- Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+ Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
  };
 
  public render() {

@@ -52,6 +52,9 @@ export default class MessageContextMenu extends React.Component {
 
  /* callback called when the menu is dismissed */
  onFinished: PropTypes.func,
+
+ /* if the menu is inside a dialog, we sometimes need to close that dialog after click (forwarding) */
+ onCloseDialog: PropTypes.func,
  };
 
  state = {
@@ -141,6 +144,7 @@ export default class MessageContextMenu extends React.Component {
 
  const cli = MatrixClientPeg.get();
  try {
+ if (this.props.onCloseDialog) this.props.onCloseDialog();
  await cli.redactEvent(
  this.props.mxEvent.getRoomId(),
  this.props.mxEvent.getId(),
@@ -190,6 +194,7 @@ export default class MessageContextMenu extends React.Component {
  };
 
  onForwardClick = () => {
+ if (this.props.onCloseDialog) this.props.onCloseDialog();
  dis.dispatch({
  action: 'forward_event',
  event: this.props.mxEvent,